harrychuang
8 verified skills73 total stars
design-system-extractor
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.
development11
design-system-to-storybook
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.
development11
figma-m3-variables
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 nodes, 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, three-tier token.
development10
ui-screenshot-to-storybook-product
Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.
tools9
create-design-workspace
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.
development9
ui-screenshot-to-storybook-product
Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.
tools9
design-system-governance
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.
development7
ui-visual-parity
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.
development7