[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719QY0BAJFJEPR074AVJ73W":3,"skill-same:01M719QY0BAJFJEPR074AVJ73W":122},{"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":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M719QY0BAJFJEPR074AVJ73W","shadcn-ui",null,"Provides complete shadcn\u002Fui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn\u002Fui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.","dahaliztupe-sketch\u002FKalmeron-Two","dahaliztupe-sketch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F271085317?v=4","01M719765Q83P08JCQ1SWNQR0N","01M719766HQBGF44W90MPJKTD2",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\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","zod","buttons","when","ui patterns","implementing","themes","up","write","read","css","Bash","Tailwind","component library","component","react components","react","components","2026-11-10 10:12:30",false,"---\nname: shadcn-ui\ndescription: Provides complete shadcn\u002Fui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn\u002Fui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.\nallowed-tools: Read, Write, Bash, Edit, Glob\n---\n\n# shadcn\u002Fui Component Patterns\n\nBuild accessible, customizable UI components with shadcn\u002Fui, Radix UI, and Tailwind CSS.\n\n## Overview\n\n- Components are **copied into your project** — you own and customize the code\n- Built on **Radix UI** primitives for full accessibility\n- Styled with **Tailwind CSS** and CSS variables for theming\n- CLI-based installation: `npx shadcn@latest add \u003Ccomponent>`\n\n## When to Use\n\nActivate when user requests involve:\n- \"Set up shadcn\u002Fui\", \"initialize shadcn\", \"add shadcn components\"\n- \"Install button\u002Finput\u002Fform\u002Fdialog\u002Fcard\u002Fselect\u002Ftoast\u002Ftable\u002Fchart\"\n- \"React Hook Form\", \"Zod validation\", \"form with validation\"\n- \"accessible components\", \"Radix UI\", \"Tailwind theme\"\n- \"shadcn button\", \"shadcn dialog\", \"shadcn sheet\", \"shadcn table\"\n- \"dark mode\", \"CSS variables\", \"custom theme\"\n- \"charts with Recharts\", \"bar chart\", \"line chart\", \"pie chart\"\n\n## Quick Reference\n\n### Available Components\n\n| Component | Install Command | Description |\n|-----------|----------------|-------------|\n| `button` | `npx shadcn@latest add button` | Variants: default, destructive, outline, secondary, ghost, link |\n| `input` | `npx shadcn@latest add input` | Text input field |\n| `form` | `npx shadcn@latest add form` | React Hook Form integration with validation |\n| `card` | `npx shadcn@latest add card` | Container with header, content, footer |\n| `dialog` | `npx shadcn@latest add dialog` | Modal overlay |\n| `sheet` | `npx shadcn@latest add sheet` | Slide-over panel (top\u002Fright\u002Fbottom\u002Fleft) |\n| `select` | `npx shadcn@latest add select` | Dropdown select |\n| `toast` | `npx shadcn@latest add toast` | Notification toasts |\n| `table` | `npx shadcn@latest add table` | Data table |\n| `menubar` | `npx shadcn@latest add menubar` | Desktop-style menubar |\n| `chart` | `npx shadcn@latest add chart` | Recharts wrapper with theming |\n| `textarea` | `npx shadcn@latest add textarea` | Multi-line text input |\n| `checkbox` | `npx shadcn@latest add checkbox` | Checkbox input |\n| `label` | `npx shadcn@latest add label` | Accessible form label |\n\n## Instructions\n\n### Initialize Project\n\n```bash\n# New Next.js project\nnpx create-next-app@latest my-app --typescript --tailwind --eslint --app\ncd my-app\nnpx shadcn@latest init\n\n# Existing project\nnpm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react\nnpx shadcn@latest init\n\n# Install components\nnpx shadcn@latest add button input form card dialog select toast\n```\n\n### Basic Component Usage\n\n```tsx\n\u002F\u002F Button with variants and sizes\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\n\u003CButton variant=\"default\">Default\u003C\u002FButton>\n\u003CButton variant=\"destructive\" size=\"sm\">Delete\u003C\u002FButton>\n\u003CButton variant=\"outline\" disabled>Loading...\u003C\u002FButton>\n```\n\n### Form with Zod Validation\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 { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\n\nconst formSchema = z.object({\n  email: z.string().email(\"Invalid email\"),\n  password: z.string().min(8, \"Password must be at least 8 characters\"),\n})\n\nexport function LoginForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: { email: \"\", password: \"\" },\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-4\">\n        \u003CFormField name=\"email\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"email\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CFormField name=\"password\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Password\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"password\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\nSee [references\u002Fforms-and-validation.md](references\u002Fforms-and-validation.md) for advanced multi-field forms, contact forms with API submission, and login card patterns.\n\n### Dialog (Modal)\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\n\u003CDialog>\n  \u003CDialogTrigger asChild>\n    \u003CButton variant=\"outline\">Open\u003C\u002FButton>\n  \u003C\u002FDialogTrigger>\n  \u003CDialogContent>\n    \u003CDialogHeader>\n      \u003CDialogTitle>Edit Profile\u003C\u002FDialogTitle>\n    \u003C\u002FDialogHeader>\n    {\u002F* content *\u002F}\n  \u003C\u002FDialogContent>\n\u003C\u002FDialog>\n```\n\n### Toast Notification\n\n```tsx\n\u002F\u002F 1. Add \u003CToaster \u002F> to app\u002Flayout.tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\n\n\u002F\u002F 2. Use in components\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst { toast } = useToast()\ntoast({ title: \"Success\", description: \"Changes saved.\" })\ntoast({ variant: \"destructive\", title: \"Error\", description: \"Something went wrong.\" })\n```\n\n### Bar Chart\n\n```tsx\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { ChartContainer, ChartTooltipContent } from \"@\u002Fcomponents\u002Fui\u002Fchart\"\n\nconst chartConfig = {\n  desktop: { label: \"Desktop\", color: \"var(--chart-1)\" },\n} satisfies import(\"@\u002Fcomponents\u002Fui\u002Fchart\").ChartConfig\n\n\u003CChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n  \u003CBarChart data={data}>\n    \u003CCartesianGrid vertical={false} \u002F>\n    \u003CXAxis dataKey=\"month\" \u002F>\n    \u003CBar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} \u002F>\n    \u003CChartTooltip content={\u003CChartTooltipContent \u002F>} \u002F>\n  \u003C\u002FBarChart>\n\u003C\u002FChartContainer>\n```\n\nSee [references\u002Fcharts-components.md](references\u002Fcharts-components.md) for Line, Area, and Pie chart examples.\n\n## Examples\n\n### Login Form with Validation\n```tsx\n\"use client\"\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\n\nconst formSchema = z.object({\n  email: z.string().email(\"Invalid email\"),\n  password: z.string().min(8, \"Min 8 characters\"),\n})\n\nexport function LoginForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: { email: \"\", password: \"\" },\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-4\">\n        \u003CFormField name=\"email\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"email\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CFormField name=\"password\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Password\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"password\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Data Table with Actions\n```tsx\nimport { ColumnDef } from \"@tanstack\u002Freact-table\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Checkbox } from \"@\u002Fcomponents\u002Fui\u002Fcheckbox\"\nimport { DataTable } from \"@\u002Fcomponents\u002Fui\u002Fdata-table\"\n\nconst columns: ColumnDef\u003CUser>[] = [\n  { id: \"select\", header: ({ table }) => (\n    \u003CCheckbox checked={table.getIsAllPageRowsSelected()} \u002F>\n  ), cell: ({ row }) => (\n    \u003CCheckbox checked={row.getIsSelected()} \u002F>\n  )},\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  { id: \"actions\", cell: ({ row }) => (\n    \u003CButton variant=\"ghost\" size=\"sm\">Edit\u003C\u002FButton>\n  )},\n]\n```\n\n### Dialog with Form\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\n\u003CDialog>\n  \u003CDialogTrigger asChild>\n    \u003CButton variant=\"outline\">Add User\u003C\u002FButton>\n  \u003C\u002FDialogTrigger>\n  \u003CDialogContent>\n    \u003CDialogHeader>\n      \u003CDialogTitle>Add New User\u003C\u002FDialogTitle>\n    \u003C\u002FDialogHeader>\n    {\u002F* \u003CLoginForm \u002F> *\u002F}\n  \u003C\u002FDialogContent>\n\u003C\u002FDialog>\n```\n\n### Toast Notifications\n```tsx\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nconst { toast } = useToast()\n\ntoast({ title: \"Saved\", description: \"Changes saved successfully.\" })\ntoast({ variant: \"destructive\", title: \"Error\", description: \"Failed to save.\" })\n```\n\n## Best Practices\n\n- **Accessibility**: Use Radix UI primitives — ARIA attributes are built in\n- **Client Components**: Add `\"use client\"` for interactive components (hooks, events)\n- **Type Safety**: Use TypeScript and Zod schemas for form validation\n- **Theming**: Configure CSS variables in `globals.css` for consistent design\n- **Customization**: Modify component files directly — you own the code\n- **Path Aliases**: Ensure `@` alias is configured in `tsconfig.json`\n- **Registry Security**: Only install components from trusted registries; review generated code before production use\n- **Dark Mode**: Set up with CSS variables strategy and `next-themes`\n- **Forms**: Always use `Form`, `FormField`, `FormItem`, `FormLabel`, `FormMessage` together\n- **Toaster**: Add `\u003CToaster \u002F>` once to root layout\n\n## Constraints and Warnings\n\n- **Not an NPM Package**: Components are copied to your project; they are not a versioned dependency\n- **Registry Security**: Components from `npx shadcn@latest add` are fetched remotely; always verify the registry source is trusted before installation\n- **Client Components**: Most interactive components require `\"use client\"` directive\n- **Radix Dependencies**: Ensure all `@radix-ui` packages are installed\n- **Tailwind Required**: Components rely on Tailwind CSS utilities\n- **Path Aliases**: Configure `@` alias in `tsconfig.json` for imports\n\n## References\n\nConsult these files for detailed patterns and code examples:\n\n- **[references\u002Fsetup-and-configuration.md](references\u002Fsetup-and-configuration.md)** — Full installation, tsconfig, tailwind config, CSS variables\n- **[references\u002Fui-components.md](references\u002Fui-components.md)** — Button, Input, Card, Dialog, Sheet, Select, Toast, Table, Menubar\n- **[references\u002Fforms-and-validation.md](references\u002Fforms-and-validation.md)** — React Hook Form + Zod, advanced forms, login card, contact form\n- **[references\u002Fcharts-components.md](references\u002Fcharts-components.md)** — Bar, Line, Area, Pie charts with ChartContainer and theming\n- **[references\u002Fnextjs-integration.md](references\u002Fnextjs-integration.md)** — App Router, Server\u002FClient Components, dark mode, metadata\n- **[references\u002Fcustomization.md](references\u002Fcustomization.md)** — Custom variants, CSS variables, cn() utility, extending components\n","# shadcn\u002Fui Component Patterns\n\nBuild accessible, customizable UI components with shadcn\u002Fui, Radix UI, and Tailwind CSS.\n\n## Overview\n\n- Components are **copied into your project** — you own and customize the code\n- Built on **Radix UI** primitives for full accessibility\n- Styled with **Tailwind CSS** and CSS variables for theming\n- CLI-based installation: `npx shadcn@latest add \u003Ccomponent>`\n\n## When to Use\n\nActivate when user requests involve:\n- \"Set up shadcn\u002Fui\", \"initialize shadcn\", \"add shadcn components\"\n- \"Install button\u002Finput\u002Fform\u002Fdialog\u002Fcard\u002Fselect\u002Ftoast\u002Ftable\u002Fchart\"\n- \"React Hook Form\", \"Zod validation\", \"form with validation\"\n- \"accessible components\", \"Radix UI\", \"Tailwind theme\"\n- \"shadcn button\", \"shadcn dialog\", \"shadcn sheet\", \"shadcn table\"\n- \"dark mode\", \"CSS variables\", \"custom theme\"\n- \"charts with Recharts\", \"bar chart\", \"line chart\", \"pie chart\"\n\n## Quick Reference\n\n### Available Components\n\n| Component | Install Command | Description |\n|-----------|----------------|-------------|\n| `button` | `npx shadcn@latest add button` | Variants: default, destructive, outline, secondary, ghost, link |\n| `input` | `npx shadcn@latest add input` | Text input field |\n| `form` | `npx shadcn@latest add form` | React Hook Form integration with validation |\n| `card` | `npx shadcn@latest add card` | Container with header, content, footer |\n| `dialog` | `npx shadcn@latest add dialog` | Modal overlay |\n| `sheet` | `npx shadcn@latest add sheet` | Slide-over panel (top\u002Fright\u002Fbottom\u002Fleft) |\n| `select` | `npx shadcn@latest add select` | Dropdown select |\n| `toast` | `npx shadcn@latest add toast` | Notification toasts |\n| `table` | `npx shadcn@latest add table` | Data table |\n| `menubar` | `npx shadcn@latest add menubar` | Desktop-style menubar |\n| `chart` | `npx shadcn@latest add chart` | Recharts wrapper with theming |\n| `textarea` | `npx shadcn@latest add textarea` | Multi-line text input |\n| `checkbox` | `npx shadcn@latest add checkbox` | Checkbox input |\n| `label` | `npx shadcn@latest add label` | Accessible form label |\n\n## Instructions\n\n### Initialize Project\n\n```bash\n# New Next.js project\nnpx create-next-app@latest my-app --typescript --tailwind --eslint --app\ncd my-app\nnpx shadcn@latest init\n\n# Existing project\nnpm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react\nnpx shadcn@latest init\n\n# Install components\nnpx shadcn@latest add button input form card dialog select toast\n```\n\n### Basic Component Usage\n\n```tsx\n\u002F\u002F Button with variants and sizes\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\n\u003CButton variant=\"default\">Default\u003C\u002FButton>\n\u003CButton variant=\"destructive\" size=\"sm\">Delete\u003C\u002FButton>\n\u003CButton variant=\"outline\" disabled>Loading...\u003C\u002FButton>\n```\n\n### Form with Zod Validation\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 { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\n\nconst formSchema = z.object({\n  email: z.string().email(\"Invalid email\"),\n  password: z.string().min(8, \"Password must be at least 8 characters\"),\n})\n\nexport function LoginForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: { email: \"\", password: \"\" },\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-4\">\n        \u003CFormField name=\"email\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"email\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CFormField name=\"password\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Password\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"password\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\nSee [references\u002Fforms-and-validation.md](references\u002Fforms-and-validation.md) for advanced multi-field forms, contact forms with API submission, and login card patterns.\n\n### Dialog (Modal)\n\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\n\u003CDialog>\n  \u003CDialogTrigger asChild>\n    \u003CButton variant=\"outline\">Open\u003C\u002FButton>\n  \u003C\u002FDialogTrigger>\n  \u003CDialogContent>\n    \u003CDialogHeader>\n      \u003CDialogTitle>Edit Profile\u003C\u002FDialogTitle>\n    \u003C\u002FDialogHeader>\n    {\u002F* content *\u002F}\n  \u003C\u002FDialogContent>\n\u003C\u002FDialog>\n```\n\n### Toast Notification\n\n```tsx\n\u002F\u002F 1. Add \u003CToaster \u002F> to app\u002Flayout.tsx\nimport { Toaster } from \"@\u002Fcomponents\u002Fui\u002Ftoaster\"\n\n\u002F\u002F 2. Use in components\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\n\nconst { toast } = useToast()\ntoast({ title: \"Success\", description: \"Changes saved.\" })\ntoast({ variant: \"destructive\", title: \"Error\", description: \"Something went wrong.\" })\n```\n\n### Bar Chart\n\n```tsx\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { ChartContainer, ChartTooltipContent } from \"@\u002Fcomponents\u002Fui\u002Fchart\"\n\nconst chartConfig = {\n  desktop: { label: \"Desktop\", color: \"var(--chart-1)\" },\n} satisfies import(\"@\u002Fcomponents\u002Fui\u002Fchart\").ChartConfig\n\n\u003CChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n  \u003CBarChart data={data}>\n    \u003CCartesianGrid vertical={false} \u002F>\n    \u003CXAxis dataKey=\"month\" \u002F>\n    \u003CBar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} \u002F>\n    \u003CChartTooltip content={\u003CChartTooltipContent \u002F>} \u002F>\n  \u003C\u002FBarChart>\n\u003C\u002FChartContainer>\n```\n\nSee [references\u002Fcharts-components.md](references\u002Fcharts-components.md) for Line, Area, and Pie chart examples.\n\n## Examples\n\n### Login Form with Validation\n```tsx\n\"use client\"\nimport { zodResolver } from \"@hookform\u002Fresolvers\u002Fzod\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from \"@\u002Fcomponents\u002Fui\u002Fform\"\nimport { Input } from \"@\u002Fcomponents\u002Fui\u002Finput\"\n\nconst formSchema = z.object({\n  email: z.string().email(\"Invalid email\"),\n  password: z.string().min(8, \"Min 8 characters\"),\n})\n\nexport function LoginForm() {\n  const form = useForm\u003Cz.infer\u003Ctypeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: { email: \"\", password: \"\" },\n  })\n\n  return (\n    \u003CForm {...form}>\n      \u003Cform onSubmit={form.handleSubmit(console.log)} className=\"space-y-4\">\n        \u003CFormField name=\"email\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Email\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"email\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CFormField name=\"password\" control={form.control} render={({ field }) => (\n          \u003CFormItem>\n            \u003CFormLabel>Password\u003C\u002FFormLabel>\n            \u003CFormControl>\u003CInput type=\"password\" {...field} \u002F>\u003C\u002FFormControl>\n            \u003CFormMessage \u002F>\n          \u003C\u002FFormItem>\n        )} \u002F>\n        \u003CButton type=\"submit\">Login\u003C\u002FButton>\n      \u003C\u002Fform>\n    \u003C\u002FForm>\n  )\n}\n```\n\n### Data Table with Actions\n```tsx\nimport { ColumnDef } from \"@tanstack\u002Freact-table\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Checkbox } from \"@\u002Fcomponents\u002Fui\u002Fcheckbox\"\nimport { DataTable } from \"@\u002Fcomponents\u002Fui\u002Fdata-table\"\n\nconst columns: ColumnDef\u003CUser>[] = [\n  { id: \"select\", header: ({ table }) => (\n    \u003CCheckbox checked={table.getIsAllPageRowsSelected()} \u002F>\n  ), cell: ({ row }) => (\n    \u003CCheckbox checked={row.getIsSelected()} \u002F>\n  )},\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  { id: \"actions\", cell: ({ row }) => (\n    \u003CButton variant=\"ghost\" size=\"sm\">Edit\u003C\u002FButton>\n  )},\n]\n```\n\n### Dialog with Form\n```tsx\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@\u002Fcomponents\u002Fui\u002Fdialog\"\n\n\u003CDialog>\n  \u003CDialogTrigger asChild>\n    \u003CButton variant=\"outline\">Add User\u003C\u002FButton>\n  \u003C\u002FDialogTrigger>\n  \u003CDialogContent>\n    \u003CDialogHeader>\n      \u003CDialogTitle>Add New User\u003C\u002FDialogTitle>\n    \u003C\u002FDialogHeader>\n    {\u002F* \u003CLoginForm \u002F> *\u002F}\n  \u003C\u002FDialogContent>\n\u003C\u002FDialog>\n```\n\n### Toast Notifications\n```tsx\nimport { useToast } from \"@\u002Fcomponents\u002Fui\u002Fuse-toast\"\nimport { Button } from \"@\u002Fcomponents\u002Fui\u002Fbutton\"\n\nconst { toast } = useToast()\n\ntoast({ title: \"Saved\", description: \"Changes saved successfully.\" })\ntoast({ variant: \"destructive\", title: \"Error\", description: \"Failed to save.\" })\n```\n\n## Best Practices\n\n- **Accessibility**: Use Radix UI primitives — ARIA attributes are built in\n- **Client Components**: Add `\"use client\"` for interactive components (hooks, events)\n- **Type Safety**: Use TypeScript and Zod schemas for form validation\n- **Theming**: Configure CSS variables in `globals.css` for consistent design\n- **Customization**: Modify component files directly — you own the code\n- **Path Aliases**: Ensure `@` alias is configured in `tsconfig.json`\n- **Registry Security**: Only install components from trusted registries; review generated code before production use\n- **Dark Mode**: Set up with CSS variables strategy and `next-themes`\n- **Forms**: Always use `Form`, `FormField`, `FormItem`, `FormLabel`, `FormMessage` together\n- **Toaster**: Add `\u003CToaster \u002F>` once to root layout\n\n## Constraints and Warnings\n\n- **Not an NPM Package**: Components are copied to your project; they are not a versioned dependency\n- **Registry Security**: Components from `npx shadcn@latest add` are fetched remotely; always verify the registry source is trusted before installation\n- **Client Components**: Most interactive components require `\"use client\"` directive\n- **Radix Dependencies**: Ensure all `@radix-ui` packages are installed\n- **Tailwind Required**: Components rely on Tailwind CSS utilities\n- **Path Aliases**: Configure `@` alias in `tsconfig.json` for imports\n\n## References\n\nConsult these files for detailed patterns and code examples:\n\n- **[references\u002Fsetup-and-configuration.md](references\u002Fsetup-and-configuration.md)** — Full installation, tsconfig, tailwind config, CSS variables\n- **[references\u002Fui-components.md](references\u002Fui-components.md)** — Button, Input, Card, Dialog, Sheet, Select, Toast, Table, Menubar\n- **[references\u002Fforms-and-validation.md](references\u002Fforms-and-validation.md)** — React Hook Form + Zod, advanced forms, login card, contact form\n- **[references\u002Fcharts-components.md](references\u002Fcharts-components.md)** — Bar, Line, Area, Pie charts with ChartContainer and theming\n- **[references\u002Fnextjs-integration.md](references\u002Fnextjs-integration.md)** — App Router, Server\u002FClient Components, dark mode, metadata\n- **[references\u002Fcustomization.md](references\u002Fcustomization.md)** — Custom variants, CSS variables, cn() utility, extending components\n",{"name":5,"description":7,"allowed-tools":53},"Read, Write, Bash, Edit, Glob","main","13d9afadbb6a87d6209fe4bd6ca2bbe4553119ac",".agents\u002Fskills\u002Fshadcn-ui",0,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two","https:\u002F\u002Fkalmeron-two.vercel.app","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch","2026-10-05 12:24:53",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill shadcn-ui",{"tool":68,"command":69},"bunx","bunx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill shadcn-ui",{"tool":71,"command":72},"pnpm","pnpm dlx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill shadcn-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",true,[76,82,86,90,94,98,102,106,110,114,118],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fchart.md","REFERENCE","参考文档",8297,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fchart.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fcharts-components.md",5889,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fcharts-components.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fcustomization.md",4616,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fcustomization.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fforms-and-validation.md",9666,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fforms-and-validation.md",{"path":95,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Flearn.md",3625,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Flearn.md",{"path":99,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fnextjs-integration.md",4025,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fnextjs-integration.md",{"path":103,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fofficial-ui-reference.md",52210,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fofficial-ui-reference.md",{"path":107,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":108,"sourceHtmlUrl":109},"references\u002Freference.md",14286,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Freference.md",{"path":111,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":112,"sourceHtmlUrl":113},"references\u002Fsetup-and-configuration.md",5879,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fsetup-and-configuration.md",{"path":115,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":116,"sourceHtmlUrl":117},"references\u002Fui-components.md",6769,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fui-components.md",{"path":119,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":120,"sourceHtmlUrl":121},"references\u002Fui-reference.md",41463,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fshadcn-ui\u002Freferences\u002Fui-reference.md",[123,138,161,180,207,234],{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":127,"sourceHtmlUrl":128,"categories":129,"keywords":133,"publishedAt":48},"01M719SWYD9RGS97HJ69PXWY62","add-new-agent","خطوات تفصيليّة لإضافة وكيل ذكاء اصطناعي جديد إلى منصّة Kalmeron من الفكرة إلى الإنتاج","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002FSKILL.md",[130],{"categoryNo":131,"categoryName":132,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[134,135,136,137],"add","add new agent","new","new agent",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":153,"publishedAt":48},"01M719SSKNBA7T5NS7V6DP0PX4","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[144,147,150],{"categoryNo":145,"categoryName":146,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":148,"categoryName":149,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":151,"categoryName":152,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[154,155,136,33,156,157,158,159,160],"writing skills","writing","work","editing","deployment","use","Existing",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":169,"publishedAt":48},"01M719SRFDNKA3044QD3FYZ05R","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[167,168],{"categoryNo":148,"categoryName":149,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":151,"categoryName":152,"taxonomyType":25,"taxonomyTypeDesc":26},[170,155,171,172,173,174,33,159,175,176,177,178,179],"writing plans","plans","code","requirements","you","for","task","multi","spec","multi-step task",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":190,"publishedAt":48},"01M719SPN5FM1JYJSR9DGJQPZ0","web-design-guidelines","Review UI code for Web Interface Guidelines compliance. Use when asked to \"review my UI\", \"check accessibility\", \"audit design\", \"review UX\", or \"check my site against best practices\".","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[186,189],{"categoryNo":187,"categoryName":188,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[191,192,193,194,195,196,197,198,199,200,201,172,175,202,203,204,159,33,205,206],"web design","web design guidelines","web","design","guidelines","review","accessibility","ux","audit","compliance","check","vercel","interface","web interface guidelines","best practices","file",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":211,"licenseFileUrl":6,"sourceHtmlUrl":212,"categories":213,"keywords":216,"publishedAt":48},"01M719SK11T05QYVPTWWYMYY5B","vitest","Set up Vitest testing in any project — detects project type (Cloudflare Workers, React, Node), generates vitest.config.ts, test setup, utilities, and sample tests. Also covers mocking patterns, coverage config, workspace setup, and Jest migration. Trigger with 'set up vitest', 'add tests', 'configure vitest', 'migrate from jest', 'vitest config', 'add unit tests', or 'testing setup'.","MIT","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvitest\u002FSKILL.md",[214,215],{"categoryNo":145,"categoryName":146,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[209,217,218,219,220,221,46,222,223,224,225,37,226,227,228,229,230,231,232,233],"cloudflare","cloudflare workers","config","node","sample","jest","migrate","configure","Utilities","testing","workspace setup","project","unit","SET","coverage","test setup","patterns",{"skillNo":235,"name":236,"nameZh":6,"description":237,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":238,"categories":239,"keywords":240,"publishedAt":48},"01M719SGV9R1N88QWAB7Y925HD","verification-loops","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs. Requires running verification commands and confirming output before making any success claims. Evidence before assertions always.","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fverification-loops\u002FSKILL.md",[],[241,242,243,244,159,245,246,247,248,249,250,251,156,252,253,33],"loops","verification","verification loops","claim","assertions","prs","complete","evidence","running","commands","about","claims","output"]