[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FSSFDRYJM2MYV6CGS0JWKV":3,"skill-same:01M6FSSFDRYJM2MYV6CGS0JWKV":97},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":70,"commitSha":71,"skillDirectory":72,"forksCount":73,"repositoryHtmlUrl":74,"repositoryHomepageUrl":6,"ownerHtmlUrl":75,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":76,"install":77,"resources":90},"01M6FSSFDRYJM2MYV6CGS0JWKV","shadcn-ui",null,"Use when building UI with shadcn\u002Fui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.","kbarbel640-del\u002Fskills","kbarbel640-del","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F255315490?v=4","01M6CJPPQGCCESXMG3K7BBGQ5J","01M6CJPPX2PB2BCZERFVM2C2B3",1,"MIT","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjgarrison929\u002Fshadcn-ui\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"shadcn","ui","shadcn ui","Tailwind","palette","layout","pattern","mobile","command","dialog","question","zod","css","data","library","component library","code","component","react","components","2026-11-10 10:12:30",false,"---\nname: shadcn-ui\nversion: 1.0.0\ndescription: Use when building UI with shadcn\u002Fui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.\ntriggers:\n  - shadcn\n  - shadcn\u002Fui\n  - radix\n  - component library\n  - UI components\n  - form pattern\n  - react-hook-form\n  - dark mode\n  - theming\n  - sidebar layout\n  - dialog\n  - sheet\n  - toast\n  - dropdown menu\n  - command palette\n  - data table\nrole: specialist\nscope: implementation\noutput-format: code\n---\n\n# shadcn\u002Fui Expert\n\nComprehensive guide for building production UIs with shadcn\u002Fui, Tailwind CSS, react-hook-form, and zod.\n\n## Core Concepts\n\nshadcn\u002Fui is **not** a component library — it's a collection of copy-paste components built on Radix UI primitives. You own the code. Components are added to your project, not installed as dependencies.\n\n## Installation\n\n```bash\n# Initialize shadcn\u002Fui in a Next.js project\nnpx shadcn@latest init\n\n# Add individual components\nnpx shadcn@latest add button\nnpx shadcn@latest add card\nnpx shadcn@latest add dialog\nnpx shadcn@latest add form\nnpx shadcn@latest add input\nnpx shadcn@latest add select\nnpx shadcn@latest add table\nnpx shadcn@latest add toast\nnpx shadcn@latest add dropdown-menu\nnpx shadcn@latest add sheet\nnpx shadcn@latest add tabs\nnpx shadcn@latest add sidebar\n\n# Add multiple at once\nnpx shadcn@latest add button card input label textarea select checkbox\n```\n\n---\n\n## Component Categories & When to Use\n\n### Layout & Navigation\n| Component | Use When |\n|-----------|----------|\n| `sidebar` | App-level navigation with collapsible sections |\n| `navigation-menu` | Top-level site navigation with dropdowns |\n| `breadcrumb` | Showing page hierarchy\u002Flocation |\n| `tabs` | Switching between related views in same context |\n| `separator` | Visual divider between content sections |\n| `sheet` | Slide-out panel (mobile nav, filters, detail views) |\n| `resizable` | Adjustable panel layouts |\n\n### Forms & Input\n| Component | Use When |\n|-----------|----------|\n| `form` | Any form with validation (wraps react-hook-form) |\n| `input` | Text, email, password, number inputs |\n| `textarea` | Multi-line text input |\n| `select` | Choosing from a list (native-like) |\n| `combobox` | Searchable select (uses `command` + `popover`) |\n| `checkbox` | Boolean or multi-select toggles |\n| `radio-group` | Single selection from small set |\n| `switch` | On\u002Foff toggle (settings, preferences) |\n| `slider` | Numeric range selection |\n| `date-picker` | Date selection (uses `calendar` + `popover`) |\n| `toggle` | Pressed\u002Funpressed state (toolbar buttons) |\n\n### Feedback & Overlay\n| Component | Use When |\n|-----------|----------|\n| `dialog` | Modal confirmation, forms, or detail views |\n| `alert-dialog` | Destructive action confirmation (\"Are you sure?\") |\n| `sheet` | Side panel for forms, filters, mobile nav |\n| `toast` | Brief non-blocking notifications (via `sonner`) |\n| `alert` | Inline status messages (info, warning, error) |\n| `tooltip` | Hover hints for icons\u002Fbuttons |\n| `popover` | Rich content on click (color pickers, date pickers) |\n| `hover-card` | Preview content on hover (user profiles, links) |\n| `skeleton` | Loading placeholders |\n| `progress` | Task completion indicators |\n\n### Data Display\n| Component | Use When |\n|-----------|----------|\n| `table` | Tabular data display |\n| `data-table` | Tables with sorting, filtering, pagination (uses `@tanstack\u002Freact-table`) |\n| `card` | Content containers with header, body, footer |\n| `badge` | Status labels, tags, counts |\n| `avatar` | User profile images |\n| `accordion` | Collapsible FAQ or settings sections |\n| `carousel` | Image\u002Fcontent slideshows |\n| `scroll-area` | Custom scrollable containers |\n\n### Actions\n| Component | Use When |\n|-----------|----------|\n| `button` | Primary actions, form submissions |\n| `dropdown-menu` | Context menus, action menus |\n| `context-menu` | Right-click menus |\n| `menubar` | Application menu bars |\n| `command` | Command palette \u002F search (⌘K) |\n\n---\n\n## Form Patterns (react-hook-form + zod)\n\n### Complete Form Example\n\n```bash\nnpx shadcn@latest add form input select textarea checkbox button\n```\n\n```tsx\n'use client'\n\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@\u002Fcomponents\u002Fui\u002Fform'\nimport { Input } from '@\u002Fcomponents\u002Fui\u002Finput'\nimport { Textarea } from '@\u002Fcomponents\u002Fui\u002Ftextarea'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@\u002Fcomponents\u002Fui\u002Fselect'\nimport { Checkbox } from '@\u002Fcomponents\u002Fui\u002Fcheckbox'\nimport { toast } from 'sonner'\n\nconst formSchema = z.object({\n  name: z.string().min(2, 'Name must be at least 2 characters'),\n  email: z.string().email('Invalid email address'),\n  role: z.enum(['admin', 'user', 'editor'], { required_error: 'Select a role' }),\n  bio: z.string().max(500).optional(),\n  notifications: z.boolean().default(false),\n})\n\ntype FormValues = z.infer\u003Ctypeof formSchema>\n\nexport function UserForm() {\n  const form = useForm\u003CFormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: '',\n      email: '',\n      bio: '',\n      notifications: false,\n    },\n  })\n\n  async function onSubmit(values: FormValues) {\n    try {\n      await createUser(values)\n      toast.success('User created successfully')\n      form.reset()\n    } catch (error) {\n      toast.error('Failed to create user')\n    }\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        \u003CFormField\n          control={form.control}\n          name=\"name\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Name\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"John Doe\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"john@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"role\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Role\u003C\u002FFormLabel>\n              \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n                \u003CFormControl>\n                  \u003CSelectTrigger>\n                    \u003CSelectValue placeholder=\"Select a role\" \u002F>\n                  \u003C\u002FSelectTrigger>\n                \u003C\u002FFormControl>\n                \u003CSelectContent>\n                  \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"editor\">Editor\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n                \u003C\u002FSelectContent>\n              \u003C\u002FSelect>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Bio\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CTextarea placeholder=\"Tell us about yourself...\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormDescription>Max 500 characters\u003C\u002FFormDescription>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"notifications\"\n          render={({ field }) => (\n            \u003CFormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n              \u003CFormControl>\n                \u003CCheckbox checked={field.value} onCheckedChange={field.onChange} \u002F>\n              \u003C\u002FFormControl>\n              \u003Cdiv className=\"space-y-1 leading-none\">\n                \u003CFormLabel>Email notifications\u003C\u002FFormLabel>\n                \u003CFormDescription>Receive emails about account activity\u003C\u002FFormDescription>\n              \u003C\u002Fdiv>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CButton type=\"submit\" disabled={form.formState.isSubmitting}>\n          {form.formState.isSubmitting ? 'Creating...' : 'Create User'}\n        \u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Form with Server Action\n\n```tsx\n'use client'\n\nimport { useFormState } from 'react-dom'\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\n\nexport function ContactForm() {\n  const form = useForm\u003CFormValues>({\n    resolver: zodResolver(schema),\n  })\n\n  async function onSubmit(values: FormValues) {\n    const formData = new FormData()\n    Object.entries(values).forEach(([key, value]) => formData.append(key, String(value)))\n    await submitContact(formData)\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        {\u002F* fields *\u002F}\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n---\n\n## Theming & Dark Mode\n\n### Setup with next-themes\n\n```bash\nnpm install next-themes\nnpx shadcn@latest add dropdown-menu\n```\n\n```tsx\n\u002F\u002F app\u002Fproviders.tsx\n'use client'\nimport { ThemeProvider } from 'next-themes'\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem disableTransitionOnChange>\n      {children}\n    \u003C\u002FThemeProvider>\n  )\n}\n```\n\n```tsx\n\u002F\u002F components\u002Ftheme-toggle.tsx\n'use client'\nimport { Moon, Sun } from 'lucide-react'\nimport { useTheme } from 'next-themes'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@\u002Fcomponents\u002Fui\u002Fdropdown-menu'\n\nexport function ThemeToggle() {\n  const { setTheme } = useTheme()\n  return (\n    \u003CDropdownMenu>\n      \u003CDropdownMenuTrigger asChild>\n        \u003CButton variant=\"outline\" size=\"icon\">\n          \u003CSun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" \u002F>\n          \u003CMoon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" \u002F>\n          \u003Cspan className=\"sr-only\">Toggle theme\u003C\u002Fspan>\n        \u003C\u002FButton>\n      \u003C\u002FDropdownMenuTrigger>\n      \u003CDropdownMenuContent align=\"end\">\n        \u003CDropdownMenuItem onClick={() => setTheme('light')}>Light\u003C\u002FDropdownMenuItem>\n        \u003CDropdownMenuItem onClick={() => setTheme('dark')}>Dark\u003C\u002FDropdownMenuItem>\n        \u003CDropdownMenuItem onClick={() => setTheme('system')}>System\u003C\u002FDropdownMenuItem>\n      \u003C\u002FDropdownMenuContent>\n    \u003C\u002FDropdownMenu>\n  )\n}\n```\n\n### Custom Colors in `globals.css`\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    \u002F* ... etc *\u002F\n  }\n}\n```\n\n---\n\n## Common Layouts\n\n### App Shell with Sidebar\n\n```tsx\nimport { SidebarProvider, SidebarTrigger } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\nimport { AppSidebar } from '@\u002Fcomponents\u002Fapp-sidebar'\n\nexport default function DashboardLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CSidebarProvider>\n      \u003CAppSidebar \u002F>\n      \u003Cmain className=\"flex-1\">\n        \u003Cheader className=\"flex h-14 items-center gap-4 border-b px-6\">\n          \u003CSidebarTrigger \u002F>\n          \u003Ch1 className=\"text-lg font-semibold\">Dashboard\u003C\u002Fh1>\n        \u003C\u002Fheader>\n        \u003Cdiv className=\"p-6\">{children}\u003C\u002Fdiv>\n      \u003C\u002Fmain>\n    \u003C\u002FSidebarProvider>\n  )\n}\n```\n\n### Responsive Header with Mobile Nav\n\n```tsx\nimport { Sheet, SheetContent, SheetTrigger } from '@\u002Fcomponents\u002Fui\u002Fsheet'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport { Menu } from 'lucide-react'\n\nexport function Header() {\n  return (\n    \u003Cheader className=\"sticky top-0 z-50 w-full border-b bg-background\u002F95 backdrop-blur\">\n      \u003Cdiv className=\"container flex h-14 items-center\">\n        \u003Cdiv className=\"mr-4 hidden md:flex\">\n          \u003CLogo \u002F>\n          \u003Cnav className=\"flex items-center gap-6 text-sm ml-6\">\n            \u003CLink href=\"\u002Fdashboard\">Dashboard\u003C\u002FLink>\n            \u003CLink href=\"\u002Fsettings\">Settings\u003C\u002FLink>\n          \u003C\u002Fnav>\n        \u003C\u002Fdiv>\n\n        {\u002F* Mobile hamburger *\u002F}\n        \u003CSheet>\n          \u003CSheetTrigger asChild>\n            \u003CButton variant=\"outline\" size=\"icon\" className=\"md:hidden\">\n              \u003CMenu className=\"h-5 w-5\" \u002F>\n            \u003C\u002FButton>\n          \u003C\u002FSheetTrigger>\n          \u003CSheetContent side=\"left\" className=\"w-[300px]\">\n            \u003Cnav className=\"flex flex-col gap-4 mt-8\">\n              \u003CLink href=\"\u002Fdashboard\">Dashboard\u003C\u002FLink>\n              \u003CLink href=\"\u002Fsettings\">Settings\u003C\u002FLink>\n            \u003C\u002Fnav>\n          \u003C\u002FSheetContent>\n        \u003C\u002FSheet>\n\n        \u003Cdiv className=\"flex flex-1 items-center justify-end gap-2\">\n          \u003CThemeToggle \u002F>\n          \u003CUserMenu \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fheader>\n  )\n}\n```\n\n### Card Grid\n\n```tsx\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@\u002Fcomponents\u002Fui\u002Fcard'\n\nexport function StatsGrid({ stats }: { stats: Stat[] }) {\n  return (\n    \u003Cdiv className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n      {stats.map((stat) => (\n        \u003CCard key={stat.label}>\n          \u003CCardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            \u003CCardTitle className=\"text-sm font-medium\">{stat.label}\u003C\u002FCardTitle>\n            \u003Cstat.icon className=\"h-4 w-4 text-muted-foreground\" \u002F>\n          \u003C\u002FCardHeader>\n          \u003CCardContent>\n            \u003Cdiv className=\"text-2xl font-bold\">{stat.value}\u003C\u002Fdiv>\n            \u003Cp className=\"text-xs text-muted-foreground\">{stat.description}\u003C\u002Fp>\n          \u003C\u002FCardContent>\n        \u003C\u002FCard>\n      ))}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## Tailwind CSS Patterns\n\n### Common Utility Patterns\n\n```tsx\n\u002F\u002F Centering\n\u003Cdiv className=\"flex items-center justify-center min-h-screen\">\n\n\u002F\u002F Container with max-width\n\u003Cdiv className=\"container mx-auto px-4\">\n\n\u002F\u002F Responsive grid\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n\n\u002F\u002F Sticky header\n\u003Cheader className=\"sticky top-0 z-50 border-b bg-background\u002F95 backdrop-blur\">\n\n\u002F\u002F Truncated text\n\u003Cp className=\"truncate\">Very long text...\u003C\u002Fp>\n\n\u002F\u002F Line clamp\n\u003Cp className=\"line-clamp-3\">Multi-line truncation...\u003C\u002Fp>\n\n\u002F\u002F Aspect ratio\n\u003Cdiv className=\"aspect-video rounded-lg overflow-hidden\">\n\n\u002F\u002F Animations\n\u003Cdiv className=\"animate-pulse\">    {\u002F* Loading skeleton *\u002F}\n\u003Cdiv className=\"animate-spin\">     {\u002F* Spinner *\u002F}\n\u003Cdiv className=\"transition-all duration-200 hover:scale-105\">\n```\n\n### Button Variants\n\n```tsx\n\u003CButton>Default\u003C\u002FButton>\n\u003CButton variant=\"secondary\">Secondary\u003C\u002FButton>\n\u003CButton variant=\"outline\">Outline\u003C\u002FButton>\n\u003CButton variant=\"ghost\">Ghost\u003C\u002FButton>\n\u003CButton variant=\"link\">Link\u003C\u002FButton>\n\u003CButton variant=\"destructive\">Delete\u003C\u002FButton>\n\u003CButton size=\"sm\">Small\u003C\u002FButton>\n\u003CButton size=\"lg\">Large\u003C\u002FButton>\n\u003CButton size=\"icon\">\u003CPlus className=\"h-4 w-4\" \u002F>\u003C\u002FButton>\n\u003CButton disabled>Disabled\u003C\u002FButton>\n\u003CButton asChild>\u003CLink href=\"\u002Fpage\">As Link\u003C\u002FLink>\u003C\u002FButton>\n```\n\n---\n\n## Toast Notifications\n\n```bash\nnpx shadcn@latest add sonner\n```\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Toaster } from '@\u002Fcomponents\u002Fui\u002Fsonner'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\u003Cbody>{children}\u003CToaster \u002F>\u003C\u002Fbody>\u003C\u002Fhtml>\n  )\n}\n\n\u002F\u002F Usage anywhere\nimport { toast } from 'sonner'\n\ntoast.success('User created')\ntoast.error('Something went wrong')\ntoast.info('New update available')\ntoast.warning('This action cannot be undone')\ntoast.promise(asyncAction(), {\n  loading: 'Creating...',\n  success: 'Created!',\n  error: 'Failed to create',\n})\n```\n\n---\n\n## Command Palette (⌘K)\n\n```tsx\n'use client'\nimport { useEffect, useState } from 'react'\nimport { useRouter } from 'next\u002Fnavigation'\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@\u002Fcomponents\u002Fui\u002Fcommand'\n\nexport function CommandPalette() {\n  const [open, setOpen] = useState(false)\n  const router = useRouter()\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n    document.addEventListener('keydown', down)\n    return () => document.removeEventListener('keydown', down)\n  }, [])\n\n  return (\n    \u003CCommandDialog open={open} onOpenChange={setOpen}>\n      \u003CCommandInput placeholder=\"Type a command or search...\" \u002F>\n      \u003CCommandList>\n        \u003CCommandEmpty>No results found.\u003C\u002FCommandEmpty>\n        \u003CCommandGroup heading=\"Navigation\">\n          \u003CCommandItem onSelect={() => { router.push('\u002Fdashboard'); setOpen(false) }}>\n            Dashboard\n          \u003C\u002FCommandItem>\n          \u003CCommandItem onSelect={() => { router.push('\u002Fsettings'); setOpen(false) }}>\n            Settings\n          \u003C\u002FCommandItem>\n        \u003C\u002FCommandGroup>\n      \u003C\u002FCommandList>\n    \u003C\u002FCommandDialog>\n  )\n}\n```\n","# shadcn\u002Fui Expert\n\nComprehensive guide for building production UIs with shadcn\u002Fui, Tailwind CSS, react-hook-form, and zod.\n\n## Core Concepts\n\nshadcn\u002Fui is **not** a component library — it's a collection of copy-paste components built on Radix UI primitives. You own the code. Components are added to your project, not installed as dependencies.\n\n## Installation\n\n```bash\n# Initialize shadcn\u002Fui in a Next.js project\nnpx shadcn@latest init\n\n# Add individual components\nnpx shadcn@latest add button\nnpx shadcn@latest add card\nnpx shadcn@latest add dialog\nnpx shadcn@latest add form\nnpx shadcn@latest add input\nnpx shadcn@latest add select\nnpx shadcn@latest add table\nnpx shadcn@latest add toast\nnpx shadcn@latest add dropdown-menu\nnpx shadcn@latest add sheet\nnpx shadcn@latest add tabs\nnpx shadcn@latest add sidebar\n\n# Add multiple at once\nnpx shadcn@latest add button card input label textarea select checkbox\n```\n\n---\n\n## Component Categories & When to Use\n\n### Layout & Navigation\n| Component | Use When |\n|-----------|----------|\n| `sidebar` | App-level navigation with collapsible sections |\n| `navigation-menu` | Top-level site navigation with dropdowns |\n| `breadcrumb` | Showing page hierarchy\u002Flocation |\n| `tabs` | Switching between related views in same context |\n| `separator` | Visual divider between content sections |\n| `sheet` | Slide-out panel (mobile nav, filters, detail views) |\n| `resizable` | Adjustable panel layouts |\n\n### Forms & Input\n| Component | Use When |\n|-----------|----------|\n| `form` | Any form with validation (wraps react-hook-form) |\n| `input` | Text, email, password, number inputs |\n| `textarea` | Multi-line text input |\n| `select` | Choosing from a list (native-like) |\n| `combobox` | Searchable select (uses `command` + `popover`) |\n| `checkbox` | Boolean or multi-select toggles |\n| `radio-group` | Single selection from small set |\n| `switch` | On\u002Foff toggle (settings, preferences) |\n| `slider` | Numeric range selection |\n| `date-picker` | Date selection (uses `calendar` + `popover`) |\n| `toggle` | Pressed\u002Funpressed state (toolbar buttons) |\n\n### Feedback & Overlay\n| Component | Use When |\n|-----------|----------|\n| `dialog` | Modal confirmation, forms, or detail views |\n| `alert-dialog` | Destructive action confirmation (\"Are you sure?\") |\n| `sheet` | Side panel for forms, filters, mobile nav |\n| `toast` | Brief non-blocking notifications (via `sonner`) |\n| `alert` | Inline status messages (info, warning, error) |\n| `tooltip` | Hover hints for icons\u002Fbuttons |\n| `popover` | Rich content on click (color pickers, date pickers) |\n| `hover-card` | Preview content on hover (user profiles, links) |\n| `skeleton` | Loading placeholders |\n| `progress` | Task completion indicators |\n\n### Data Display\n| Component | Use When |\n|-----------|----------|\n| `table` | Tabular data display |\n| `data-table` | Tables with sorting, filtering, pagination (uses `@tanstack\u002Freact-table`) |\n| `card` | Content containers with header, body, footer |\n| `badge` | Status labels, tags, counts |\n| `avatar` | User profile images |\n| `accordion` | Collapsible FAQ or settings sections |\n| `carousel` | Image\u002Fcontent slideshows |\n| `scroll-area` | Custom scrollable containers |\n\n### Actions\n| Component | Use When |\n|-----------|----------|\n| `button` | Primary actions, form submissions |\n| `dropdown-menu` | Context menus, action menus |\n| `context-menu` | Right-click menus |\n| `menubar` | Application menu bars |\n| `command` | Command palette \u002F search (⌘K) |\n\n---\n\n## Form Patterns (react-hook-form + zod)\n\n### Complete Form Example\n\n```bash\nnpx shadcn@latest add form input select textarea checkbox button\n```\n\n```tsx\n'use client'\n\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@\u002Fcomponents\u002Fui\u002Fform'\nimport { Input } from '@\u002Fcomponents\u002Fui\u002Finput'\nimport { Textarea } from '@\u002Fcomponents\u002Fui\u002Ftextarea'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@\u002Fcomponents\u002Fui\u002Fselect'\nimport { Checkbox } from '@\u002Fcomponents\u002Fui\u002Fcheckbox'\nimport { toast } from 'sonner'\n\nconst formSchema = z.object({\n  name: z.string().min(2, 'Name must be at least 2 characters'),\n  email: z.string().email('Invalid email address'),\n  role: z.enum(['admin', 'user', 'editor'], { required_error: 'Select a role' }),\n  bio: z.string().max(500).optional(),\n  notifications: z.boolean().default(false),\n})\n\ntype FormValues = z.infer\u003Ctypeof formSchema>\n\nexport function UserForm() {\n  const form = useForm\u003CFormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: '',\n      email: '',\n      bio: '',\n      notifications: false,\n    },\n  })\n\n  async function onSubmit(values: FormValues) {\n    try {\n      await createUser(values)\n      toast.success('User created successfully')\n      form.reset()\n    } catch (error) {\n      toast.error('Failed to create user')\n    }\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        \u003CFormField\n          control={form.control}\n          name=\"name\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Name\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput placeholder=\"John Doe\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Email\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CInput type=\"email\" placeholder=\"john@example.com\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"role\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Role\u003C\u002FFormLabel>\n              \u003CSelect onValueChange={field.onChange} defaultValue={field.value}>\n                \u003CFormControl>\n                  \u003CSelectTrigger>\n                    \u003CSelectValue placeholder=\"Select a role\" \u002F>\n                  \u003C\u002FSelectTrigger>\n                \u003C\u002FFormControl>\n                \u003CSelectContent>\n                  \u003CSelectItem value=\"admin\">Admin\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"editor\">Editor\u003C\u002FSelectItem>\n                  \u003CSelectItem value=\"user\">User\u003C\u002FSelectItem>\n                \u003C\u002FSelectContent>\n              \u003C\u002FSelect>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            \u003CFormItem>\n              \u003CFormLabel>Bio\u003C\u002FFormLabel>\n              \u003CFormControl>\n                \u003CTextarea placeholder=\"Tell us about yourself...\" {...field} \u002F>\n              \u003C\u002FFormControl>\n              \u003CFormDescription>Max 500 characters\u003C\u002FFormDescription>\n              \u003CFormMessage \u002F>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CFormField\n          control={form.control}\n          name=\"notifications\"\n          render={({ field }) => (\n            \u003CFormItem className=\"flex flex-row items-start space-x-3 space-y-0\">\n              \u003CFormControl>\n                \u003CCheckbox checked={field.value} onCheckedChange={field.onChange} \u002F>\n              \u003C\u002FFormControl>\n              \u003Cdiv className=\"space-y-1 leading-none\">\n                \u003CFormLabel>Email notifications\u003C\u002FFormLabel>\n                \u003CFormDescription>Receive emails about account activity\u003C\u002FFormDescription>\n              \u003C\u002Fdiv>\n            \u003C\u002FFormItem>\n          )}\n        \u002F>\n\n        \u003CButton type=\"submit\" disabled={form.formState.isSubmitting}>\n          {form.formState.isSubmitting ? 'Creating...' : 'Create User'}\n        \u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Form with Server Action\n\n```tsx\n'use client'\n\nimport { useFormState } from 'react-dom'\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\n\nexport function ContactForm() {\n  const form = useForm\u003CFormValues>({\n    resolver: zodResolver(schema),\n  })\n\n  async function onSubmit(values: FormValues) {\n    const formData = new FormData()\n    Object.entries(values).forEach(([key, value]) => formData.append(key, String(value)))\n    await submitContact(formData)\n  }\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n        {\u002F* fields *\u002F}\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n---\n\n## Theming & Dark Mode\n\n### Setup with next-themes\n\n```bash\nnpm install next-themes\nnpx shadcn@latest add dropdown-menu\n```\n\n```tsx\n\u002F\u002F app\u002Fproviders.tsx\n'use client'\nimport { ThemeProvider } from 'next-themes'\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem disableTransitionOnChange>\n      {children}\n    \u003C\u002FThemeProvider>\n  )\n}\n```\n\n```tsx\n\u002F\u002F components\u002Ftheme-toggle.tsx\n'use client'\nimport { Moon, Sun } from 'lucide-react'\nimport { useTheme } from 'next-themes'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@\u002Fcomponents\u002Fui\u002Fdropdown-menu'\n\nexport function ThemeToggle() {\n  const { setTheme } = useTheme()\n  return (\n    \u003CDropdownMenu>\n      \u003CDropdownMenuTrigger asChild>\n        \u003CButton variant=\"outline\" size=\"icon\">\n          \u003CSun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" \u002F>\n          \u003CMoon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" \u002F>\n          \u003Cspan className=\"sr-only\">Toggle theme\u003C\u002Fspan>\n        \u003C\u002FButton>\n      \u003C\u002FDropdownMenuTrigger>\n      \u003CDropdownMenuContent align=\"end\">\n        \u003CDropdownMenuItem onClick={() => setTheme('light')}>Light\u003C\u002FDropdownMenuItem>\n        \u003CDropdownMenuItem onClick={() => setTheme('dark')}>Dark\u003C\u002FDropdownMenuItem>\n        \u003CDropdownMenuItem onClick={() => setTheme('system')}>System\u003C\u002FDropdownMenuItem>\n      \u003C\u002FDropdownMenuContent>\n    \u003C\u002FDropdownMenu>\n  )\n}\n```\n\n### Custom Colors in `globals.css`\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    \u002F* ... etc *\u002F\n  }\n}\n```\n\n---\n\n## Common Layouts\n\n### App Shell with Sidebar\n\n```tsx\nimport { SidebarProvider, SidebarTrigger } from '@\u002Fcomponents\u002Fui\u002Fsidebar'\nimport { AppSidebar } from '@\u002Fcomponents\u002Fapp-sidebar'\n\nexport default function DashboardLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CSidebarProvider>\n      \u003CAppSidebar \u002F>\n      \u003Cmain className=\"flex-1\">\n        \u003Cheader className=\"flex h-14 items-center gap-4 border-b px-6\">\n          \u003CSidebarTrigger \u002F>\n          \u003Ch1 className=\"text-lg font-semibold\">Dashboard\u003C\u002Fh1>\n        \u003C\u002Fheader>\n        \u003Cdiv className=\"p-6\">{children}\u003C\u002Fdiv>\n      \u003C\u002Fmain>\n    \u003C\u002FSidebarProvider>\n  )\n}\n```\n\n### Responsive Header with Mobile Nav\n\n```tsx\nimport { Sheet, SheetContent, SheetTrigger } from '@\u002Fcomponents\u002Fui\u002Fsheet'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport { Menu } from 'lucide-react'\n\nexport function Header() {\n  return (\n    \u003Cheader className=\"sticky top-0 z-50 w-full border-b bg-background\u002F95 backdrop-blur\">\n      \u003Cdiv className=\"container flex h-14 items-center\">\n        \u003Cdiv className=\"mr-4 hidden md:flex\">\n          \u003CLogo \u002F>\n          \u003Cnav className=\"flex items-center gap-6 text-sm ml-6\">\n            \u003CLink href=\"\u002Fdashboard\">Dashboard\u003C\u002FLink>\n            \u003CLink href=\"\u002Fsettings\">Settings\u003C\u002FLink>\n          \u003C\u002Fnav>\n        \u003C\u002Fdiv>\n\n        {\u002F* Mobile hamburger *\u002F}\n        \u003CSheet>\n          \u003CSheetTrigger asChild>\n            \u003CButton variant=\"outline\" size=\"icon\" className=\"md:hidden\">\n              \u003CMenu className=\"h-5 w-5\" \u002F>\n            \u003C\u002FButton>\n          \u003C\u002FSheetTrigger>\n          \u003CSheetContent side=\"left\" className=\"w-[300px]\">\n            \u003Cnav className=\"flex flex-col gap-4 mt-8\">\n              \u003CLink href=\"\u002Fdashboard\">Dashboard\u003C\u002FLink>\n              \u003CLink href=\"\u002Fsettings\">Settings\u003C\u002FLink>\n            \u003C\u002Fnav>\n          \u003C\u002FSheetContent>\n        \u003C\u002FSheet>\n\n        \u003Cdiv className=\"flex flex-1 items-center justify-end gap-2\">\n          \u003CThemeToggle \u002F>\n          \u003CUserMenu \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fheader>\n  )\n}\n```\n\n### Card Grid\n\n```tsx\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@\u002Fcomponents\u002Fui\u002Fcard'\n\nexport function StatsGrid({ stats }: { stats: Stat[] }) {\n  return (\n    \u003Cdiv className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n      {stats.map((stat) => (\n        \u003CCard key={stat.label}>\n          \u003CCardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            \u003CCardTitle className=\"text-sm font-medium\">{stat.label}\u003C\u002FCardTitle>\n            \u003Cstat.icon className=\"h-4 w-4 text-muted-foreground\" \u002F>\n          \u003C\u002FCardHeader>\n          \u003CCardContent>\n            \u003Cdiv className=\"text-2xl font-bold\">{stat.value}\u003C\u002Fdiv>\n            \u003Cp className=\"text-xs text-muted-foreground\">{stat.description}\u003C\u002Fp>\n          \u003C\u002FCardContent>\n        \u003C\u002FCard>\n      ))}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n---\n\n## Tailwind CSS Patterns\n\n### Common Utility Patterns\n\n```tsx\n\u002F\u002F Centering\n\u003Cdiv className=\"flex items-center justify-center min-h-screen\">\n\n\u002F\u002F Container with max-width\n\u003Cdiv className=\"container mx-auto px-4\">\n\n\u002F\u002F Responsive grid\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n\n\u002F\u002F Sticky header\n\u003Cheader className=\"sticky top-0 z-50 border-b bg-background\u002F95 backdrop-blur\">\n\n\u002F\u002F Truncated text\n\u003Cp className=\"truncate\">Very long text...\u003C\u002Fp>\n\n\u002F\u002F Line clamp\n\u003Cp className=\"line-clamp-3\">Multi-line truncation...\u003C\u002Fp>\n\n\u002F\u002F Aspect ratio\n\u003Cdiv className=\"aspect-video rounded-lg overflow-hidden\">\n\n\u002F\u002F Animations\n\u003Cdiv className=\"animate-pulse\">    {\u002F* Loading skeleton *\u002F}\n\u003Cdiv className=\"animate-spin\">     {\u002F* Spinner *\u002F}\n\u003Cdiv className=\"transition-all duration-200 hover:scale-105\">\n```\n\n### Button Variants\n\n```tsx\n\u003CButton>Default\u003C\u002FButton>\n\u003CButton variant=\"secondary\">Secondary\u003C\u002FButton>\n\u003CButton variant=\"outline\">Outline\u003C\u002FButton>\n\u003CButton variant=\"ghost\">Ghost\u003C\u002FButton>\n\u003CButton variant=\"link\">Link\u003C\u002FButton>\n\u003CButton variant=\"destructive\">Delete\u003C\u002FButton>\n\u003CButton size=\"sm\">Small\u003C\u002FButton>\n\u003CButton size=\"lg\">Large\u003C\u002FButton>\n\u003CButton size=\"icon\">\u003CPlus className=\"h-4 w-4\" \u002F>\u003C\u002FButton>\n\u003CButton disabled>Disabled\u003C\u002FButton>\n\u003CButton asChild>\u003CLink href=\"\u002Fpage\">As Link\u003C\u002FLink>\u003C\u002FButton>\n```\n\n---\n\n## Toast Notifications\n\n```bash\nnpx shadcn@latest add sonner\n```\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { Toaster } from '@\u002Fcomponents\u002Fui\u002Fsonner'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\u003Cbody>{children}\u003CToaster \u002F>\u003C\u002Fbody>\u003C\u002Fhtml>\n  )\n}\n\n\u002F\u002F Usage anywhere\nimport { toast } from 'sonner'\n\ntoast.success('User created')\ntoast.error('Something went wrong')\ntoast.info('New update available')\ntoast.warning('This action cannot be undone')\ntoast.promise(asyncAction(), {\n  loading: 'Creating...',\n  success: 'Created!',\n  error: 'Failed to create',\n})\n```\n\n---\n\n## Command Palette (⌘K)\n\n```tsx\n'use client'\nimport { useEffect, useState } from 'react'\nimport { useRouter } from 'next\u002Fnavigation'\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@\u002Fcomponents\u002Fui\u002Fcommand'\n\nexport function CommandPalette() {\n  const [open, setOpen] = useState(false)\n  const router = useRouter()\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n    document.addEventListener('keydown', down)\n    return () => document.removeEventListener('keydown', down)\n  }, [])\n\n  return (\n    \u003CCommandDialog open={open} onOpenChange={setOpen}>\n      \u003CCommandInput placeholder=\"Type a command or search...\" \u002F>\n      \u003CCommandList>\n        \u003CCommandEmpty>No results found.\u003C\u002FCommandEmpty>\n        \u003CCommandGroup heading=\"Navigation\">\n          \u003CCommandItem onSelect={() => { router.push('\u002Fdashboard'); setOpen(false) }}>\n            Dashboard\n          \u003C\u002FCommandItem>\n          \u003CCommandItem onSelect={() => { router.push('\u002Fsettings'); setOpen(false) }}>\n            Settings\n          \u003C\u002FCommandItem>\n        \u003C\u002FCommandGroup>\n      \u003C\u002FCommandList>\n    \u003C\u002FCommandDialog>\n  )\n}\n```\n",{"name":5,"role":53,"scope":54,"version":55,"triggers":56,"description":7,"output-format":44},"specialist","implementation","1.0.0",[28,57,58,43,59,60,61,62,63,64,37,65,66,67,68,69],"shadcn\u002Fui","radix","UI components","form pattern","react-hook-form","dark mode","theming","sidebar layout","sheet","toast","dropdown menu","command palette","data table","main","e7e336ac628c3e3bd771aff1aaa469c93778f94a","skills\u002Fjgarrison929\u002Fshadcn-ui",0,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del","2026-08-23 22:39:37",{"source":8,"skillName":5,"commands":78,"prompt":88,"zipAvailable":89},[79,82,85],{"tool":80,"command":81},"npx","npx skills add kbarbel640-del\u002Fskills --skill shadcn-ui",{"tool":83,"command":84},"bunx","bunx skills add kbarbel640-del\u002Fskills --skill shadcn-ui",{"tool":86,"command":87},"pnpm","pnpm dlx skills add kbarbel640-del\u002Fskills --skill shadcn-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjgarrison929\u002Fshadcn-ui\u002FSKILL.md",true,[91],{"path":92,"resourceType":93,"resourceTypeDesc":94,"sizeBytes":95,"sourceHtmlUrl":96},"_meta.json","REFERENCE","参考文档",276,"https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fjgarrison929\u002Fshadcn-ui\u002F_meta.json",[98,127,154,175,181,201],{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":107,"publishedAt":48},"01M6G8J55967D6281ACMKAKTEQ","crowd-prompting","A marketplace where AI agents improve prompts, system instructions, tool descriptions, and other text-based content with domain expertise from real-world operations — and earn tokens for valuable contributions.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzzadrian\u002Fcrowd-prompting\u002FSKILL.md",[104],{"categoryNo":105,"categoryName":106,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126],"crowd prompting","prompting","api","with","tokens","domain","world","prompts","operations","instructions","text","tool","system","improve","productivity","marketplace","https","content","ai agents",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":136,"publishedAt":48},"01M6G8J0PKPAYVET6BWE8W4C26","dilemm-ai","Compete in DilemmAI, the prisoner's dilemma AI arena at dilemm.ai. Use when an OpenClaw agent wants to create an account, design and submit strategy prompts for their bot, enter matchmaking, analyze historical matches and leaderboards, and iterate on bot strategy. Requires headless browser automation (no API available yet).","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzyori\u002Fdilemm-ai\u002FSKILL.md",[133],{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[137,110,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,115,153],"dilemm ai","arena","analyze","browser","openclaw agent","create","automation","browser automation","bot","openclaw","design","strategy","headless","compete","submit","matchmaking","use",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":163,"publishedAt":48},"01M6G8HWAF3K9SW7NP3Z83CPJ6","arxiv-paper-reviews","Interact with arXiv Crawler API to fetch papers, read reviews, and submit comments. Use when working with arXiv papers, fetching paper lists by date\u002Fcategory\u002Finterest, viewing paper details with comments, or submitting paper reviews via API at http:\u002F\u002F150.158.152.82:8000.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Fweak-accept\u002FSKILL.md",[160],{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000021","资料检索与研究",[164,165,166,167,168,169,170,111,171,151,153,172,110,173,174],"arxiv paper reviews","reviews","arxiv","paper","crawler","papers","comments","fetch","read","http","via",{"skillNo":176,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":180,"publishedAt":48},"01M6G8HQJ7N7WMY6YV7D7SSJ16","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzxrys\u002Farxiv-paper-reviews\u002FSKILL.md",[179],{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},[167,166,165,164,174,169,170,111,168,151,153,171,172,110,173],{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":48},"01M6G8HM95Y64JNVFC2HN4E2BG","git-summary","Get a quick summary of the current Git repository including status, recent commits, branches, and contributors.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fzweack\u002Fgit-summary\u002FSKILL.md",[],[188,189,190,191,192,193,194,195,196,197,198,199,200],"git","summary","git summary","commits","repository","win32","status","linux","contributors","true","quick","get","branches",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":211,"publishedAt":48},"01M6G8HGEGF05CNEJCGVYFSC4R","agent-constitution","Interact with AgentConstitution governance contracts on Base Sepolia. Check compliance, read rules, log actions, query governance state.","https:\u002F\u002Fgithub.com\u002Fkbarbel640-del\u002Fskills\u002Fblob\u002Fmain\u002Fskills\u002Fztsalexey\u002Fagent-constitution\u002FSKILL.md",[207,208],{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":209,"categoryName":210,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000037","律师与法务",[212,213,214,215,111,216,217,70,218,172,219,220,221,222,223,124,224,225,226],"agent constitution","constitution","contracts","tree","query","base","log","check","Rules","projects","compliance","actions","state","governance","github"]