tdd-from-figma

What problem does it solve?

This Skill eliminates the risk of component drift, missing accessibility attributes, and structural deviations when building application components from Figma designs, ensuring every final component matches the original design specification exactly without manual cross-checking.

Core Features & Use Cases

• Test-First TDD Workflow: Generates comprehensive failing test files for every component before any implementation code is written, enforcing red-green-refactor discipline.
• Design Token Alignment: All test assertions use exact values from the design-tokens.lock.json file, so components are constrained to match text content, ARIA roles, and structure precisely.
• App & Framework Awareness: Automatically adapts test templates for Chrome extensions, PWAs, web apps, and cross-platform projects using React, Vue, Svelte, or React Native, including specialized tests for manifests, service workers, and platform-specific APIs.
• Use Case: If you are building a React e-commerce app from a Figma design, this Skill will automatically generate test files for all UI primitives, layout components, and page sections covering rendering, accessibility, text content, and user interactions, so you can implement components confident they will pass all design alignment checks.

Quick Start

Use the tdd-from-figma skill to generate failing test files for all components listed in your build-spec.json before writing any implementation code.