skills.rest
stellarone
stellaroneOFFICIAL
Explore all skills by this author →
GitHub

shadcn

Enforce shadcn/ui composition rules, semantic styling tokens, and CLI workflows.

Updated Aug 23, 2026
Search Tags:#accessibility#ui components#shadcn#component composition#tailwind styling#cli workflows
One-click install
npx skills add https://github.com/stellarone/evaluate --skill shadcn-stellarone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/stellarone/evaluate/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/stellarone/evaluate --skill shadcn-stellarone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent or incorrect shadcn/ui usage by enforcing the project’s required composition patterns, spacing rules, semantic styling tokens, and CLI workflows so your UI matches the design system.

Core Features & Use Cases

  • Guides correct shadcn/ui composition: enforces required structural patterns like full Card composition, proper overlay titles, and correct Group/Item nesting.
  • Maintains styling consistency: prioritizes semantic color tokens, disallows raw status colors, bans dark: manual overrides, and enforces gap-* spacing plus safe Tailwind conventions.
  • Accelerates component workflows: focuses on using the shadcn CLI for info/search/docs, adding components via the correct package runner, and updating components safely using smart merge/diff.
  • Covers base vs radix behavior: documents API differences that affect component props and composition (e.g., asChild vs render, ToggleGroup, Select, Slider, Accordion).

Quick Start

Ask the AI: create or fix a shadcn/ui settings form using FieldGroup and Field with validation states, ToggleGroup/Switch where appropriate, and only semantic colors and gap-* spacing.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I build a shadcn/ui form with validation states and correct spacing?▼

To build a shadcn/ui form correctly, use the FieldGroup and Field composition patterns with validation states, Switch or ToggleGroup where appropriate, and apply only semantic color classes with gap-* spacing for structural consistency.

Why does my shadcn/ui component styling break when I use manual dark mode overrides?▼

Manual dark: overrides break shadcn/ui styling consistency because the design system requires semantic color tokens. You must use semantic styling tokens instead of raw status colors or manual dark mode overrides to maintain UI integrity.

What is the correct way to add and update shadcn/ui components using the CLI?▼

The correct way to add and update shadcn/ui components is by using the shadcn CLI runner commands for initialization and component addition, and applying smart merge/diff workflows for safe updates without overwriting customizations.

Can I use radix component props directly in shadcn/ui?▼

You must comply with base vs radix API differences when working with shadcn/ui. Documented behavior differences affect component props and composition, such as using asChild vs render, ToggleGroup, Select, Slider, and Accordion APIs.

What are the required composition rules for shadcn/ui Cards and dialogs?▼

shadcn/ui requires full Card composition, proper overlay titles, and correct Group/Item nesting to ensure structural integrity. Enforcing these composition patterns prevents inconsistent UI and ensures components match the design system.

Related Skills

Explore More Software Engineering Skills→
xyqyearxyqyear

shadcn-docs

Provide development guidelines and best practices for shadcn/ui components.

Community
Intermediate
irchamajiirchamaji

shadcn

Guide shadcn/ui component creation and maintenance with project-aware styling rules.

Community
Advanced
iterateiterate
198

shadcn

Generate and fix shadcn/ui components via CLI registry operations and styling rules.

Official
Advanced
Ricka7xRicka7x

shadcn-radix-to-base-ui-migration

Migrate React UI components from Radix UI to Base UI.

Community
Intermediate