skills.rest
jean-sotil
jean-sotilCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Align shadcn/ui components with CLI configuration, theming tokens, and composition rules.

Updated Apr 29, 2026
Search Tags:#shadcn/ui#icons#form validation#ui composition#tailwind styling#preset management#radix vs base
One-click install
npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill shadcn-jean-sotil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/jean-sotil/presskitpro-webapp/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill shadcn-jean-sotil

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents inconsistent UI implementation by guiding you to use shadcn/ui components correctly, with the right layout, theming, composition, and validation patterns.

Core Features & Use Cases

  • Manage shadcn/ui workflow: discover components, fetch docs/examples, add components, update safely, and switch presets without breaking local changes.
  • Enforce UI correctness rules: apply styling and layout constraints (semantic colors, gap-* spacing, no raw dark overrides, correct truncation, cn() usage).
  • Guarantee component composition & accessibility: ensure required structural pieces (e.g., Dialog/Sheet/Drawer titles, AvatarFallback, proper Group/Item nesting) and correct base vs radix API usage.
  • Accelerate form and icon correctness: build forms with FieldGroup/Field, use ToggleGroup for option sets, apply data-invalid/aria-invalid validation patterns, and place icons in buttons using data-icon.

Quick Start

Ask to install and implement a shadcn/ui component correctly by saying: Use the shadcn skill to add the button and dialog components, then generate a profile-edit dialog using the correct composition rules and accessible DialogTitle.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I build consistent shadcn/ui forms with correct field validation and accessibility?▼

To build consistent shadcn/ui forms, use FieldGroup and Field components, apply data-invalid and aria-invalid validation patterns, and ensure structural pieces like DialogTitle or AvatarFallback are present for accessibility.

What's the best way to manage shadcn/ui styling tokens and switch presets without breaking changes?▼

The best way to manage shadcn/ui styling tokens is to use the official CLI with project context, apply semantic colors and gap-* spacing, avoid raw dark overrides, and switch presets safely without breaking local configuration changes.

Does my Next.js project need specific composition rules to use shadcn/ui overlays correctly?▼

Yes, Next.js projects using shadcn/ui overlays require correct composition rules, such as proper Group and Item nesting, using the cn() utility, and following base vs radix API differences to ensure structural correctness.

How do I add icons to shadcn/ui buttons using the correct data attributes?▼

To add icons to shadcn/ui buttons correctly, place them using the data-icon attribute, ensuring proper layout constraints and semantic styling alignment within your project's configuration.

Why does my shadcn/ui CLI component update conflict with local styling changes?▼

shadcn/ui CLI component updates conflict with local styling when raw dark overrides or non-semantic colors are used instead of the project's theming tokens, gap-* spacing, and cn() utility for composition.

Can I use radix primitives directly instead of shadcn/ui base components in my UI composition?▼

You can use radix primitives, but shadcn/ui enforces correct base vs radix API usage and composition rules to align UI code with your project's CLI configuration, theming tokens, and accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
braswelljrbraswelljr
8

shadcn

Manage shadcn/ui components via CLI with styling and accessibility validation.

Community
Advanced
ri-ruri-ru

shadcn

Manage shadcn/ui component lifecycle and composition in Next.js or Vite projects.

Community
Advanced
fab679fab679
9

shadcn

Manage shadcn/ui component lifecycle with project-specific configuration enforcement.

Community
Advanced
alissonmds00alissonmds00

shadcn

Manage shadcn/ui component installation, configuration, and design system rules.

Community
Advanced