figma-from-code
claudeRebuild a Figma design system from a running web app's codebase
11 skills · hooks
Core React component development patterns — modlet structure, component extraction, registry, reuse, and validation.
Plugin react from marketplace bitovi-ai-enablement in bitovi/ai-enablement-prompts. Commands read from the repo's manifest — 1 month ago.
component-registryTrack reusable UI components and unextracted patterns. Maintains a REGISTRY.md inventory of extracted components and patterns that need extraction. Use when auditing components, planning extractions, or checking what components exist.
component-reuseEnsure existing UI components are reused before creating new ones. Must run BEFORE any UI implementation. Audits the codebase for matching components and reports whether to REUSE, WRAP, or CREATE.
create-react-modletCreate React components, hooks, or utilities following the modlet pattern. Use when creating any component in packages/client/src/components/. Modlets are self-contained folders with index.ts, implementation, tests, stories (for visual), and optional types.
extract-ui-componentExtract reusable UI components from inline patterns. Covers component design, TypeScript props, Storybook stories, refactoring strategy, and best practices for creating shared UI primitives.
validate-implementationValidate an implementation for runtime errors, accessibility, and API compliance before committing. Use as a final quality gate after implementing a feature or component.
Rebuild a Figma design system from a running web app's codebase
11 skills · hooks
Baseline planning, spec, and codebase understanding skills. Works with any codebase, any stack.
9 skills
Playwright-based QA workflows — E2E testing, debugging, responsive verification, visual diffing, and pixel-perfect orchestration. Requires Playwright MCP.
8 skills
End-to-end feature implementation workflow: design, build, test, self-review via a code-reviewer agent, then prep a PR.
4 skills · 1 agent
Full Figma-to-React lifecycle — design analysis, component implementation, visual sync, and Code Connect mapping. Requires Figma MCP.
4 skills
Mock data and data model patterns for Zod-based React apps — sample data generation, data model management, and feature workflows.
3 skills
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.