skills.rest
Mozurok
MozurokCOMMUNITY
Explore all skills by this author →
GitHub

component-spec

Generate a 15-section component specification from Figma components via MCP tools.

6|Updated Jul 10, 2026
Search Tags:#documentation#accessibility#design system#figma#mcp#design tokens#component spec
One-click install
npx skills add https://github.com/Mozurok/fhorja.dev --skill component-spec-mozurok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec
Source: https://github.com/Mozurok/fhorja.dev/tree/main/.claude/skills/component-spec
Command: npx skills add https://github.com/Mozurok/fhorja.dev --skill component-spec-mozurok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documenting a design system component by hand means repeatedly switching between Figma and a spec template, and details like states, contrast ratios, and touch targets get missed or guessed. This Skill extracts visual properties directly from a Figma component and produces a complete, implementation-ready specification. ## Core Features & Use Cases - Figma-driven extraction: Uses MCP tools (get_design_context, get_screenshot, get_variable_defs) to pull layout, styles, variants, sizes, and design tokens from the component node. - 15-section spec output: Produces a spec covering anatomy, variants, sizes, states, accessibility, motion, haptics, platform differences, TypeScript API, usage examples, and anti-patterns, saved to docs/research/components/<tier>/<component-name>.md. - Provenance marking: Every observation is labeled confirmed (from Figma) or proposed (inferred from conventions), and ambiguities are logged to OPEN_QUESTIONS.md. - Use Case: Given a Figma button component URL and its atomic tier, generate a full spec with computed contrast ratios, 44pt touch target checks, and a draft props interface so a developer can implement it without opening Figma. ## Quick Start Generate a component spec for the Figma button component at this URL, tier atom, in my project workspace.

Frequently Asked Questions about component-spec

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

FAQPage Schema
How do I generate a component spec from a Figma component?▼

Provide the Figma component node ID or URL, its atomic tier (atom, molecule, organism, or layout), and your project workspace path. The Skill calls get_design_context, get_screenshot, and get_variable_defs to extract visual properties, then writes a 15-section spec to docs/research/components/<tier>/<component-name>.md.

What sections does the generated component specification include?▼

The spec includes 15 sections: anatomy, variants, sizes, states, accessibility, motion, haptics, platform specifics, a proposed TypeScript API, usage example, and anti-patterns. No section is left empty; unavailable data is marked N/A or proposed.

Does it handle Figma states that are not visible in the design?▼

Yes. It applies a mandatory 6-state checklist (default, pressed, focused, disabled, loading, error). States not visible in Figma, such as focused or loading, are marked as proposed with industry-standard recommendations rather than invented as confirmed facts.

When should I not use this component spec generator?▼

Do not use it when the component has no Figma representation, since extraction depends on Figma MCP tools. Also skip it when the spec already exists; in that case edit the existing document manually instead of regenerating it.

How are design tokens referenced in the generated spec?▼

Tokens are referenced by semantic name from the foundation docs, not raw hex or point values. The Skill calls get_variable_defs on the component to identify which color, typography, and spacing tokens it uses, then cross-references them in the spec.

Related Skills

Explore More Design & Creative Skills→
Eva813Eva813
2

figma-implement-design

Translate Figma designs into UI code with design system tokens.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
polsegupolsegu

consistency-check

Scan game design documents against the entity registry to detect cross-document inconsistencies.

Community
Advanced
carllelandtaylorcarllelandtaylor

plan-design

Generate design documents and Figma-like mockups from product requirements.

Community
Advanced