shadcn/ui Skill
The official shadcn/ui component-library skill for Claude.
Designstandard
by AgentVoltv1.0.0Published 1y ago2 installs
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Build a modal component with shadcn/ui”
Beforegeneric AI agent
I can help you create a modal. There are a few approaches you might consider - you could use React's built-in context for state management, or look into libraries that handle modals. You'll need to think about accessibility features like focus trapping and keyboard handling. It might be helpful to also consider your styling preferences. Would you like me to explain some options, or do you have a specific design system in mind? There are several ways to approach this depending on your project structure.
Afterwith shadcn/ui Skill
SHADCN/UI MODAL COMPONENT Structure: Use Sheet or Dialog component from shadcn/ui base - Dialog preferred for centered overlays, Sheet for slide-outs. Build steps: 1. Import Dialog component and DialogContent/DialogHeader/DialogFooter subcomponents 2. Create a state hook for open/closed 3. Add Dialog trigger and content wrappers 4. Implement scrim (Backdrop) - automatically managed by Dialog 5. Add keyboard escape handler and outside click dismissal via dialog library Accessibility built-in: • Focus trap on open • Escape key closes automatically • ARIA roles on all interactive elements • Keyboard navigation through form fields Customization patterns: • Override via className prop for width/sizing • Use DialogHeader for title and close button • Chain with Button and Input components from same library • Apply your brand colors through shadcn/ui CSS variables Example: Sheet component wraps content; onOpenChange handler manages state; className="w-96 rounded-lg" sets width and border radius.
About this skill
name: shadcn-ui-skill description: Use when The official shadcn/ui component-library skill for Claude.
shadcn/ui Skill
Official skill from the shadcn/ui team that teaches Claude the shadcn/ui component conventions and patterns directly.
What you get
- Claude guidance for building UI with shadcn/ui components and conventions.
Customize your output
- N/A
Example output
N/A
Best for
Developers building React UIs with shadcn/ui.
SKILL.md preview
SKILL.md
---
name: shadcn-ui-skill
description: Use this skill when building or reviewing a UI with shadcn/ui components and the conventions need to match how the library is actually meant to be used.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
- design
- standard
---
# shadcn/ui Skill
Teaches shadcn/ui's actual component conventions: copy-in ownership of components, composition over configuration, and Tailwind-based theming, so generated UI matches how the library is meant to be extended.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →UI UX Pro Max
A Claude skill that adds design intelligence for multi-platform UI/UX builds.
Design
UI Polish Slash Commands
Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.
Design
Motion Polish Pass
Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass.
Design
Claude Design Wireframe To High-Fi Handoff
Prompt Claude Design for three wireframe variations, refine one to high-fidelity, then hand off to Claude Code with the /handoff command to keep iterating locally.
Design