Manages shadcn/ui components, presets, and registries through the official CLI.
npx skills add https://github.com/zzafergok/tulpar --skill shadcn-zzafergok
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/zzafergok/tulpar/tree/main/.agent/skills/shadcn Command: npx skills add https://github.com/zzafergok/tulpar --skill shadcn-zzafergok
npx shadcn@latest info to generate correctly configured code. - Component Lifecycle Management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Preset & Theme Workflows: Initialize projects with named presets or codes, apply or switch presets with overwrite, partial, merge, or skip strategies. - Enforced Composition Rules: Critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap-* spacing), icons (data-icon), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Use Case: When asked to build a settings form in a Next.js project, the Skill checks installed components, fetches docs for the correct API, and generates code using FieldGroup, ToggleGroup, and data-invalid validation states matching the project's preset. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form, and it will inspect the project context and generate compliant code.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by component names, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run first to preview affected files and --diff to compare against existing local components.
Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes. Apply upstream updates per file while preserving local modifications, and never use --overwrite without explicit approval.
The base field in components.json determines the primitive library and component APIs. Radix uses asChild for composition while base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different prop signatures between the two.
Use npx shadcn@latest apply <code> to overwrite, apply <code> --only theme,font for partial updates, or init --preset <code> --force --no-reinstall to merge or skip component changes. Preset codes are opaque and must be passed directly to the CLI.
shadcn/ui rules require flex with gap-* instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent with dark mode.
Yes. Define custom variables in the global CSS file from tailwindCssFile, then register them with @theme inline blocks for Tailwind v4 or tailwind.config.js for v3. Never create a new CSS file for theme variables.
vercelGuide shadcn/ui component implementation and theming in Next.js and Vite projects.
JktfeGenerate TypeScript interfaces, Zod schemas, and API routes from FlowSpec YAML exports.
launchapp-devDesign scalable theming architecture with layered tokens for runtime theme switching.
mgd34msuProvides reusable, themeable, accessible React UI components for Chakra UI v3 projects.