skills.rest
tnunamak
tnunamakCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Generate shadcn/ui React components with enforced composition, styling, and accessibility rules.

Updated Mar 22, 2018
Search Tags:#accessibility#shadcn ui#react components#form validation#component composition#tailwind styling#shadcn cli
One-click install
npx skills add https://github.com/tnunamak/dotfiles --skill shadcn-tnunamak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/tnunamak/dotfiles/tree/main/ai/skills/local/shadcn
Command: npx skills add https://github.com/tnunamak/dotfiles --skill shadcn-tnunamak

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

shadcn helps you consistently build shadcn/ui components correctly by enforcing spacing, composition, form patterns, semantic styling, and icon usage so you avoid subtle UI and accessibility mistakes.

Core Features & Use Cases

  • Component composition rules: Ensures correct component structure for Cards, Tabs, Dialog/Sheet/Drawer titles, overlays, avatars, and separators.
  • Form and validation patterns: Uses FieldGroup + Field, InputGroupInput/InputGroupTextarea, ToggleGroup for option sets, and data-invalid/aria-invalid for validation states.
  • Styling and theming guardrails: Applies semantic color tokens, gap-* spacing, size-* sizing, truncate shorthand, cn() usage, and avoids manual dark overrides and z-index hacks.
  • shadcn CLI workflow guidance: Advises on how to run shadcn CLI commands (info/search/docs/add/init), and when to refresh project context and fetch component docs before coding.

Quick Start

Provide your Next.js or other framework project context and ask the AI to create a shadcn/ui settings form using FieldGroup + Field with validated inputs and a ToggleGroup-based notification preference UI.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I ensure correct component composition for shadcn ui Cards and Dialogs?▼

To ensure correct shadcn ui component composition, enforce proper structural hierarchies for Cards, Tabs, Dialog/Sheet/Drawer titles, overlays, avatars, and separators, preventing subtle UI and accessibility mistakes.

What is the best way to build form validation patterns with shadcn ui?▼

The best way to build form validation patterns with shadcn ui is using FieldGroup + Field, InputGroupInput/InputGroupTextarea, ToggleGroup, and data-invalid/aria-invalid attributes for accessible validation states.

How do I apply Tailwind styling tokens correctly in shadcn ui components?▼

Apply Tailwind styling in shadcn ui by using semantic color tokens, gap-* spacing, size-* sizing, truncate shorthand, and cn() usage, while avoiding manual dark overrides and z-index hacks.

Can I use shadcn cli to install components and fetch docs before coding?▼

Yes, you can use the shadcn cli to run info/search/docs/add/init commands, fetch component docs, and refresh project context discovered via components.json before you start coding.

Does shadcn ui require Next.js to build a settings form with validated inputs?▼

shadcn ui does not strictly require Next.js; you can provide your Next.js or other framework project context to build forms using FieldGroup + Field with ToggleGroup-based notification preferences.

Related Skills

Explore More Software Engineering Skills→
dallaydallay
1

shadcn-vue

Manage shadcn-vue components and projects via CLI commands.

Official
Intermediate
dinogitdinogit
1

react-hook-form

Build validated React forms with React Hook Form and Zod.

Community
Intermediate
BerryKuipersBerryKuipers
7

semantic-theming

Enforce semantic theming in Tailwind projects by preventing raw color literals.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate