Page Planner Skill
Generate visual page plans for UI implementation - component strategy, layout wireframes, animation blueprints.
Triggers
-
"/pageplan [@context-files...]"
-
"plan page layout"
-
"create page wireframe"
-
"วางแผนหน้าเว็บ"
Quick Usage
With context files
/pageplan @proposal.md @prd.md
Current change only
/pageplan
Specify change ID
/pageplan landing-page
What Gets Generated
openspec/changes/{change-id}/page-plan.md containing:
Section Content
Component Plan Reuse vs new components
Page Structure Layout composition (TSX)
Layout Wireframe ASCII art (Desktop/Tablet/Mobile)
Animation Blueprint Hover, focus, transition patterns
UI States Empty, loading, success, error states
Asset Checklist Images, icons to prepare
Input Sources
Source Purpose
@context-files
User-provided requirements
proposal.md
Change description
tasks.md
Page type detection
phases.md
Phase information
design-system/data.yaml
Design tokens
Workflow
- Detect Change → Find active change or use provided ID
- Read Context → Load all input sources
- Search Components → Find existing reusable components
- Generate Plan → Component plan, wireframes, animations
- Write Output → page-plan.md
Output Sections
- Component Plan
-
Reuse: Found components with paths and usage
-
New Shared: Components for multiple pages
-
New Specific: Page-only components
- Layout Wireframe
ASCII art for Desktop, Tablet, Mobile views with:
-
Container sizes
-
Grid breakpoints
-
Spacing details
- Animation Blueprint
From data.yaml tokens:
-
Button animations (scale + shadow)
-
Card animations (shadow elevation)
-
Input animations (ring focus)
-
Navigation animations
-
Performance guidelines
- UI States
For each component:
-
Empty state
-
Loading state
-
Success state
-
Error state
-
Disabled state
- Asset Checklist
-
Images (WebP, responsive sizes)
-
Icons (SVG preferred)
-
Performance notes
Detailed Documentation
Reference Use When
references/generation-steps.md Full step-by-step process
references/wireframe-patterns.md Layout wireframe examples
references/animation-patterns.md Animation blueprint guide
templates/page-plan.md Output template
Integration
/designsetup → /pageplan → /csetup → /cdev ↓ ↓ ↓ ↓ data.yaml page-plan.md research uxui-frontend (visual) checklist reads both
Separation:
-
/pageplan = Visual (layout, components, animations)
-
/csetup = Research (best practices, content strategy)