skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tdd-from-figma

Generate failing test files from Figma design specifications.

7|1|Updated Mar 11, 2026
Search Tags:#tdd#figma#test-driven development#design tokens#component testing#accessibility testing#pwa tests
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill tdd-from-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tdd-from-figma
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/tdd-from-figma
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill tdd-from-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about tdd-from-figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent Figma design drift when building React components?▼

Test-driven development from Figma prevents design drift by generating comprehensive failing test files that constrain components to exact token values, ARIA roles, and structure before implementation begins.

Can I generate accessibility tests for Vue components using Figma design tokens?▼

Yes, you can generate accessibility tests for Vue components using design-tokens.lock.json. The generated test files automatically cover ARIA roles, text content, and component structure to ensure accessibility attributes match your Figma design specifications exactly.

What inputs do I need to generate test files for Svelte components from Figma?▼

You need design-tokens.lock.json and build-spec.json files to generate test files for Svelte components. These mandatory inputs provide the exact design specifications and component list required to create failing tests covering rendering, accessibility, and user interactions.

Does test-driven development from Figma work for Chrome extensions and PWAs?▼

Yes, test-driven development from Figma works for Chrome extensions and PWAs. It automatically adapts test templates to include specialized tests for manifests, service workers, and platform-specific APIs alongside standard component rendering and accessibility checks.

Why do my Figma components keep deviating from the original design specifications?▼

Figma components deviate from design specifications due to missing structural constraints during implementation. Generating failing test files prior to coding enforces red-green-refactor discipline, locking components to exact text content, ARIA roles, and design token values.

What is the best way to test React Native components against Figma design tokens?▼

The best way to test React Native components against Figma tokens is generating comprehensive failing test files before implementation. This test-first workflow automatically adapts test templates for cross-platform projects, ensuring variants and user interactions align with exact design specifications.

Related Skills

Explore More Software Engineering Skills→
PMDevSolutionsPMDevSolutions
7

figma-intake

Extract Figma file structure, design tokens, and component inventories into build-spec.json.

Official
Advanced
kckylechen1kckylechen1

test-driven-development

Enforce failing tests before implementing production code via Red-Green-Refactor.

Community
Intermediate
gihwan-devgihwan-dev
1

figma-to-code

Convert Figma design data into React component code.

Community
Advanced
mukiwumukiwu
58

pixel-diff

Compare two images to produce a pixel-level visual diff and JSON report.

Community
Intermediate