Skill Claude CodeCodex
Convert a selected shadcncraft Figma frame, component, or full page into production React + shadcn/ui code via the official Figma MCP. Use this whenever the user wants to turn a Figma design into code, implement a frame, "generate code from this design", "convert this Figma component", "build this screen from Figma"…
Skill Claude CodeCodex
Sync design tokens into a project's globals.css, mapped to shadcn token names for light and dark. Use this whenever the user wants to import, sync, or update their theme/design tokens/variables ("sync my Figma variables", "import variables from Figma", "update my theme from Figma", "pull my design tokens into…
Skill Codex
Break a React app built on shadcn/ui and the shadcncraft kit into an approved, unit-by-unit Figma import plan - repo scan, classification into Components, Blocks, screens, and shell material, token sync and code hygiene checks, and light/dark measurement targets. Use whenever someone wants to bring their app, product…
Skill Codex
Build one approved unit from a shadcncraft import plan into Figma - a custom Block as a component, a screen composed from Block instances as Large 1440 and Small 375 frames, or App Shell reconciliation and variant work. Use when someone wants to build or execute units from an import-plan.json produced by…
Skill Codex
Build one approved custom Component from a shadcncraft import plan into Figma - a primitive-level piece with its own states that does not exist in the kit, built as a fully bound component set from its React source and measured DOM. Use when someone wants to build a component-level unit from an import-plan.json…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: