work-with-design-systems

The work-with-design-systems repository contains a Claude skill that works with Claude Code, Cursor, and Codex to manage Figma design systems. It offers two modes: inspect (read‑only) runs six audit modules – token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and component descriptions – producing a weighted readiness score and always pausing for user decision. Build mode follows a six‑phase workflow (discovery, foundations, file structure, components, QA, optional Phase 6 sync to code) to create or extend design systems, add slots to compound components, write structured descriptions, and optionally generate tokens.css with three‑layer indirection, AI rule files for the IDE, and a CI‑ready audit script. The skill supports inputs such as brand guidelines, token JSON, screenshots, codebases, and Storybook, and can export to multiple frameworks via framework‑mappings. Phase 6 is off by default and only runs on explicit request, ensuring safe retrofits. All reference and script files load on demand, keeping the skill lightweight.