Manages shadcn/ui components, presets, and registries through the official CLI.
npx skills add https://github.com/PunGrumpy/og-tester --skill shadcn-pungrumpy
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/PunGrumpy/og-tester/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/PunGrumpy/og-tester --skill shadcn-pungrumpy
npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes instead of raw divs and manual state. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: add a login form block to my project using the shadcn CLI.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by the component names, such as npx shadcn@latest add button card dialog. Use the package runner matching your project, like pnpm dlx or bunx, and check installed components first with npx shadcn@latest info.
Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates per file while preserving your modifications, and never use --overwrite without explicit approval.
The base field in components.json determines the primitive library, which changes component APIs. Radix uses asChild for composition while base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.
Pass the preset code directly to npx shadcn@latest apply <code> for existing projects or npx shadcn@latest init --preset <code> for new ones. Never decode preset codes manually; use preset decode, preset url, or preset resolve commands to inspect them.
Yes, you can add items from namespaced registries like @magicui or public GitHub repos using owner/repo/item addresses. After adding third-party components, verify the added files and fix hardcoded import paths to match your project's aliases.
The skill enforces gap-* utilities instead of space-x/space-y and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components consistent with the theme's CSS variables and ensures dark mode works without manual overrides.
dsgalkarGuides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.
Fabric-ProWrite end-to-end tests for user workflows using Playwright or Cypress.
GemachDAOProvide CSS variables, dark/light modes, and Tailwind integration for trading UI theming.
JNZader-VaultBuild React interfaces with Mantine components, forms, charts, and notifications.