Day 3 : AIS#7DaysChallenge- Front-end Development Skill
I built a Front-End Skill using Claude that connects with Figma MCP to automatically generate real, production-ready UI from either a Figma link or a simple description. Skill name: front-end Use it when: someone asks to build a UI, component, or scaffold a front-end from Figma. What this skill does From a Figma URL (or detailed description), it: - Reads design context + screenshot via Figma MCP - Understands layout, spacing, colors, typography, interactions - Generates 3 production files: React Component (TypeScript + Tailwind) Storybook story (CSF3) Unit test (Vitest + RTL) Stack - React 18 + TypeScript - Tailwind CSS (no inline styles, ever) - Storybook 7+ - Vitest + React Testing Library Built-in workflow intelligence The skill automatically: - Detects if input is Figma or description - Extracts fileKey and nodeId - Calls Figma MCP for design context + screenshot - Infers component name, props, variants, accessibility - Splits into sub-components if file >200 lines - Enforces WCAG accessibility on every interactive element - Uses named exports only - Prevents silent package installs This turns Figma → production frontend in minutes, not hours. Design to code is no longer manual.