v1.0.0 — Component Skill
Initial release. Design system component workflow — Figma to production, DS-compliant. 5 actions, 5 principles, 8 templates. Stack-agnostic: React, Vue, Svelte, Angular, Web Components.
New Files
| File | Description |
|---|---|
component/SKILL.md |
Main skill definition — action router, Figma integration, token scan protocol, agent capabilities |
component/README.md |
Skill-level documentation with quick start and features overview |
component/references/actions/structure.md |
Generate component architecture spec from Figma link or description |
component/references/actions/doc.md |
Generate component documentation co-located with source |
component/references/actions/dev.md |
Iterative ship loop implementation (up to 12 iterations, quality-gated) |
component/references/actions/review.md |
DS compliance review against 5 principles (COMPLIANT / NEEDS WORK / NON-COMPLIANT) |
component/references/actions/audit.md |
System-wide design system audit with hardcoded value detection |
component/references/principles/composition.md |
Atomic Design rules — component hierarchy, compound patterns, single responsibility |
component/references/principles/naming.md |
BEM conventions — Block__Element--Modifier, prop/event/file naming |
component/references/principles/tokens.md |
DTCG token standard — zero hardcoded values, token tiers, naming adaptation |
component/references/principles/props-api.md |
Component API patterns — max 7 props, smart defaults, strict types, slots over props |
component/references/principles/accessibility.md |
WCAG 2.1 AA — semantic HTML, keyboard nav, ARIA, focus management, contrast |
component/references/templates/spec.md |
Component architecture spec file template |
component/references/templates/doc.md |
Component documentation file template |
component/references/templates/audit-report.md |
Audit report file template |
component/references/templates/structure-output.md |
Chat output format for structure action |
component/references/templates/doc-output.md |
Chat output format for doc action |
component/references/templates/dev-output.md |
Chat output format for dev action (iteration + exit states) |
component/references/templates/review-output.md |
Chat output format for review action (verdict + findings) |
component/references/templates/audit-output.md |
Chat output format for audit action |
Summary
- Added Component skill — full DS workflow from Figma design to production-ready, accessible code
- Included 5 actions: structure, doc, dev, review, audit — each standalone, usable independently
- Encoded 5 design system principles: Atomic Design, BEM, DTCG tokens, Props API, WCAG 2.1 AA
- Built 8 templates for specs, docs, audit reports, and chat output formatting
- Supported two input modes: Figma MCP (automatic design context extraction) and prompt-based (codebase analysis)
- Enforced zero hardcoded values — every color, spacing, radius, shadow must map to a design token
- Implemented human-in-the-loop token creation — never creates tokens without user approval