harrychuang
- 35 skills
- 0 followers
- 10 hours ago last updated
- ▌ Design System To Storybook · harrychuang bundleBuild or update framework-native, token-backed Storybook foundations, shared UI components, and stories from an extracted design-system package. Use after design-system-extractor, or when Codex must adapt design-system Markdown, tokens, and traced Figma/image/code/route evidence to an existing or new React, Vue, Angular, Svelte, Web Components, meta-framework, monorepo, or other frontend target; select the correct app root, renderer, builder, file conventions, and optional tooling; infer component dependency order; sync component documentation; plan batches; or bootstrap Storybook without silently imposing React/Vite or migrating the product framework. Also use when updating, version-checking, or explaining this skill's bundled tools: the Figma export addon and the Storybook Code To Design Figma importer.
- ▌ UI Compare To Reference · harrychuang bundleCompare an implemented UI against a reference and apply the visual fixes. The reference can be a Figma file or frame, a design export or screenshot, or another platform's source code — a web implementation used as the truth for an app, or an app implementation used as the truth for web. Use when an app or web UI does not match its design, when porting a screen between web and React Native / Flutter / iOS / Android, or when auditing and repairing layout and token drift. Enforces token-first and component-first repair, and refuses to "fix" legitimate platform adaptations.
- ▌ Figma M3 Variables · harrychuang bundleCreate, 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 Design Workspace · harrychuang bundleBootstrap 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.
- ▌ Design System Extractor · harrychuang bundleExtract a reusable design-system specification from UI screenshots/images, graphic/brand/editorial references, Figma URLs or exports, Figma Variables, existing web or native iOS/Android app project folders, SwiftUI/UIKit/Jetpack Compose/Android Views code, runnable rendered UI captures, simulator/emulator/device captures, AI-generated or vibe-coded prototype projects, or prototype code, and review or integrate parallel design-system extraction branches. Use when Codex must produce evidence-backed design principles, design elements, token architecture, component inventory, component token specs including typographic/text-lockup components, anti-AI style constraints, collaborative branch review records, static HTML documentation for developers, cross-agent handoff guidance for Claude Code/Cursor/Codex, and a checkpoint before any product implementation.
- ▌ Design System Governance · harrychuang bundleEnforces 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.
- ▌ Prototype Storybook Flow · harrychuang bundleCreate 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.
- ▌
- ▌
- ▌ Storybook Product Prototype · harrychuang bundleCreate PRD-led Storybook product prototypes and frontend implementation handoff docs for web or app development, with deterministic fixtures, typed UI Flow route and transition metadata, API/data contracts, interactive prototype stories, template-compatible Static Flow export stories, and an optional Prototype Inspector runtime for Story/Docs/UI Flow/Data review. Use after design-system-to-storybook or independently when turning a product idea into PRD, UI Flow, Data Spec, Production Handoff, Acceptance Criteria, and a clickable Storybook prototype; when scaffolding a prototype folder; when preparing engineer or AI collaboration from design to frontend implementation; when documenting API/data contracts without real data wiring; when aligning UI Flow with the design-system-to-storybook storybook-template contract; when installing a Storybook UI Flow viewer; or when validating prototype and handoff docs across React Storybook projects.
- ▌
- ▌ Spectra Audit · harrychuangAudit changed code for security sharp edges — dangerous defaults, type confusion, and silent failures
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Frontend Product Implementation · harrychuang bundleImplement framework-agnostic frontend products and production features from PRD, UI Flow, UI Spec, Data Spec, Acceptance, Implementation Guide, and PRODUCTION_HANDOFF docs. Use when building a web or app frontend from 0 to 1, adding a route, screen, interface, or feature to an existing product, translating Storybook prototype handoff docs into production code, creating typed route/component/data-adapter work, or continuing after storybook-product-prototype. Resolve the target root and runtime architecture before greenfield scaffolding, inherit a clear existing stack without re-asking, ask when targets conflict or a migration is implied, and follow framework-native conventions rather than assuming React. Always follow design-system-governance: discover tokens, grid, motion, i18n, and shared components first; reuse existing components; stop for approval before creating missing tokens or shared components. When the target has no token system and the user approves establishing one, follow the token-bootstrap refe
- ▌ Design System Extractor 2 · harrychuang bundleExtract 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.
- ▌ Design System To Storybook 2 · harrychuang bundleBuild 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.
- ▌ Storybook Product Prototype 2 · harrychuang bundleCreate 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.
- ▌ UI Visual Parity · harrychuangCompare the implementation against screenshots or a configured Figma design and fix drift using token-first ownership.
- ▌ Figma M3 Variables 2 · harrychuangCreate, audit, and bind Figma variables before code implementation in Figma-first workspaces.
- ▌ Design System Governance 2 · harrychuangApply token-first and Storybook-first design-system rules before implementing app screens.
- ▌ UI Screenshot To Storybook Product · harrychuangTurn screenshots or Figma exports into token-backed Storybook components and composed product screens.
- ▌ UI Screenshot To Storybook Product 2 · harrychuangTurn screenshots or Figma exports into token-backed Storybook components and composed product screens.