figma-to-componentlisted

# figma-to-component Convert a Figma frame/node into **Next.js + Tailwind + shadcn/ui** components that look production-grade *and* fit the project's existing structure — the headline being **no duplicate components**. The hard part isn't generating JSX from a design; current models do that well. The hard part is doing it *without* creating the third `Header`, the second `Avatar`, the duplicate `Card` — so this skill is built around a **dedup-first protocol**: read the registry, search the tree, reuse/extend what's there, and only then create, placing each new piece in its one correct home. This is the **component builder** of the frontend toolkit. It assumes the project is already scaffolded (`nextjs-bootstrap`) and ideally themed (`font-theme-setup`), so it can lean on shadcn primitives, the shared component library, and the oklch theme tokens instead of hardcoding. It does **not** set up the theme and does **not** scaffold. ## The core problem this skill solves Designs repeat. A Figma file has the same header on five frames, the same avatar in three places, cards everywhere. A naive frame→code pass re-emits all of them inline, and you drown in duplicates. The fix is to treat the project's `MODULE_REGISTRY.md` as a dedup ledger and the shared/feature trees as the source of truth: **before writing any component, check whether it already exists; if it does, import it; if a close cousin exists, extend/compose it; only genuinely new things get created** — and reusable ones