skills.rest
d0whc3r
d0whc3rCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Guide shadcn/ui component implementation and maintenance in React projects.

2|Updated Feb 16, 2026
Search Tags:#accessibility#shadcn/ui#ui composition#component installation#theming presets#tailwind rules
One-click install
npx skills add https://github.com/d0whc3r/statsig-browser-extension --skill shadcn-d0whc3r
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/d0whc3r/statsig-browser-extension/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/d0whc3r/statsig-browser-extension --skill shadcn-d0whc3r

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you reliably manage shadcn/ui components by guiding correct composition, styling, and CLI-driven workflows so you stop guessing APIs and fighting inconsistent UI patterns.

Core Features & Use Cases

  • Component lifecycle with guardrails: add, update, search, and document components using the shadcn CLI while preserving correct project context from components.json.
  • Quality rules for correct UI implementation: enforces layout, form structure, composition, icon usage, semantic colors, and accessibility patterns (e.g., FieldGroup/Field, ToggleGroup, DialogTitle, AvatarFallback).
  • Preset and theming alignment: supports switching between presets and customizing themes via semantic CSS variables without breaking Tailwind v3/v4 expectations.

Quick Start

Use the shadcn skill to ensure your component follows shadcn/ui composition and styling rules in your current project context by running the command npx shadcn@latest docs button dialog select.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I install and add shadcn/ui components to a React project safely?▼

To install shadcn/ui components safely, use the package-runner CLI workflow to add or update components with safe diffs while resolving the correct project context from components.json.

How do I enforce accessibility and composition rules when building shadcn/ui layouts?▼

Enforcing accessibility and composition rules requires applying explicit constraints on Tailwind spacing, semantic tokens, icon usage, and form structure like FieldGroup, DialogTitle, and AvatarFallback patterns.

Can I switch theming presets and semantic CSS variables without breaking Tailwind?▼

You can switch theming presets and customize themes via semantic CSS variables without breaking Tailwind v3 or v4 expectations by following shadcn/ui preset alignment conventions.

What's the best way to resolve inconsistent UI patterns and fix shadcn/ui component styling?▼

The best way to fix inconsistent shadcn/ui styling is to guide component implementation by enforcing quality rules for layout, semantic colors, and accessibility patterns using the CLI workflow.

Why does my shadcn/ui component composition fail Tailwind rules and accessibility checks?▼

Your shadcn/ui component composition fails Tailwind rules and accessibility checks when it violates explicit rule constraints on spacing, semantic tokens, icon usage, and structural components like Field and ToggleGroup.

Related Skills

Explore More Software Engineering Skills→
STK106STK106

shadcn

Manage shadcn/ui components and presets via the shadcn CLI.

Community
Intermediate
anicdhanicdh

frontend-ui

Apply Tailwind and Shadcn/ui patterns with accessibility rules to React components.

Community
Advanced
GitCoder052023GitCoder052023
1

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui for React projects using CSS-first theming.

Community
Advanced
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced