skills.rest
abdulazeezoj
abdulazeezojCOMMUNITY
Explore all skills by this author →
Website𝕏@abdulazeezojGitHub

shadcn

Manages shadcn/ui components, presets, and registries through the official CLI.

Updated Sep 13, 2026
Search Tags:#react#design system#cli#registry#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/abdulazeezoj/monovella-poc --skill shadcn-abdulazeezoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/abdulazeezoj/monovella-poc/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/abdulazeezoj/monovella-poc --skill shadcn-abdulazeezoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with shadcn/ui requires knowing the correct component APIs, composition rules, and CLI workflows, and mistakes like wrong imports, missing accessibility titles, or raw color overrides are common. This Skill enforces the correct patterns and drives the shadcn CLI for adding, searching, updating, and theming components. ## Core Features & Use Cases - Component management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local edits. - Composition and styling rules: Enforces FieldGroup forms, group-based item nesting, semantic color tokens, data-icon usage, and base-vs-radix API differences. - Presets and theming: Initialize projects with named presets or preset codes, apply or merge preset switches, and customize CSS variables for Tailwind v3/v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill checks the project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, Field, ToggleGroup, and proper validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form following shadcn best practices in your project.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to my project?▼

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 to preview changes and --diff to compare against existing files before writing.

How do I update shadcn components without losing my local changes?▼

Run 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.

What is the difference between base and radix in shadcn/ui?▼

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 props between the two.

How do I switch shadcn presets in an existing project?▼

Use npx shadcn@latest apply <code> to overwrite components, or init --preset <code> --force --no-reinstall to update only config and CSS. For merging, run init with --no-reinstall then smart-merge each installed component individually.

Why should I avoid space-y and raw color classes in shadcn/ui?▼

shadcn/ui conventions require flex with gap-* for spacing and semantic tokens like bg-primary or text-muted-foreground for colors. Raw values like bg-blue-500 and manual dark: overrides break theming because components derive styles from CSS variables.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
BambibannersBambibanners
1

Frontend Functional Validator (Detective)

Automate frontend UI exploration to detect missing backend endpoints and generate failure reports.

Community
Intermediate
ratnesh-mauryaratnesh-maurya
1

ui-visual-validator

Validates UI modifications through systematic visual analysis and accessibility compliance checks.

Community
Intermediate
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

Integrates and customizes shadcn/ui components in React applications with Tailwind CSS.

Community
Intermediate