cursor-skills

Create, apply, audit, and understand Variables in Figma using Google Material Design's three-tier token inheritance (Ref → Sys → Comp). Use when: creating Variables for components or screens, applying existing Variables to one node, selected nodes, a component set, or the current page, auditing token naming and structure for compliance, or having AI read existing Variables to reverse-engineer design components. Triggers: create Variables, apply Variables, Figma variables, M3 token, design token, token inheritance, token audit, audit variables, design component from variables, batch apply variables, bind variables to component, three-tier token.

Create or update PRD-led Storybook product prototypes under src/pages/prototypes with docs, typed route and transition metadata, deterministic fixtures, intuitive UI Flow review data, draggable Storybook UI Flow viewers with animated dashed arrow connections, Figma-exportable flow stories, and prototype Storybook stories. Use when building a new product prototype, turning a product idea into PRD plus UI Flow, standardizing prototype docs, updating an existing prototype flow, or preparing a Storybook prototype flow for JSON import into Figma with storybook-to-figma.

Build or update token-backed Storybook foundations, shared UI components, and stories from an extracted design-system package. Use after design-system-extractor, or when Codex must read design-system Markdown and token files, automatically trace original design sources such as Figma URLs/nodes, UI images, rendered routes, and frontend folders, infer component dependency order so core primitives are built before composed components, map component specs into a product repo, create or update Storybook docs, plan component batches, structure stories and DOM for reliable Figma export, and verify implementation with the bundled Figma export addon without bypassing tokens.

Create or update PRD-led Storybook product prototypes under src/pages/prototypes with docs, typed route and transition metadata, deterministic fixtures, UI Flow review data, and prototype Storybook stories. Use when building a new product prototype, turning a product idea into PRD plus UI Flow, standardizing prototype docs, or updating an existing prototype flow.

Create PRD-led product prototypes in Storybook with docs, deterministic data, typed UI Flow route and transition metadata, and prototype stories. Use when turning a product idea into PRD, UI Flow, Data Spec, Acceptance Criteria, and a clickable Storybook prototype; when scaffolding a new prototype folder; or when validating prototype docs and metadata across React Storybook projects.

Create PRD-led product prototypes in Storybook with docs, deterministic data, typed UI Flow route and transition metadata, and prototype stories. Use when turning a product idea into PRD, UI Flow, Data Spec, Acceptance Criteria, and a clickable Storybook prototype; when scaffolding a new prototype folder; or when validating prototype docs and metadata across React Storybook projects.

Extract a reusable design-system specification from UI screenshots/images, Figma URLs or exports, Figma Variables, existing app/project folders, or prototype code. Use when Codex must produce evidence-backed design principles, design elements, token architecture, component inventory, component token specs, anti-AI style constraints, static HTML documentation for developers, cross-agent handoff guidance for Claude Code/Cursor/Codex, and a checkpoint before any product implementation.

Build or update token-backed Storybook foundations, shared UI components, and stories from an extracted design-system package. Use after design-system-extractor, or when Codex must read design-system Markdown and token files, automatically trace original design sources such as Figma URLs/nodes, UI images, rendered routes, and frontend folders, infer component dependency order so core primitives are built before composed components, map component specs into a product repo, create or update Storybook docs, plan component batches, and verify implementation with the bundled Figma export addon without bypassing tokens.

Analyze artifact consistency for a change

Verify implementation matches artifacts

Bootstrap a full frontend delivery workspace from UI screenshots or a Figma URL, then carry the implementation through Storybook-first, token-first development and visual parity. Use when the user wants to start a new product build from reference images, a Figma design, or both.

Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.

Commit files related to a specific Spectra change

Commit files related to a specific Spectra change

Implement or resume tasks from a Spectra change

Archive a completed change

Query openspec/documents and answer questions

Audit changed code for security sharp edges — dangerous defaults, type confusion, and silent failures

Commit files related to a specific Spectra change

Systematically debug a problem using a four-phase workflow

Have a focused discussion about a topic and reach a conclusion

Update an existing Spectra change from external context

Create a change proposal with all required artifacts

Apply token-first and Storybook-first design-system rules before implementing app screens.

Create, audit, and bind Figma variables before code implementation in Figma-first workspaces.

Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.

Compare the implementation against screenshots or a configured Figma design and fix drift using token-first ownership.

Compare a UI implementation against one or more reference screenshots using automatic target discovery or an explicitly paired live URL, route, page, or component file. Use when auditing visual parity, fixing layout/token drift, or aligning implemented UI with screenshot references across any frontend project. Enforces component-first, token-first visual fixes before page-level style overrides.

Enforces token-first, composition-first governance for any design system project. Auto-detects the project's token naming conventions, grid system, animation keyframes, and shared component library before applying rules. Use when building UI components, composite layouts, pages, design tokens, or Storybook stories — or when the user mentions design tokens, hardcoded styles, component reuse, animations, i18n text, or design system governance.