skills.rest
Ahmed-Eldalatony
Ahmed-EldalatonyCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

Updated Mar 22, 2026
Search Tags:#frontend#react#design system#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill shadcn-ahmed-eldalatony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Ahmed-Eldalatony/airbnb-clone-bench/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Ahmed-Eldalatony/airbnb-clone-bench --skill shadcn-ahmed-eldalatony

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent UI with shadcn/ui requires knowing the correct component APIs, composition patterns, and CLI workflows; this Skill provides project-aware context, enforced styling rules, and CLI guidance so generated code matches the project's configuration instead of guessing. ## Core Features & Use Cases - Component lifecycle management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local modifications. - Project-aware guidance: Reads framework, aliases, Tailwind version, icon library, and base (radix vs base) from the project to generate correct imports, directives, and component APIs. - Enforced UI rules: Applies Incorrect/Correct patterns for forms, composition, icons, and styling, such as FieldGroup layouts, semantic color tokens, and data-icon attributes. - Use Case: When asked to build a settings form in a Next.js app, the Skill checks installed components, fetches component docs, and produces code using FieldGroup, ToggleGroup, and proper validation states matching the project's preset. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: add a dialog and card to my project and compose a profile editing form following shadcn best practices.

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, using your project's package runner such as pnpm dlx or bunx. Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.

How do I update shadcn components without losing my customizations?▼

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 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, which changes component APIs. Radix uses asChild and type props, while base uses render, multiple booleans, and array defaultValues; check the base field from npx shadcn@latest info before writing component code.

Does shadcn/ui work with frameworks other than Next.js?▼

Yes, the CLI supports templates for Vite, TanStack Start, React Router, Astro, and Laravel, with monorepo scaffolding available for most. The framework is auto-detected and reported by npx shadcn@latest info.

Why should I avoid space-y and raw colors in shadcn/ui code?▼

shadcn/ui conventions require gap-* utilities instead of space-x or space-y, and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent across light and dark modes.

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

Run npx shadcn@latest init --preset <code> --force, then choose reinstall to overwrite components, merge to smart-merge each installed component, or skip to update only config and CSS. Preset codes are opaque strings passed directly to the CLI without manual decoding.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
trungenglishtrungenglish
1

expo-ui

Build native iOS and Android UI in React using @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
MacPhobosMacPhobos

shadcn/ui - Component Library

Copy reusable React components into projects with Tailwind CSS and Radix UI.

Community
Intermediate