tessleng/ui

Implement frontend designs from Figma using Chakra UI v3 and Storybook. This tile provides a structured workflow for going from design to production code, with skills covering planning, component tiers, and page assembly.

Skills

plan-components

Break down a Figma page design into a structured component plan. Identifies reusable existing components, classifies new ones into tiers (low-level, composite, page), maps the component hierarchy, and suggests an implementation order. Start here before building anything.

building-low-level-components

Build generic, reusable primitives that extend or complement Chakra UI v3 — custom inputs, display elements, layout helpers, form fields, and interactive widgets. These are Tier 1 components with no page-specific or business logic. Includes form field integration with TanStack Form.

building-composite-components

Build feature-level components that combine multiple low-level primitives into a cohesive UI block. These are Tier 2 components — reusable across pages but containing more structure than a single primitive. Implemented from Figma designs with Storybook stories.

building-page-components

Build page-level components that assemble composite and low-level components into full pages. These are Tier 3 components — responsible for layout, data loading, and mutations. The actual UI lives in the composite and low-level components; pages wire them together.

Recommended workflow

1. Plan — Use plan-components to analyse the Figma design and produce a component breakdown.
2. Build bottom-up — Implement low-level components first, then composites, then pages.
3. Verify — Each skill includes Storybook and Playwright verification steps.

Requirements

• Figma MCP server connection (figma or figma-desktop) for design-to-code workflows
• Chrome DevTools MCP server for visual verification (optional)