[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719RCMJ8XJ1KB5H2TC8BQRN":3,"skill-same:01M719RCMJ8XJ1KB5H2TC8BQRN":84},{"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":30,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M719RCMJ8XJ1KB5H2TC8BQRN","tailwind-design-system",null,"Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.","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\u002Ftailwind-design-system\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],"system","design","tailwind design system","design system","Tailwind","ui","design tokens","Scalable","systems","ui patterns","build","component","libraries","with","when","design systems","use","implementing","tokens","css","2026-11-10 10:12:30",false,"---\nname: tailwind-design-system\ndescription: Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.\n---\n\n# Tailwind Design System (v4)\n\nBuild production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.\n\n> **Note**: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the [upgrade guide](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fupgrade-guide).\n\n## When to Use This Skill\n\n- Creating a component library with Tailwind v4\n- Implementing design tokens and theming with CSS-first configuration\n- Building responsive and accessible components\n- Standardizing UI patterns across a codebase\n- Migrating from Tailwind v3 to v4\n- Setting up dark mode with native CSS features\n\n## Key v4 Changes\n\n| v3 Pattern                            | v4 Pattern                                                            |\n| ------------------------------------- | --------------------------------------------------------------------- |\n| `tailwind.config.ts`                  | `@theme` in CSS                                                       |\n| `@tailwind base\u002Fcomponents\u002Futilities` | `@import \"tailwindcss\"`                                               |\n| `darkMode: \"class\"`                   | `@custom-variant dark (&:where(.dark, .dark *))`                      |\n| `theme.extend.colors`                 | `@theme { --color-*: value }`                                         |\n| `require(\"tailwindcss-animate\")`      | CSS `@keyframes` in `@theme` + `@starting-style` for entry animations |\n\n## Quick Start\n\n```css\n\u002F* app.css - Tailwind v4 CSS-first configuration *\u002F\n@import \"tailwindcss\";\n\n\u002F* Define your theme with @theme *\u002F\n@theme {\n  \u002F* Semantic color tokens using OKLCH for better color perception *\u002F\n  --color-background: oklch(100% 0 0);\n  --color-foreground: oklch(14.5% 0.025 264);\n\n  --color-primary: oklch(14.5% 0.025 264);\n  --color-primary-foreground: oklch(98% 0.01 264);\n\n  --color-secondary: oklch(96% 0.01 264);\n  --color-secondary-foreground: oklch(14.5% 0.025 264);\n\n  --color-muted: oklch(96% 0.01 264);\n  --color-muted-foreground: oklch(46% 0.02 264);\n\n  --color-accent: oklch(96% 0.01 264);\n  --color-accent-foreground: oklch(14.5% 0.025 264);\n\n  --color-destructive: oklch(53% 0.22 27);\n  --color-destructive-foreground: oklch(98% 0.01 264);\n\n  --color-border: oklch(91% 0.01 264);\n  --color-ring: oklch(14.5% 0.025 264);\n\n  --color-card: oklch(100% 0 0);\n  --color-card-foreground: oklch(14.5% 0.025 264);\n\n  \u002F* Ring offset for focus states *\u002F\n  --color-ring-offset: oklch(100% 0 0);\n\n  \u002F* Radius tokens *\u002F\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n\n  \u002F* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables *\u002F\n  --animate-fade-in: fade-in 0.2s ease-out;\n  --animate-fade-out: fade-out 0.2s ease-in;\n  --animate-slide-in: slide-in 0.3s ease-out;\n  --animate-slide-out: slide-out 0.3s ease-in;\n\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-in {\n    from {\n      transform: translateY(-0.5rem);\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slide-out {\n    from {\n      transform: translateY(0);\n      opacity: 1;\n    }\n    to {\n      transform: translateY(-0.5rem);\n      opacity: 0;\n    }\n  }\n}\n\n\u002F* Dark mode variant - use @custom-variant for class-based dark mode *\u002F\n@custom-variant dark (&:where(.dark, .dark *));\n\n\u002F* Dark mode theme overrides *\u002F\n.dark {\n  --color-background: oklch(14.5% 0.025 264);\n  --color-foreground: oklch(98% 0.01 264);\n\n  --color-primary: oklch(98% 0.01 264);\n  --color-primary-foreground: oklch(14.5% 0.025 264);\n\n  --color-secondary: oklch(22% 0.02 264);\n  --color-secondary-foreground: oklch(98% 0.01 264);\n\n  --color-muted: oklch(22% 0.02 264);\n  --color-muted-foreground: oklch(65% 0.02 264);\n\n  --color-accent: oklch(22% 0.02 264);\n  --color-accent-foreground: oklch(98% 0.01 264);\n\n  --color-destructive: oklch(42% 0.15 27);\n  --color-destructive-foreground: oklch(98% 0.01 264);\n\n  --color-border: oklch(22% 0.02 264);\n  --color-ring: oklch(83% 0.02 264);\n\n  --color-card: oklch(14.5% 0.025 264);\n  --color-card-foreground: oklch(98% 0.01 264);\n\n  --color-ring-offset: oklch(14.5% 0.025 264);\n}\n\n\u002F* Base styles *\u002F\n@layer base {\n  * {\n    @apply border-border;\n  }\n\n  body {\n    @apply bg-background text-foreground antialiased;\n  }\n}\n```\n\n## Core Concepts\n\n### 1. Design Token Hierarchy\n\n```\nBrand Tokens (abstract)\n    └── Semantic Tokens (purpose)\n        └── Component Tokens (specific)\n\nExample:\n    oklch(45% 0.2 260) → --color-primary → bg-primary\n```\n\n### 2. Component Architecture\n\n```\nBase styles → Variants → Sizes → States → Overrides\n```\n\n## Patterns\n\n### Pattern 1: CVA (Class Variance Authority) Components\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fbutton.tsx\nimport { Slot } from '@radix-ui\u002Freact-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@\u002Flib\u002Futils'\n\nconst buttonVariants = cva(\n  \u002F\u002F Base styles - v4 uses native CSS variables\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary\u002F90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive\u002F90',\n        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary\u002F80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes\u003CHTMLButtonElement>,\n    VariantProps\u003Ctypeof buttonVariants> {\n  asChild?: boolean\n}\n\n\u002F\u002F React 19: No forwardRef needed\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ref,\n  ...props\n}: ButtonProps & { ref?: React.Ref\u003CHTMLButtonElement> }) {\n  const Comp = asChild ? Slot : 'button'\n  return (\n    \u003CComp\n      className={cn(buttonVariants({ variant, size, className }))}\n      ref={ref}\n      {...props}\n    \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CButton variant=\"destructive\" size=\"lg\">Delete\u003C\u002FButton>\n\u003CButton variant=\"outline\">Cancel\u003C\u002FButton>\n\u003CButton asChild>\u003CLink href=\"\u002Fhome\">Home\u003C\u002FLink>\u003C\u002FButton>\n```\n\n### Pattern 2: Compound Components (React 19)\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fcard.tsx\nimport { cn } from '@\u002Flib\u002Futils'\n\n\u002F\u002F React 19: ref is a regular prop, no forwardRef\nexport function Card({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn(\n        'rounded-lg border border-border bg-card text-card-foreground shadow-sm',\n        className\n      )}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardHeader({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardTitle({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLHeadingElement> & { ref?: React.Ref\u003CHTMLHeadingElement> }) {\n  return (\n    \u003Ch3\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardDescription({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLParagraphElement> & { ref?: React.Ref\u003CHTMLParagraphElement> }) {\n  return (\n    \u003Cp\n      ref={ref}\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardContent({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv ref={ref} className={cn('p-6 pt-0', className)} {...props} \u002F>\n  )\n}\n\nexport function CardFooter({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn('flex items-center p-6 pt-0', className)}\n      {...props}\n    \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader>\n    \u003CCardTitle>Account\u003C\u002FCardTitle>\n    \u003CCardDescription>Manage your account settings\u003C\u002FCardDescription>\n  \u003C\u002FCardHeader>\n  \u003CCardContent>\n    \u003Cform>...\u003C\u002Fform>\n  \u003C\u002FCardContent>\n  \u003CCardFooter>\n    \u003CButton>Save\u003C\u002FButton>\n  \u003C\u002FCardFooter>\n\u003C\u002FCard>\n```\n\n### Pattern 3: Form Components\n\n```typescript\n\u002F\u002F components\u002Fui\u002Finput.tsx\nimport { cn } from '@\u002Flib\u002Futils'\n\nexport interface InputProps extends React.InputHTMLAttributes\u003CHTMLInputElement> {\n  error?: string\n  ref?: React.Ref\u003CHTMLInputElement>\n}\n\nexport function Input({ className, type, error, ref, ...props }: InputProps) {\n  return (\n    \u003Cdiv className=\"relative\">\n      \u003Cinput\n        type={type}\n        className={cn(\n          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n          error && 'border-destructive focus-visible:ring-destructive',\n          className\n        )}\n        ref={ref}\n        aria-invalid={!!error}\n        aria-describedby={error ? `${props.id}-error` : undefined}\n        {...props}\n      \u002F>\n      {error && (\n        \u003Cp\n          id={`${props.id}-error`}\n          className=\"mt-1 text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {error}\n        \u003C\u002Fp>\n      )}\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F components\u002Fui\u002Flabel.tsx\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n)\n\nexport function Label({\n  className,\n  ref,\n  ...props\n}: React.LabelHTMLAttributes\u003CHTMLLabelElement> & { ref?: React.Ref\u003CHTMLLabelElement> }) {\n  return (\n    \u003Clabel ref={ref} className={cn(labelVariants(), className)} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Usage with React Hook Form + Zod\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\nimport { z } from 'zod'\n\nconst schema = z.object({\n  email: z.string().email('Invalid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n})\n\nfunction LoginForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: zodResolver(schema),\n  })\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)} className=\"space-y-4\">\n      \u003Cdiv className=\"space-y-2\">\n        \u003CLabel htmlFor=\"email\">Email\u003C\u002FLabel>\n        \u003CInput\n          id=\"email\"\n          type=\"email\"\n          {...register('email')}\n          error={errors.email?.message}\n        \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv className=\"space-y-2\">\n        \u003CLabel htmlFor=\"password\">Password\u003C\u002FLabel>\n        \u003CInput\n          id=\"password\"\n          type=\"password\"\n          {...register('password')}\n          error={errors.password?.message}\n        \u002F>\n      \u003C\u002Fdiv>\n      \u003CButton type=\"submit\" className=\"w-full\">Sign In\u003C\u002FButton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n### Pattern 4: Responsive Grid System\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fgrid.tsx\nimport { cn } from '@\u002Flib\u002Futils'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst gridVariants = cva('grid', {\n  variants: {\n    cols: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 sm:grid-cols-2',\n      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n      5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',\n      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n    },\n  },\n  defaultVariants: {\n    cols: 3,\n    gap: 'md',\n  },\n})\n\ninterface GridProps\n  extends React.HTMLAttributes\u003CHTMLDivElement>,\n    VariantProps\u003Ctypeof gridVariants> {}\n\nexport function Grid({ className, cols, gap, ...props }: GridProps) {\n  return (\n    \u003Cdiv className={cn(gridVariants({ cols, gap, className }))} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Container component\nconst containerVariants = cva('mx-auto w-full px-4 sm:px-6 lg:px-8', {\n  variants: {\n    size: {\n      sm: 'max-w-screen-sm',\n      md: 'max-w-screen-md',\n      lg: 'max-w-screen-lg',\n      xl: 'max-w-screen-xl',\n      '2xl': 'max-w-screen-2xl',\n      full: 'max-w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'xl',\n  },\n})\n\ninterface ContainerProps\n  extends React.HTMLAttributes\u003CHTMLDivElement>,\n    VariantProps\u003Ctypeof containerVariants> {}\n\nexport function Container({ className, size, ...props }: ContainerProps) {\n  return (\n    \u003Cdiv className={cn(containerVariants({ size, className }))} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CContainer>\n  \u003CGrid cols={4} gap=\"lg\">\n    {products.map((product) => (\n      \u003CProductCard key={product.id} product={product} \u002F>\n    ))}\n  \u003C\u002FGrid>\n\u003C\u002FContainer>\n```\n\nFor advanced animation and dark mode patterns, see [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md):\n\n- **Pattern 5: Native CSS Animations** — dialog `@keyframes`, native popover API with `@starting-style`, `allow-discrete` transitions, and a full `DialogContent`\u002F`DialogOverlay` implementation using Radix UI\n- **Pattern 6: Dark Mode** — `ThemeProvider` context with `localStorage` persistence, `prefers-color-scheme` detection, meta `theme-color` update, and a `ThemeToggle` button component\n\n## Utility Functions\n\n```typescript\n\u002F\u002F lib\u002Futils.ts\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n\u002F\u002F Focus ring utility\nexport const focusRing = cn(\n  \"focus-visible:outline-none focus-visible:ring-2\",\n  \"focus-visible:ring-ring focus-visible:ring-offset-2\",\n);\n\n\u002F\u002F Disabled utility\nexport const disabled = \"disabled:pointer-events-none disabled:opacity-50\";\n```\n\nFor advanced v4 CSS patterns, the full v3-to-v4 migration checklist, and complete best practices, see [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md):\n\n- **Custom `@utility`** — reusable CSS utilities for decorative lines and text gradients\n- **Theme modifiers** — `@theme inline` (reference other CSS vars), `@theme static` (always output), `@import \"tailwindcss\" theme(static)`\n- **Namespace overrides** — clearing default Tailwind color scales with `--color-*: initial`\n- **Semi-transparent variants** — `color-mix()` for alpha scale generation\n- **Container queries** — `--container-*` token definitions\n- **v3→v4 migration checklist** — 10-item checklist covering config, directives, colors, dark mode, animations, React 19 ref changes\n- **Best practices** — full Do's and Don'ts list\n","# Tailwind Design System (v4)\n\nBuild production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, responsive patterns, and accessibility.\n\n> **Note**: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the [upgrade guide](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fupgrade-guide).\n\n## When to Use This Skill\n\n- Creating a component library with Tailwind v4\n- Implementing design tokens and theming with CSS-first configuration\n- Building responsive and accessible components\n- Standardizing UI patterns across a codebase\n- Migrating from Tailwind v3 to v4\n- Setting up dark mode with native CSS features\n\n## Key v4 Changes\n\n| v3 Pattern                            | v4 Pattern                                                            |\n| ------------------------------------- | --------------------------------------------------------------------- |\n| `tailwind.config.ts`                  | `@theme` in CSS                                                       |\n| `@tailwind base\u002Fcomponents\u002Futilities` | `@import \"tailwindcss\"`                                               |\n| `darkMode: \"class\"`                   | `@custom-variant dark (&:where(.dark, .dark *))`                      |\n| `theme.extend.colors`                 | `@theme { --color-*: value }`                                         |\n| `require(\"tailwindcss-animate\")`      | CSS `@keyframes` in `@theme` + `@starting-style` for entry animations |\n\n## Quick Start\n\n```css\n\u002F* app.css - Tailwind v4 CSS-first configuration *\u002F\n@import \"tailwindcss\";\n\n\u002F* Define your theme with @theme *\u002F\n@theme {\n  \u002F* Semantic color tokens using OKLCH for better color perception *\u002F\n  --color-background: oklch(100% 0 0);\n  --color-foreground: oklch(14.5% 0.025 264);\n\n  --color-primary: oklch(14.5% 0.025 264);\n  --color-primary-foreground: oklch(98% 0.01 264);\n\n  --color-secondary: oklch(96% 0.01 264);\n  --color-secondary-foreground: oklch(14.5% 0.025 264);\n\n  --color-muted: oklch(96% 0.01 264);\n  --color-muted-foreground: oklch(46% 0.02 264);\n\n  --color-accent: oklch(96% 0.01 264);\n  --color-accent-foreground: oklch(14.5% 0.025 264);\n\n  --color-destructive: oklch(53% 0.22 27);\n  --color-destructive-foreground: oklch(98% 0.01 264);\n\n  --color-border: oklch(91% 0.01 264);\n  --color-ring: oklch(14.5% 0.025 264);\n\n  --color-card: oklch(100% 0 0);\n  --color-card-foreground: oklch(14.5% 0.025 264);\n\n  \u002F* Ring offset for focus states *\u002F\n  --color-ring-offset: oklch(100% 0 0);\n\n  \u002F* Radius tokens *\u002F\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n\n  \u002F* Animation tokens - keyframes inside @theme are output when referenced by --animate-* variables *\u002F\n  --animate-fade-in: fade-in 0.2s ease-out;\n  --animate-fade-out: fade-out 0.2s ease-in;\n  --animate-slide-in: slide-in 0.3s ease-out;\n  --animate-slide-out: slide-out 0.3s ease-in;\n\n  @keyframes fade-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-in {\n    from {\n      transform: translateY(-0.5rem);\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slide-out {\n    from {\n      transform: translateY(0);\n      opacity: 1;\n    }\n    to {\n      transform: translateY(-0.5rem);\n      opacity: 0;\n    }\n  }\n}\n\n\u002F* Dark mode variant - use @custom-variant for class-based dark mode *\u002F\n@custom-variant dark (&:where(.dark, .dark *));\n\n\u002F* Dark mode theme overrides *\u002F\n.dark {\n  --color-background: oklch(14.5% 0.025 264);\n  --color-foreground: oklch(98% 0.01 264);\n\n  --color-primary: oklch(98% 0.01 264);\n  --color-primary-foreground: oklch(14.5% 0.025 264);\n\n  --color-secondary: oklch(22% 0.02 264);\n  --color-secondary-foreground: oklch(98% 0.01 264);\n\n  --color-muted: oklch(22% 0.02 264);\n  --color-muted-foreground: oklch(65% 0.02 264);\n\n  --color-accent: oklch(22% 0.02 264);\n  --color-accent-foreground: oklch(98% 0.01 264);\n\n  --color-destructive: oklch(42% 0.15 27);\n  --color-destructive-foreground: oklch(98% 0.01 264);\n\n  --color-border: oklch(22% 0.02 264);\n  --color-ring: oklch(83% 0.02 264);\n\n  --color-card: oklch(14.5% 0.025 264);\n  --color-card-foreground: oklch(98% 0.01 264);\n\n  --color-ring-offset: oklch(14.5% 0.025 264);\n}\n\n\u002F* Base styles *\u002F\n@layer base {\n  * {\n    @apply border-border;\n  }\n\n  body {\n    @apply bg-background text-foreground antialiased;\n  }\n}\n```\n\n## Core Concepts\n\n### 1. Design Token Hierarchy\n\n```\nBrand Tokens (abstract)\n    └── Semantic Tokens (purpose)\n        └── Component Tokens (specific)\n\nExample:\n    oklch(45% 0.2 260) → --color-primary → bg-primary\n```\n\n### 2. Component Architecture\n\n```\nBase styles → Variants → Sizes → States → Overrides\n```\n\n## Patterns\n\n### Pattern 1: CVA (Class Variance Authority) Components\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fbutton.tsx\nimport { Slot } from '@radix-ui\u002Freact-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@\u002Flib\u002Futils'\n\nconst buttonVariants = cva(\n  \u002F\u002F Base styles - v4 uses native CSS variables\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary\u002F90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive\u002F90',\n        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary\u002F80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes\u003CHTMLButtonElement>,\n    VariantProps\u003Ctypeof buttonVariants> {\n  asChild?: boolean\n}\n\n\u002F\u002F React 19: No forwardRef needed\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ref,\n  ...props\n}: ButtonProps & { ref?: React.Ref\u003CHTMLButtonElement> }) {\n  const Comp = asChild ? Slot : 'button'\n  return (\n    \u003CComp\n      className={cn(buttonVariants({ variant, size, className }))}\n      ref={ref}\n      {...props}\n    \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CButton variant=\"destructive\" size=\"lg\">Delete\u003C\u002FButton>\n\u003CButton variant=\"outline\">Cancel\u003C\u002FButton>\n\u003CButton asChild>\u003CLink href=\"\u002Fhome\">Home\u003C\u002FLink>\u003C\u002FButton>\n```\n\n### Pattern 2: Compound Components (React 19)\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fcard.tsx\nimport { cn } from '@\u002Flib\u002Futils'\n\n\u002F\u002F React 19: ref is a regular prop, no forwardRef\nexport function Card({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn(\n        'rounded-lg border border-border bg-card text-card-foreground shadow-sm',\n        className\n      )}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardHeader({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardTitle({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLHeadingElement> & { ref?: React.Ref\u003CHTMLHeadingElement> }) {\n  return (\n    \u003Ch3\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardDescription({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLParagraphElement> & { ref?: React.Ref\u003CHTMLParagraphElement> }) {\n  return (\n    \u003Cp\n      ref={ref}\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    \u002F>\n  )\n}\n\nexport function CardContent({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv ref={ref} className={cn('p-6 pt-0', className)} {...props} \u002F>\n  )\n}\n\nexport function CardFooter({\n  className,\n  ref,\n  ...props\n}: React.HTMLAttributes\u003CHTMLDivElement> & { ref?: React.Ref\u003CHTMLDivElement> }) {\n  return (\n    \u003Cdiv\n      ref={ref}\n      className={cn('flex items-center p-6 pt-0', className)}\n      {...props}\n    \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader>\n    \u003CCardTitle>Account\u003C\u002FCardTitle>\n    \u003CCardDescription>Manage your account settings\u003C\u002FCardDescription>\n  \u003C\u002FCardHeader>\n  \u003CCardContent>\n    \u003Cform>...\u003C\u002Fform>\n  \u003C\u002FCardContent>\n  \u003CCardFooter>\n    \u003CButton>Save\u003C\u002FButton>\n  \u003C\u002FCardFooter>\n\u003C\u002FCard>\n```\n\n### Pattern 3: Form Components\n\n```typescript\n\u002F\u002F components\u002Fui\u002Finput.tsx\nimport { cn } from '@\u002Flib\u002Futils'\n\nexport interface InputProps extends React.InputHTMLAttributes\u003CHTMLInputElement> {\n  error?: string\n  ref?: React.Ref\u003CHTMLInputElement>\n}\n\nexport function Input({ className, type, error, ref, ...props }: InputProps) {\n  return (\n    \u003Cdiv className=\"relative\">\n      \u003Cinput\n        type={type}\n        className={cn(\n          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n          error && 'border-destructive focus-visible:ring-destructive',\n          className\n        )}\n        ref={ref}\n        aria-invalid={!!error}\n        aria-describedby={error ? `${props.id}-error` : undefined}\n        {...props}\n      \u002F>\n      {error && (\n        \u003Cp\n          id={`${props.id}-error`}\n          className=\"mt-1 text-sm text-destructive\"\n          role=\"alert\"\n        >\n          {error}\n        \u003C\u002Fp>\n      )}\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F components\u002Fui\u002Flabel.tsx\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n)\n\nexport function Label({\n  className,\n  ref,\n  ...props\n}: React.LabelHTMLAttributes\u003CHTMLLabelElement> & { ref?: React.Ref\u003CHTMLLabelElement> }) {\n  return (\n    \u003Clabel ref={ref} className={cn(labelVariants(), className)} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Usage with React Hook Form + Zod\nimport { useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod'\nimport { z } from 'zod'\n\nconst schema = z.object({\n  email: z.string().email('Invalid email address'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n})\n\nfunction LoginForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: zodResolver(schema),\n  })\n\n  return (\n    \u003Cform onSubmit={handleSubmit(onSubmit)} className=\"space-y-4\">\n      \u003Cdiv className=\"space-y-2\">\n        \u003CLabel htmlFor=\"email\">Email\u003C\u002FLabel>\n        \u003CInput\n          id=\"email\"\n          type=\"email\"\n          {...register('email')}\n          error={errors.email?.message}\n        \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv className=\"space-y-2\">\n        \u003CLabel htmlFor=\"password\">Password\u003C\u002FLabel>\n        \u003CInput\n          id=\"password\"\n          type=\"password\"\n          {...register('password')}\n          error={errors.password?.message}\n        \u002F>\n      \u003C\u002Fdiv>\n      \u003CButton type=\"submit\" className=\"w-full\">Sign In\u003C\u002FButton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n### Pattern 4: Responsive Grid System\n\n```typescript\n\u002F\u002F components\u002Fui\u002Fgrid.tsx\nimport { cn } from '@\u002Flib\u002Futils'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst gridVariants = cva('grid', {\n  variants: {\n    cols: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 sm:grid-cols-2',\n      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n      5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',\n      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n    },\n  },\n  defaultVariants: {\n    cols: 3,\n    gap: 'md',\n  },\n})\n\ninterface GridProps\n  extends React.HTMLAttributes\u003CHTMLDivElement>,\n    VariantProps\u003Ctypeof gridVariants> {}\n\nexport function Grid({ className, cols, gap, ...props }: GridProps) {\n  return (\n    \u003Cdiv className={cn(gridVariants({ cols, gap, className }))} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Container component\nconst containerVariants = cva('mx-auto w-full px-4 sm:px-6 lg:px-8', {\n  variants: {\n    size: {\n      sm: 'max-w-screen-sm',\n      md: 'max-w-screen-md',\n      lg: 'max-w-screen-lg',\n      xl: 'max-w-screen-xl',\n      '2xl': 'max-w-screen-2xl',\n      full: 'max-w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'xl',\n  },\n})\n\ninterface ContainerProps\n  extends React.HTMLAttributes\u003CHTMLDivElement>,\n    VariantProps\u003Ctypeof containerVariants> {}\n\nexport function Container({ className, size, ...props }: ContainerProps) {\n  return (\n    \u003Cdiv className={cn(containerVariants({ size, className }))} {...props} \u002F>\n  )\n}\n\n\u002F\u002F Usage\n\u003CContainer>\n  \u003CGrid cols={4} gap=\"lg\">\n    {products.map((product) => (\n      \u003CProductCard key={product.id} product={product} \u002F>\n    ))}\n  \u003C\u002FGrid>\n\u003C\u002FContainer>\n```\n\nFor advanced animation and dark mode patterns, see [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md):\n\n- **Pattern 5: Native CSS Animations** — dialog `@keyframes`, native popover API with `@starting-style`, `allow-discrete` transitions, and a full `DialogContent`\u002F`DialogOverlay` implementation using Radix UI\n- **Pattern 6: Dark Mode** — `ThemeProvider` context with `localStorage` persistence, `prefers-color-scheme` detection, meta `theme-color` update, and a `ThemeToggle` button component\n\n## Utility Functions\n\n```typescript\n\u002F\u002F lib\u002Futils.ts\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n\u002F\u002F Focus ring utility\nexport const focusRing = cn(\n  \"focus-visible:outline-none focus-visible:ring-2\",\n  \"focus-visible:ring-ring focus-visible:ring-offset-2\",\n);\n\n\u002F\u002F Disabled utility\nexport const disabled = \"disabled:pointer-events-none disabled:opacity-50\";\n```\n\nFor advanced v4 CSS patterns, the full v3-to-v4 migration checklist, and complete best practices, see [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md):\n\n- **Custom `@utility`** — reusable CSS utilities for decorative lines and text gradients\n- **Theme modifiers** — `@theme inline` (reference other CSS vars), `@theme static` (always output), `@import \"tailwindcss\" theme(static)`\n- **Namespace overrides** — clearing default Tailwind color scales with `--color-*: initial`\n- **Semi-transparent variants** — `color-mix()` for alpha scale generation\n- **Container queries** — `--container-*` token definitions\n- **v3→v4 migration checklist** — 10-item checklist covering config, directives, colors, dark mode, animations, React 19 ref changes\n- **Best practices** — full Do's and Don'ts list\n",{"name":5,"description":7},"main","13d9afadbb6a87d6209fe4bd6ca2bbe4553119ac",".agents\u002Fskills\u002Ftailwind-design-system",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":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill tailwind-design-system",{"tool":70,"command":71},"bunx","bunx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill tailwind-design-system",{"tool":73,"command":74},"pnpm","pnpm dlx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill tailwind-design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftailwind-design-system\u002FSKILL.md",true,[78],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fadvanced-patterns.md","REFERENCE","参考文档",8108,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fadvanced-patterns.md",[85,100,122,141,165,194],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":89,"sourceHtmlUrl":90,"categories":91,"keywords":95,"publishedAt":51},"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",[92],{"categoryNo":93,"categoryName":94,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[96,97,98,99],"add","add new agent","new","new agent",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":115,"publishedAt":51},"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",[106,109,112],{"categoryNo":107,"categoryName":108,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":113,"categoryName":114,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者",[116,117,98,45,118,119,120,47,121],"writing skills","writing","work","editing","deployment","Existing",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":130,"publishedAt":51},"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",[128,129],{"categoryNo":110,"categoryName":111,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":113,"categoryName":114,"taxonomyType":28,"taxonomyTypeDesc":29},[131,117,132,133,134,135,45,47,136,137,138,139,140],"writing plans","plans","code","requirements","you","for","task","multi","spec","multi-step task",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":149,"publishedAt":51},"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",[147,148],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},[150,151,152,32,153,154,155,156,157,158,159,133,136,160,161,162,47,45,163,164],"web design","web design guidelines","web","guidelines","review","accessibility","ux","audit","compliance","check","vercel","interface","web interface guidelines","best practices","file",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":169,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":174,"publishedAt":51},"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",[172,173],{"categoryNo":107,"categoryName":108,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[167,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193],"cloudflare","cloudflare workers","config","node","sample","react","jest","migrate","configure","Utilities","up","testing","workspace setup","project","unit","SET","coverage","test setup","patterns",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":198,"categories":199,"keywords":200,"publishedAt":51},"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",[],[201,202,203,204,47,205,206,207,208,209,210,211,118,212,213,45],"loops","verification","verification loops","claim","assertions","prs","complete","evidence","running","commands","about","claims","output"]