d2c-guard
Design System Aware Code Generation
Trigger condition: This skill activates when ANY component file inside src/ or app/ is being created or modified, AND .claude/d2c/design-tokens.json exists.
Component file extensions by framework (read framework from design-tokens.json):
- react / solid:
.tsx,.jsx - vue:
.vue - svelte:
.svelte - angular:
.component.ts - astro:
.astro - If
frameworkfield is missing, default to.tsx/.jsx(React).
Non-negotiables
These rules hold across every phase of this skill. No exceptions.
More from d2c-ai/d2c
d2c-init
Scan your codebase to extract design tokens, detect framework, discover components, and configure preferred libraries. Run once per project before /d2c-build. Use when setting up d2c, initializing design system, or scanning codebase.
13d2c-build
Build production-ready frontend code from a Figma design. Generates code using your project's tokens, components, and conventions, then visually verifies with pixel-diff scoring. Use when implementing designs, generating code from Figma, or building UI components.
13d2c-audit
Audit codebase for design token drift, unused tokens, component reuse violations, library pattern violations, and accessibility issues. Use when checking code quality, running design system audits, or finding hardcoded values.
12d2c-build-flow
Build a connected multi-page Figma flow (onboarding, checkout, KYC, etc.) into production-ready frontend code: per-page components, a shared layout, routing, optional shared state, and a navigation smoke test. Takes a natural-language prompt listing ordered steps (each step = one Figma frame URL, optional per-step route). Use when implementing flows that span 2+ screens, when the user mentions 'flow', 'multi-page', 'onboarding', 'checkout', or lists steps.
5design-system-aware
Enforces design tokens, component reuse, SOLID/DRY principles, and preferred library conventions when editing frontend code. Activates on component file edits when .claude/design-tokens/design-tokens.json exists.
5