ui-screenshot-to-storybook-product

Étoiles15

Forks2

Mis à jour11 mai 2026 à 14:53

Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

harrychuang

harrychuang/cursor-skills

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·SOC 15-1254

SKILL.md

readonly

name	ui-screenshot-to-storybook-product
description	Turn screenshots or Figma exports into token-backed Storybook components and composed product screens.

This wrapper exists so Claude Code can discover the shared workflow natively.

Read and follow:

skills/ui-screenshot-to-storybook-product/SKILL.md
skills/design-system-governance/SKILL.md

Plus depuis ce dépôt

même dépôt

figma-m3-variables

harrychuang/cursor-skills

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 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.

2026-06-2215

prototype-storybook-flow

harrychuang/cursor-skills

Create 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.

2026-06-2215

design-system-to-storybook

harrychuang/cursor-skills

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, structure stories and DOM for reliable Figma export, and verify implementation with the bundled Figma export addon without bypassing tokens.

2026-06-2215

prototype-storybook-flow

harrychuang/cursor-skills

Create or update PRD-led Storybook product prototypes under src/pages/prototypes with docs, typed route and transition metadata, deterministic fixtures, UI Flow review data, and prototype Storybook stories. Use when building a new product prototype, turning a product idea into PRD plus UI Flow, standardizing prototype docs, or updating an existing prototype flow.

2026-06-2015

storybook-product-prototype

harrychuang/cursor-skills

Create 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.

2026-06-1715

storybook-product-prototype

harrychuang/cursor-skills

2026-06-1715