design-system-aware
Design System Aware Code Generation
Trigger condition: This skill activates when ANY .tsx or .jsx file inside src/ or app/ is being created or modified, AND .claude/design-tokens/design-tokens.json exists.
When writing or editing React/Next.js frontend code in this project, follow these rules:
Before Writing Code
- Check if
.claude/design-tokens/design-tokens.jsonexists. - If it exists, read it and use it as the source of truth for all design decisions.
- Check the
componentssection before creating any new component — reuse what exists.
Token Usage
- All colors, spacing, font sizes, shadows, and border radii must come from
.claude/design-tokens/design-tokens.json. - Never hardcode design values. No raw hex colors, no magic number padding or margins.
- Use the project's styling approach as specified in
styling_approach.
Preferred Library Conventions
More from codestate-cs/figma-to-design
figma-to-design-init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, detects API call patterns, and generates design token files under .claude/design-tokens/. Run this once per project before using /figma-to-design-build.
16figma-to-design-build
Build production-ready Next.js/React code from a Figma design. Pulls design context and screenshots from Figma, generates code using your project's tokens and conventions, then visually verifies and iterates using Playwright screenshots until the result matches the design. Requires /figma-to-design-init to have been run first.
16figma-to-design-audit
Audit your codebase for design token drift. Finds hardcoded colors, spacing, and font values that should use design tokens. Reports unused tokens and components not following the design system. Run periodically to keep your codebase consistent.
13init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, and generates a design-tokens.json file. Run this once per project before using /figma-to-design-build.
1build
Build production-ready Next.js/React code from a Figma design. Pulls design context and screenshots from Figma, generates code using your project's tokens and conventions, then visually verifies and iterates using Playwright screenshots until the result matches the design. Requires /figma-to-design-init to have been run first.
1