{
  "schemaVersion": "1.0",
  "item": {
    "slug": "tailwind-design-system",
    "name": "Tailwind Design System",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/wpank/tailwind-design-system",
    "canonicalUrl": "https://clawhub.ai/wpank/tailwind-design-system",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/tailwind-design-system",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwind-design-system",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "tailwind-design-system",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-04T01:23:37.355Z",
      "expiresAt": "2026-05-11T01:23:37.355Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwind-design-system",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwind-design-system",
        "contentDisposition": "attachment; filename=\"tailwind-design-system-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "tailwind-design-system"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/tailwind-design-system"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/tailwind-design-system",
    "agentPageUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Tailwind Design System",
        "body": "Build production-ready component libraries with Tailwind CSS using CVA, compound components, design tokens, and theming."
      },
      {
        "title": "WHAT",
        "body": "Patterns for scalable Tailwind-based design systems:\n\nClass Variance Authority (CVA) for type-safe variants\nCompound component architecture\nCSS variable-based theming\nDark mode implementation\nResponsive grid systems\nAnimation utilities"
      },
      {
        "title": "WHEN",
        "body": "Building a component library with Tailwind\nImplementing design tokens and theming\nCreating reusable UI components with variants\nSetting up dark mode\nStandardizing patterns across a codebase"
      },
      {
        "title": "KEYWORDS",
        "body": "tailwind, cva, design system, component library, variants, theming, dark mode, design tokens, shadcn, compound components, tailwind-merge\n\nRelated skills: tailwind-v4-shadcn for Tailwind v4 setup and migration"
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install tailwind-design-system"
      },
      {
        "title": "Utility Function",
        "body": "// lib/utils.ts\nimport { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}"
      },
      {
        "title": "Design Token Architecture",
        "body": "Primitive Tokens (abstract)\n    └── Semantic Tokens (purpose)\n        └── Component Tokens (specific)\n\nExample:\n    slate-900 → foreground → card-title-color"
      },
      {
        "title": "Pattern 1: CVA Components",
        "body": "Class Variance Authority for type-safe, variant-based components:\n\n// components/ui/button.tsx\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { forwardRef } from 'react'\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n  // Base styles (always applied)\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 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\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: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n\nUsage:\n\n<Button variant=\"destructive\" size=\"lg\">Delete</Button>\n<Button variant=\"outline\">Cancel</Button>\n<Button variant=\"ghost\" size=\"icon\"><Search /></Button>"
      },
      {
        "title": "Pattern 2: Compound Components",
        "body": "Composable components with shared context:\n\n// components/ui/card.tsx\nimport { cn } from '@/lib/utils'\nimport { forwardRef } from 'react'\n\nconst Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}\n      {...props}\n    />\n  )\n)\nCard.displayName = 'Card'\n\nconst CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />\n  )\n)\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />\n  )\n)\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />\n  )\n)\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n  )\n)\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />\n  )\n)\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }\n\nUsage:\n\n<Card>\n  <CardHeader>\n    <CardTitle>Account Settings</CardTitle>\n    <CardDescription>Manage your account preferences</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <form>{/* form fields */}</form>\n  </CardContent>\n  <CardFooter>\n    <Button>Save Changes</Button>\n  </CardFooter>\n</Card>"
      },
      {
        "title": "Pattern 3: Form Components with Validation",
        "body": "// components/ui/input.tsx\nimport { forwardRef } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  error?: string\n}\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, error, ...props }, ref) => {\n    return (\n      <div className=\"relative\">\n        <input\n          type={type}\n          className={cn(\n            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background',\n            'file:border-0 file:bg-transparent file:text-sm file:font-medium',\n            'placeholder:text-muted-foreground',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            '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        />\n        {error && (\n          <p id={`${props.id}-error`} className=\"mt-1 text-sm text-destructive\" role=\"alert\">\n            {error}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input }"
      },
      {
        "title": "Pattern 4: Grid System",
        "body": "// components/ui/grid.tsx\nimport { cn } from '@/lib/utils'\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    },\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 extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {}\n\nexport function Grid({ className, cols, gap, ...props }: GridProps) {\n  return <div className={cn(gridVariants({ cols, gap, className }))} {...props} />\n}\n\n// 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 extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {}\n\nexport function Container({ className, size, ...props }: ContainerProps) {\n  return <div className={cn(containerVariants({ size, className }))} {...props} />\n}\n\nUsage:\n\n<Container>\n  <Grid cols={4} gap=\"lg\">\n    {products.map(product => (\n      <ProductCard key={product.id} product={product} />\n    ))}\n  </Grid>\n</Container>"
      },
      {
        "title": "Theme Provider",
        "body": "// providers/theme-provider.tsx\n'use client'\n\nimport { createContext, useContext, useEffect, useState } from 'react'\n\ntype Theme = 'dark' | 'light' | 'system'\n\ninterface ThemeContextType {\n  theme: Theme\n  setTheme: (theme: Theme) => void\n  resolvedTheme: 'dark' | 'light'\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined)\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'theme',\n}: {\n  children: React.ReactNode\n  defaultTheme?: Theme\n  storageKey?: string\n}) {\n  const [theme, setTheme] = useState<Theme>(defaultTheme)\n  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('light')\n\n  useEffect(() => {\n    const stored = localStorage.getItem(storageKey) as Theme | null\n    if (stored) setTheme(stored)\n  }, [storageKey])\n\n  useEffect(() => {\n    const root = window.document.documentElement\n    root.classList.remove('light', 'dark')\n\n    const resolved = theme === 'system'\n      ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n      : theme\n\n    root.classList.add(resolved)\n    setResolvedTheme(resolved)\n  }, [theme])\n\n  return (\n    <ThemeContext.Provider value={{\n      theme,\n      setTheme: (t) => { localStorage.setItem(storageKey, t); setTheme(t) },\n      resolvedTheme,\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext)\n  if (!context) throw new Error('useTheme must be used within ThemeProvider')\n  return context\n}"
      },
      {
        "title": "Theme Toggle",
        "body": "import { Moon, Sun } from 'lucide-react'\nimport { useTheme } from '@/providers/theme-provider'\nimport { Button } from '@/components/ui/button'\n\nexport function ThemeToggle() {\n  const { resolvedTheme, setTheme } = useTheme()\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}\n    >\n      <Sun className=\"h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n      <Moon className=\"absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}"
      },
      {
        "title": "Animation Utilities",
        "body": "// lib/animations.ts\nimport { cn } from './utils'\n\nexport const fadeIn = 'animate-in fade-in duration-300'\nexport const fadeOut = 'animate-out fade-out duration-300'\nexport const slideInFromTop = 'animate-in slide-in-from-top duration-300'\nexport const slideInFromBottom = 'animate-in slide-in-from-bottom duration-300'\nexport const zoomIn = 'animate-in zoom-in-95 duration-300'\nexport const zoomOut = 'animate-out zoom-out-95 duration-300'\n\n// Compound animations\nexport const modalEnter = cn(fadeIn, zoomIn, 'duration-200')\nexport const modalExit = cn(fadeOut, zoomOut, 'duration-200')\nexport const dropdownEnter = cn(fadeIn, slideInFromTop, 'duration-150')"
      },
      {
        "title": "Do",
        "body": "Use CSS variables for theming (enables runtime switching)\nCompose variants with CVA (type-safe, explicit)\nUse semantic color names (primary not blue-500)\nForward refs for composition\nAdd accessibility attributes (ARIA, focus states)\nUse tailwind-merge to handle class conflicts"
      },
      {
        "title": "Don't",
        "body": "Use arbitrary values when you can extend the theme\nNest @apply deeply (hurts readability)\nSkip focus states (keyboard users need them)\nHardcode colors (use semantic tokens)\nForget to test dark mode"
      },
      {
        "title": "NEVER",
        "body": "Use hardcoded colors like bg-blue-500 for semantic purposes (use bg-primary)\nSkip focus-visible styles on interactive elements\nMix arbitrary values with design tokens inconsistently\nForget forwardRef on reusable components\nUse !important to override styles (fix the cascade instead)"
      }
    ],
    "body": "Tailwind Design System\n\nBuild production-ready component libraries with Tailwind CSS using CVA, compound components, design tokens, and theming.\n\nWHAT\n\nPatterns for scalable Tailwind-based design systems:\n\nClass Variance Authority (CVA) for type-safe variants\nCompound component architecture\nCSS variable-based theming\nDark mode implementation\nResponsive grid systems\nAnimation utilities\nWHEN\nBuilding a component library with Tailwind\nImplementing design tokens and theming\nCreating reusable UI components with variants\nSetting up dark mode\nStandardizing patterns across a codebase\nKEYWORDS\n\ntailwind, cva, design system, component library, variants, theming, dark mode, design tokens, shadcn, compound components, tailwind-merge\n\nRelated skills: tailwind-v4-shadcn for Tailwind v4 setup and migration\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install tailwind-design-system\n\nCore Setup\nUtility Function\n// lib/utils.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\nDesign Token Architecture\nPrimitive Tokens (abstract)\n    └── Semantic Tokens (purpose)\n        └── Component Tokens (specific)\n\nExample:\n    slate-900 → foreground → card-title-color\n\nPattern 1: CVA Components\n\nClass Variance Authority for type-safe, variant-based components:\n\n// components/ui/button.tsx\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { forwardRef } from 'react'\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n  // Base styles (always applied)\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 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\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: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n\n\nUsage:\n\n<Button variant=\"destructive\" size=\"lg\">Delete</Button>\n<Button variant=\"outline\">Cancel</Button>\n<Button variant=\"ghost\" size=\"icon\"><Search /></Button>\n\nPattern 2: Compound Components\n\nComposable components with shared context:\n\n// components/ui/card.tsx\nimport { cn } from '@/lib/utils'\nimport { forwardRef } from 'react'\n\nconst Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}\n      {...props}\n    />\n  )\n)\nCard.displayName = 'Card'\n\nconst CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />\n  )\n)\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />\n  )\n)\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />\n  )\n)\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n  )\n)\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />\n  )\n)\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }\n\n\nUsage:\n\n<Card>\n  <CardHeader>\n    <CardTitle>Account Settings</CardTitle>\n    <CardDescription>Manage your account preferences</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <form>{/* form fields */}</form>\n  </CardContent>\n  <CardFooter>\n    <Button>Save Changes</Button>\n  </CardFooter>\n</Card>\n\nPattern 3: Form Components with Validation\n// components/ui/input.tsx\nimport { forwardRef } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  error?: string\n}\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, error, ...props }, ref) => {\n    return (\n      <div className=\"relative\">\n        <input\n          type={type}\n          className={cn(\n            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background',\n            'file:border-0 file:bg-transparent file:text-sm file:font-medium',\n            'placeholder:text-muted-foreground',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            '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        />\n        {error && (\n          <p id={`${props.id}-error`} className=\"mt-1 text-sm text-destructive\" role=\"alert\">\n            {error}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input }\n\nPattern 4: Grid System\n// components/ui/grid.tsx\nimport { cn } from '@/lib/utils'\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    },\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 extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {}\n\nexport function Grid({ className, cols, gap, ...props }: GridProps) {\n  return <div className={cn(gridVariants({ cols, gap, className }))} {...props} />\n}\n\n// 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 extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {}\n\nexport function Container({ className, size, ...props }: ContainerProps) {\n  return <div className={cn(containerVariants({ size, className }))} {...props} />\n}\n\n\nUsage:\n\n<Container>\n  <Grid cols={4} gap=\"lg\">\n    {products.map(product => (\n      <ProductCard key={product.id} product={product} />\n    ))}\n  </Grid>\n</Container>\n\nPattern 5: Dark Mode\nTheme Provider\n// providers/theme-provider.tsx\n'use client'\n\nimport { createContext, useContext, useEffect, useState } from 'react'\n\ntype Theme = 'dark' | 'light' | 'system'\n\ninterface ThemeContextType {\n  theme: Theme\n  setTheme: (theme: Theme) => void\n  resolvedTheme: 'dark' | 'light'\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined)\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'theme',\n}: {\n  children: React.ReactNode\n  defaultTheme?: Theme\n  storageKey?: string\n}) {\n  const [theme, setTheme] = useState<Theme>(defaultTheme)\n  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('light')\n\n  useEffect(() => {\n    const stored = localStorage.getItem(storageKey) as Theme | null\n    if (stored) setTheme(stored)\n  }, [storageKey])\n\n  useEffect(() => {\n    const root = window.document.documentElement\n    root.classList.remove('light', 'dark')\n\n    const resolved = theme === 'system'\n      ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n      : theme\n\n    root.classList.add(resolved)\n    setResolvedTheme(resolved)\n  }, [theme])\n\n  return (\n    <ThemeContext.Provider value={{\n      theme,\n      setTheme: (t) => { localStorage.setItem(storageKey, t); setTheme(t) },\n      resolvedTheme,\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext)\n  if (!context) throw new Error('useTheme must be used within ThemeProvider')\n  return context\n}\n\nTheme Toggle\nimport { Moon, Sun } from 'lucide-react'\nimport { useTheme } from '@/providers/theme-provider'\nimport { Button } from '@/components/ui/button'\n\nexport function ThemeToggle() {\n  const { resolvedTheme, setTheme } = useTheme()\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}\n    >\n      <Sun className=\"h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n      <Moon className=\"absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}\n\nAnimation Utilities\n// lib/animations.ts\nimport { cn } from './utils'\n\nexport const fadeIn = 'animate-in fade-in duration-300'\nexport const fadeOut = 'animate-out fade-out duration-300'\nexport const slideInFromTop = 'animate-in slide-in-from-top duration-300'\nexport const slideInFromBottom = 'animate-in slide-in-from-bottom duration-300'\nexport const zoomIn = 'animate-in zoom-in-95 duration-300'\nexport const zoomOut = 'animate-out zoom-out-95 duration-300'\n\n// Compound animations\nexport const modalEnter = cn(fadeIn, zoomIn, 'duration-200')\nexport const modalExit = cn(fadeOut, zoomOut, 'duration-200')\nexport const dropdownEnter = cn(fadeIn, slideInFromTop, 'duration-150')\n\nBest Practices\nDo\nUse CSS variables for theming (enables runtime switching)\nCompose variants with CVA (type-safe, explicit)\nUse semantic color names (primary not blue-500)\nForward refs for composition\nAdd accessibility attributes (ARIA, focus states)\nUse tailwind-merge to handle class conflicts\nDon't\nUse arbitrary values when you can extend the theme\nNest @apply deeply (hurts readability)\nSkip focus states (keyboard users need them)\nHardcode colors (use semantic tokens)\nForget to test dark mode\nNEVER\nUse hardcoded colors like bg-blue-500 for semantic purposes (use bg-primary)\nSkip focus-visible styles on interactive elements\nMix arbitrary values with design tokens inconsistently\nForget forwardRef on reusable components\nUse !important to override styles (fix the cascade instead)"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/tailwind-design-system",
    "publisherUrl": "https://clawhub.ai/wpank/tailwind-design-system",
    "owner": "wpank",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/tailwind-design-system",
    "downloadUrl": "https://openagent3.xyz/downloads/tailwind-design-system",
    "agentUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwind-design-system/agent.md"
  }
}