skills.rest
BrunoAlpezdev
BrunoAlpezdevCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Install and update shadcn/ui components with project-specific CLI commands.

Updated Apr 11, 2026
Search Tags:#accessibility#shadcn/ui#form validation#CLI workflow#component installation#UI composition#tailwind semantic tokens
One-click install
npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill shadcn-brunoalpezdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/BrunoAlpezdev/lluvia-de-ideas/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill shadcn-brunoalpezdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent shadcn/ui component usage by enforcing the correct composition, styling conventions, and project-specific setup rules while adding and updating components.

Core Features & Use Cases

  • Add, search, and document shadcn/ui components: installs components via the shadcn CLI and retrieves official docs and examples for the right API.
  • Safe updates with smart merge: uses dry-run and diff workflows to preserve local changes when updating components upstream.
  • Composition and styling guardrails: enforces semantic tokens, gap-based spacing, correct form patterns (FieldGroup/Field), correct icon usage (data-icon), and accessibility requirements like required Dialog/Sheet/Drawer titles.

Quick Start

Tell the AI to add a component and follow the project’s shadcn conventions: "Add shadcn/ui button and then show the correct usage example for it."

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 without breaking existing styling conventions?▼

To update shadcn/ui components without losing local changes, the Skill uses dry-run and diff workflows to preserve your modifications. It executes update commands through the appropriate package runner and merges upstream changes safely when your components.json file is present.

What's the best way to enforce correct form validation and field composition in shadcn/ui?▼

The best way to enforce correct form composition is by applying deterministic UI rules for FieldGroup and Field patterns. The Skill mandates gap-based spacing, semantic colors, and correct icon usage with data-icon attributes to maintain accessibility and validation consistency.

Does this Skill work with my project's specific Tailwind version and icon library configuration?▼

Yes, the Skill adapts to your specific configuration by reading the components.json file to determine your Tailwind version, style, and icon library. It ensures all installed and updated components align with your project's preset and base configuration automatically.

Why does my shadcn/ui Dialog or Sheet component fail accessibility requirements?▼

Dialog, Sheet, and Drawer components fail accessibility checks when required titles are missing. The Skill enforces these accessibility requirements during installation and audits, ensuring semantic tokens and structural composition rules are met to prevent validation errors.

Can I switch shadcn/ui presets and audit existing components in my project?▼

Yes, you can switch shadcn/ui presets and audit existing components when a components.json file is present. The Skill fetches correct API documentation, applies the new preset configurations, and enforces deterministic styling rules across your component library.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
tabesinktabesink

shadcn

Enforce shadcn/ui component composition and styling via CLI workflows.

Community
Advanced
gluestackgluestack
1

gluestack-ui-v4:styling

Standardizes Gluentack UI v4 component styling with semantic tokens and TVA patterns.

Official
Basic
seokan-jeongseokan-jeong
8

team-shinchan:frontend

Automate frontend task delivery for UI components, styling, and accessibility in React, Vue, or HTML/CSS.

Community
Intermediate