Plan Components

Analyze a Figma page design and produce a structured component breakdown, classifying each component and identifying reuse opportunities.

Step 1: Gather Design Context from Figma

Use the figma-desktop MCP tools to fetch the design data and a screenshot for the provided Figma node. If the page is large or truncated, use get_metadata first, then fetch child nodes individually to get the complete picture.

Step 2: Inventory Existing Components

Before planning new components, audit what already exists in the codebase:

1. Shared components — list everything in src/components/ (PascalCase folders, each containing a .tsx file and optional .stories.tsx).
2. UI primitives — check src/components/ui/ for low-level shared primitives (Provider, ColorMode, Prose, Toaster, etc.).
3. Form components — check src/components/form/ for form-related components.
4. Layout components — check src/components/layout/ for layout primitives.
5. Route-specific components — check src/routes/ for -components/ directories near the relevant route that may contain reusable pieces.

Read the source of any component that looks like a potential match for elements in the design. Understand its props, variants, and visual appearance.

Step 3: Break Down the Design

Walk through the Figma design systematically — top to bottom, outside to inside. For every distinct visual element or group, decide:

• Is it an existing component that can be used as-is?
• Is it an existing component that needs modification (new props, new variant)?
• Is it a new component that needs to be built?

Classify every new component into one of three tiers:

Tier 1: Low-Level Components → building-low-level-components skill

• Extend or wrap Chakra UI primitives. Reusable on any page.
• Includes form field components (date pickers, custom inputs, etc.).
• Live in src/components/ or src/components/form/ in their own PascalCase folder.

Tier 2: Composite Components → building-composite-components skill

• Represent a section of a page. Compose Tier 1 + Chakra primitives.
• Used in one page or a small handful.
• Live in src/components/ (if reusable) or the route's -components/ directory (if route-specific).

Tier 3: Page Component → building-page-components skill

• Top-level route component owning layout and data fetching.
• Contains only layout primitives and composed components — no inline UI.
• Lives in src/routes/ as the route file itself.

Step 4: Produce the Component Plan

Output a structured plan with these sections:

1. Page Overview

A brief description of the page's purpose and the Figma screenshot for reference.

2. Existing Components to Reuse

A table of existing components that match elements in the design:

3. New Components to Build

Group by tier. For each new component:

• Name — PascalCase, descriptive.
• Tier — 1 (low-level), 2 (composite), or 3 (page).
• Location — where it will live in the file tree.
• Description — what it renders and its responsibility.
• Props — key props it will accept (name, type, purpose).
• Composes — which existing or other new components it uses internally.
• Design notes — any specific design details (colors, spacing, interactions) worth calling out.

4. Component Tree

A visual hierarchy showing how components nest on the page:

PageComponent (Tier 3)
├── Header (existing)
├── HeroSection (Tier 2)
│   ├── Heading (Chakra)
│   └── StatCard (Tier 1, new)
├── ContentGrid (Tier 2)
│   ├── CategoryCard (existing)
│   └── FeatureCard (Tier 1, new)
└── Footer (existing)

5. Implementation Order

Recommend a build order, and for each tier call out the specific skill that should be used to implement it:

1. New Tier 1 (low-level) components first — they have no internal dependencies. Use the building-low-level-components skill to build these. This skill covers generic UI primitives, form field components, Chakra extensions, and Storybook story creation.
2. New Tier 2 (composite) components next — they depend on Tier 1. Use the building-composite-components skill to build these. This skill covers Figma-to-code translation, design token fidelity, and visual verification with Storybook and Playwright.
3. The Tier 3 (page) component last — it composes everything. Use the building-page-components skill to build this. This skill covers data loading, mutations, layout assembly, and Figma comparison at the page level.

For each component, note if it blocks other components.

Guidelines

• Prefer reuse over creation. If an existing component is 80% right, extend it with new props rather than building from scratch.
• Keep Tier 1 generic — no business logic or page-specific assumptions.
• Name components after what they represent, not appearance. PricingTierCard not BlueCardWithBorder.
• Flag ambiguity — call out unclear interaction states, responsive behavior, or edge cases for the user to clarify.