skills.rest
whyte25
whyte25COMMUNITY
Explore all skills by this author →
Website𝕏@fasifeoluwaGitHub

shadcn

Guide shadcn/ui component installation and composition using the CLI workflow.

12|Updated Dec 25, 2024
Search Tags:#accessibility#tailwind#react components#shadcn#ui composition#cli workflows#base vs radix
One-click install
npx skills add https://github.com/whyte25/reusables --skill shadcn-whyte25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/whyte25/reusables/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/whyte25/reusables --skill shadcn-whyte25

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents inconsistent or broken shadcn/ui implementations by guiding how to search, add, and compose components while enforcing the project’s styling, composition, and accessibility rules.

Core Features & Use Cases

  • Project-aware shadcn CLI context: Uses injected project fields (base/radix, Tailwind version, aliases, icon library, resolved paths) to give accurate guidance for the user’s setup.
  • Command-first component workflow: Helps you initialize presets and install/search components using the shadcn CLI (including safe dry-run/diff workflows) rather than guessing.
  • Correct-by-construction composition rules: Enforces critical UI rules like semantic colors, gap-based spacing, proper form composition (FieldGroup/Field), accessible overlay titles, correct icon usage with data-icon, and base-vs-radix API differences.
  • What to do when updating components: Provides a smart merge process that uses dry-run/diff to preserve local changes and avoids unsafe overwrites without approval.

Quick Start

Tell the assistant: add the dialog, button, and form components to my project and follow the shadcn rules while first running a dry-run diff for each file that would change.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I safely update shadcn UI components without losing local changes?▼

To safely update shadcn UI components without losing local changes, use the CLI dry-run and diff commands to inspect file modifications first. This smart merge process prevents unsafe overwrites by requiring approval before applying updates.

What is the correct way to add shadcn components to an existing React project?▼

The correct way to add shadcn components is by using project runner commands like npx, pnpm, or bunx to initialize presets and install via the shadcn CLI. This enforces semantic tokens and composition constraints without manually fetching GitHub files.

How do I fix invalid imports and composition patterns in shadcn UI?▼

Fix invalid imports and composition patterns in shadcn UI by enforcing correct-by-construction rules like semantic colors, gap-based spacing, proper FieldGroup/Field form composition, accessible overlay titles, and base-vs-radix API differences.

Does the shadcn CLI workflow support both base and radix component variants?▼

Yes, the shadcn CLI workflow supports both base and radix component variants. It uses project-aware context to enforce correct base-vs-radix API differences and composition constraints tailored to your specific setup.

Why should I use the shadcn CLI instead of manually copying component files from GitHub?▼

Use the shadcn CLI instead of manually copying files to prevent inconsistent or broken implementations. The CLI enforces your project's styling, composition, and accessibility rules while providing safe dry-run workflows for inspection.

Related Skills

Explore More Software Engineering Skills→
remedaremeda
5.4k

shadcn

Run shadcn CLI commands to add, update, and audit shadcn/ui components.

Official
Advanced
malkuthromalkuthro
7

docs-sync

Replace version tags or node IDs across documentation, code, and manifest files.

Community
Basic
sandalsoftsandalsoft

clean-web-design

Standardize React/Tailwind frontend design with token-based dark-mode-ready UI primitives.

Community
Advanced
alexzhang1030alexzhang1030

shadcn

Manage shadcn/ui components and project workflows via CLI-driven registry resolution.

Community
Advanced