figma-to-component

Auto-generate React components by providing a Figma design URL. The Skill converts the design into a complete component scaffold with index.tsx, CSS Modules, TypeScript types, Playwright tests, and Storybook stories, enforcing project conventions like Flexbox layouts and data-testid attributes.

Yes. The Skill scaffolds components with a complete TDD setup: unit tests, Playwright UI tests, and Storybook stories. It generates the full directory structure including test files and story files alongside your component code.

Generated components include index.tsx with TypeScript types, styles.module.css using CSS Modules and Flexbox, a tests/ directory with Playwright tests and binding tests, and a stories/ directory for Storybook documentation.

Provide the updated Figma design URL to regenerate the component. The Skill re-applies your project rules and validates visual fidelity against the Figma reference, keeping your component synchronized with design changes.

The Skill enforces CSS Modules with Flexbox layouts, avoids absolute positioning, adds data-testid attributes for testing, generates TypeScript types, and emits a standard component directory structure compatible with your project rules.