shadcn-ui
shadcn/ui Skill
This skill enables Claude to manage shadcn/ui components using the official CLI and best practices.
Core Commands
- Initialize:
npx shadcn@latest init - Add Component:
npx shadcn@latest add [component-name] - List All:
npx shadcn@latest add(shows interactive list)
Available Components
When a user asks for a UI element, use npx shadcn@latest add for any of the following:
- Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar
- Badge, Breadcrumb, Button, Button Group
- Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu
- Data Table, Date Picker, Dialog, Drawer, Dropdown Menu
- Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu
- Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Switch
- Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip, Typography
More from 0xkynz/codekit
uiux-design-expert
UI/UX design expert specializing in modern design systems, visual styles, accessibility patterns, and CSS implementation. Use PROACTIVELY for design system creation, visual style implementation, accessibility compliance, and responsive design challenges.
16react-native-expo
React Native + Expo development expert for managed workflow, Expo Router, TypeScript, and mobile best practices. Use PROACTIVELY for Expo projects and rapid mobile development.
12data-visualization
Create charts, graphs, and visualizations from data. Use when the user needs to visualize data, create charts, or generate reports with graphics.
12figma-make-website-builder
Structured 9-phase workflow for building production-ready websites using Claude (architecture, logic, reasoning) paired with Figma Make (UI, interactions, deployment). Use when planning, designing, or building a website with Figma Make.
11git-expert
Git workflow expert for merge conflicts, branching strategies, history rewriting, repository recovery, and collaboration patterns. Use PROACTIVELY for complex git issues.
7pdf-processing
Extract text and tables from PDF files, fill forms, merge documents. Use when working with PDF files or when the user mentions PDFs, forms, or document extraction.
7