Skill Claude CodeCodex
Assist design system version migration — token mapping, component swapping, variable renaming. Use when: migrate/upgrade/update + design system/tokens/components/version, or when transitioning between design system versions.
Skill Claude CodeCodex
Multi-brand token management — set up brand themes, switch between brands, verify cross-brand consistency. Use when: multi-brand/theme/white-label + tokens/variables/design system, or when managing multiple brand variants in one Figma file.
Skill Claude CodeCodex
Multi-screen flow architecture — wrapper hierarchy, stage containers, step pills, build order. Use when: multi-screen/flow/onboarding/checkout + design/create/build, or when creating 3+ screens in a single task.
Skill Claude CodeCodex
Android platform design rules — screen dimensions, Material Design 3, Roboto typography, navigation patterns. Use when: Android/Material + design/screen/app, or when creating Android-specific Figma designs.
Skill Claude CodeCodex
Platform-specific design rules for iOS apps in Figma. Covers screen dimensions, safe areas, system UI, typography, navigation patterns, and HIG conventions. Extends ui-ux-fundamentals with iOS-specific constraints.
Skill Claude CodeCodex
Analyze prototype interactions and generate flow documentation. Use when: analyze/inspect/review + prototype/flow/interactions/navigation, or when checking for dead ends, missing navigation, or generating flow diagrams.
Skill Claude CodeCodex
Responsive web design rules — breakpoints, auto-layout strategy, sizing patterns. Use when: responsive/breakpoint/mobile/tablet/desktop + design/layout/screen, or when creating multi-breakpoint web designs.
Skill Claude CodeCodex
Compare DTCG design token spec against Figma Library variables. Use when: compare/diff/check + tokens/spec/DTCG + Figma/variables/library, or when auditing token drift between code and Figma.
Skill Claude CodeCodex
Bulk replace text content in Figma designs — localization, data filling, content updates. Use when: replace/update/translate/localize + text/content/copy, or when filling designs with real data.
Skill Claude CodeCodex
Sync DTCG design tokens to Figma variables and styles. Use when: sync/push/import + tokens/DTCG + Figma, or when updating Figma variables from a token spec file.
Skill Claude CodeCodex
Universal design quality rules: color, typography, spacing, content, iconography, elevation, composition, accessibility. Always applies regardless of library mode.
Skill Claude CodeCodex
UX writing rules — universal best practices + language-specific rules (Chinese, English). Use when: creating UI text, writing button labels, form copy, error messages, empty states. Load after language is confirmed in designPreflight.