# Shadcn Ui Designer > Design and build modern UI components and pages using shadcn/ui. Creates clean, accessible interfaces with Tailwind CSS following shadcn principles. Use when building UI components, pages, forms, dashboards, or any interface work. - **Type:** Skill - **Install:** `agentstack add skill-jsbtechnologies-claude-skills-shadcn-ui-designing` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [JSBtechnologies](https://agentstack.voostack.com/s/jsbtechnologies) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [JSBtechnologies](https://github.com/JSBtechnologies) - **Source:** https://github.com/JSBtechnologies/claude-skills/tree/main/shadcn-ui-designing ## Install ```sh agentstack add skill-jsbtechnologies-claude-skills-shadcn-ui-designing ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Shadcn UI Designer Build production-ready UI components using shadcn/ui principles: minimal, accessible, composable, and beautiful by default. ## Core Philosophy **Design modern, minimal interfaces** with: - Clean typography (Inter/system fonts, 2-3 weights max) - Ample whitespace (4px-based spacing: p-1 through p-8) - Subtle shadows (shadow-sm/md/lg only) - Accessible contrast (WCAG AA minimum) - Smooth micro-interactions (200-300ms transitions) - Professional neutrals (slate/zinc scale) with subtle accents **Build composable components** that work together seamlessly. ## Quick Start Pattern ```tsx import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" export function MyComponent() { return ( Title Description Section {/* Content here */} ) } ``` ## Design System Rules ### Typography - **Hierarchy**: `text-2xl` (headings) → `text-base` (body) → `text-sm` (secondary) - **Weights**: `font-semibold` (600) for emphasis, `font-medium` (500) for labels, `font-normal` (400) for body - **Colors**: `text-foreground` (primary), `text-muted-foreground` (secondary) ```tsx Page Title Supporting text ``` ### Spacing Use consistent spacing scale: - **Micro**: `space-y-2` (8px) - within sections - **Small**: `space-y-4` (16px) - between elements - **Medium**: `space-y-6` (24px) - between sections - **Large**: `space-y-8` (32px) - major divisions ```tsx {/* Related elements */} ``` ### Colors Use semantic color tokens: - **Background**: `bg-background`, `bg-card`, `bg-muted` - **Foreground**: `text-foreground`, `text-muted-foreground` - **Borders**: `border-border`, `border-input` - **Primary**: `bg-primary`, `text-primary-foreground` - **Destructive**: `bg-destructive`, `text-destructive-foreground` ```tsx Primary Action Subtle highlight ``` ### Shadows & Elevation Three levels only: - `shadow-sm`: Cards, raised sections (0 1px 2px) - `shadow-md`: Dropdowns, popovers (0 4px 6px) - `shadow-lg`: Modals, dialogs (0 10px 15px) ```tsx ``` ### Animations - **Duration**: 200-300ms - **Easing**: ease-in-out - **Use cases**: Hover states, loading states, reveals ```tsx ``` ### Accessibility Always include: - Semantic HTML (``, ``, ``) - ARIA labels on icons/actions - Focus states (`:focus-visible:ring-2`) - Keyboard navigation - WCAG AA contrast (4.5:1 minimum) ```tsx ``` ## Component Patterns ### Dashboard Cards ```tsx {stats.map(stat => ( {stat.label} {stat.icon} {stat.value} {stat.change} ))} ``` ### Forms ```tsx Full Name Email Submit Cancel ``` ### Data Tables ```tsx Recent Orders Order Customer Status Amount {orders.map(order => ( {order.id} {order.customer} {order.status} {order.amount} ))} ``` ### Modals/Dialogs ```tsx Open Dialog Edit Profile Make changes to your profile here. Click save when done. {/* Form fields */} Save changes ``` ### Loading States ```tsx // Skeleton loading // Loading button Please wait ``` ### Empty States ```tsx No results found Try adjusting your search Clear filters ``` ## Layout Patterns ### Container Widths ```tsx // Full width with constraints // Content-focused (prose) // Form-focused ``` ### Responsive Grids ```tsx // Dashboard grid // Content + sidebar {/* Content */} {/* Sidebar */} // Two column split ``` ### Navigation ```tsx Dashboard Projects {user.initials} ``` ## Best Practices ### Component Organization ```tsx // ✅ Good: Small, focused components export function UserCard({ user }) { return ( ) } // ❌ Avoid: Large monolithic components export function DashboardPage() { // 500 lines of JSX... } ``` ### Composability ```tsx // ✅ Compose shadcn components Edit Share Delete ``` ### State Management ```tsx // Form state const [formData, setFormData] = useState({ name: '', email: '' }) // Loading states const [isLoading, setIsLoading] = useState(false) // UI states const [isOpen, setIsOpen] = useState(false) ``` ### Error Handling ```tsx Email {errors.email && ( {errors.email} )} ``` ## Common Shadcn Components ### Essential Components - **Layout**: Card, Tabs, Sheet, Dialog, Popover, Separator - **Forms**: Input, Textarea, Select, Checkbox, Radio, Switch, Label - **Buttons**: Button, Toggle, ToggleGroup - **Display**: Badge, Avatar, Skeleton, Table - **Feedback**: Alert, Toast, Progress - **Navigation**: NavigationMenu, DropdownMenu, Command ### Button Variants ```tsx Primary Secondary Outline Ghost Link Delete ``` ### Badge Variants ```tsx Default Secondary Outline Error ``` ## Workflow 1. **Understand requirements** - What component/page is needed? 2. **Choose components** - Which shadcn/ui components fit? 3. **Build structure** - Layout and hierarchy first 4. **Apply styling** - Typography, spacing, colors 5. **Add interactions** - Hover states, transitions, focus 6. **Ensure accessibility** - ARIA, keyboard, contrast 7. **Test responsive** - Mobile, tablet, desktop ## Quality Checklist Before completing: - [ ] Uses shadcn/ui components appropriately - [ ] Follows 4px spacing scale (p-2, p-4, p-6, etc.) - [ ] Uses semantic color tokens (bg-card, text-foreground, etc.) - [ ] Limited shadow usage (shadow-sm/md/lg only) - [ ] Smooth transitions (200-300ms duration) - [ ] ARIA labels on interactive elements - [ ] Keyboard focus visible (ring-2 ring-primary) - [ ] WCAG AA contrast ratios - [ ] Mobile-responsive layout - [ ] Loading and error states handled ## References - [Shadcn UI](https://ui.shadcn.com) - Component library - [Tailwind CSS](https://tailwindcss.com) - Utility classes - [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/) - Accessibility standards ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [JSBtechnologies](https://github.com/JSBtechnologies) - **Source:** [JSBtechnologies/claude-skills](https://github.com/JSBtechnologies/claude-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-jsbtechnologies-claude-skills-shadcn-ui-designing - Seller: https://agentstack.voostack.com/s/jsbtechnologies - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.