skills.rest
Axeloooo
AxelooooCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Guide shadcn/ui component installation and composition using CLI commands.

Updated Oct 16, 2025
Search Tags:#accessibility#tailwind#ui components#shadcn#form validation#smart merge#component installation
One-click install
npx skills add https://github.com/Axeloooo/TheDataBay --skill shadcn-axeloooo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Axeloooo/TheDataBay/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Axeloooo/TheDataBay --skill shadcn-axeloooo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you correctly add, debug, style, and compose shadcn/ui components without breaking project-specific rules for spacing, semantics, accessibility, and preset conventions.

Core Features & Use Cases

  • Component installation workflow: Guides you to use the shadcn CLI (with the correct package runner) to add, search, view, and document components rather than guessing.
  • Project-context safe usage: Enforces usage patterns tied to your injected project context (aliases, base vs radix, iconLibrary, Tailwind version, and other configuration fields).
  • Rule-compliant UI composition: Ensures generated UI follows critical shadcn/ui constraints such as FieldGroup/Field form layout, gap-* spacing, semantic tokens (no raw colors), and required accessibility pieces like Dialog/Sheet/Drawer titles.
  • Debugging and smart merging: Provides an approach for updating components using dry-run/diff and per-file smart merge so local customizations are preserved.

Quick Start

Tell the AI: Add the needed shadcn/ui components for a profile settings page that includes validated inputs and a dialog-based editor, and follow the project's shadcn rules and preset conventions.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I install shadcn/ui components without overwriting my customized code?▼

To install shadcn/ui components safely, use the shadcn CLI to perform a dry-run diff and apply a per-file smart merge, preserving local customizations while pulling component updates.

What's the best way to compose shadcn/ui dialogs and sheets with proper accessibility?▼

Composing accessible shadcn/ui dialogs and sheets requires including mandatory title elements and adhering to semantic styling rules, ensuring base-versus-radix behavioral differences are respected.

Why does my shadcn/ui form validation layout break project spacing conventions?▼

shadcn/ui form layouts break when violating project rules like FieldGroup/Field structures and gap-* spacing; enforcing semantic tokens instead of raw colors resolves these mismatches.

Can I use shadcn/ui components with an existing Tailwind configuration and custom aliases?▼

Yes, shadcn/ui components work with existing Tailwind configurations by injecting project context like aliases, iconLibrary, and Tailwind version to ensure rule-compliant UI composition.

How do I find the correct shadcn/ui component from the registry for a specific UI layout?▼

Find correct shadcn/ui components by using the shadcn CLI search and docs view commands to discover registry entries, rather than guessing component names and behaviors.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
JosephAnsonJosephAnson
1

shadcn-vue

Enforce Shadcn Vue component patterns with vee-validate and Zod forms.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
AbdullahmohammadarefAbdullahmohammadaref

react-components

Build and audit React UI components using Atomic Design and Radix primitives.

Community
Intermediate