shadcncraft

Component building guidelines for creating high-quality, accessible, and composable registry components. Triggers on tasks involving building a component, adding or building a block, new block, registry component. Use when working in src/registry/.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

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", "make this mockup real", or ship a shadcncraft kit element as React, even if they do not say "shadcncraft" or "shadcn" explicitly. Also use when a user pastes a figma.com link or node ID and asks for the React/JSX, or asks to scaffold a page/section/component that exists in their Figma file. Prefer this skill over generic design-to-code because it reuses the matching shadcncraft registry block, keeps output on the project's design tokens, and emits icons from the project's configured library.