{
  "schemaVersion": "1.0",
  "item": {
    "slug": "shadcn-theme-default",
    "name": "Shadcn Theme Default",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/guifav/shadcn-theme-default",
    "canonicalUrl": "https://clawhub.ai/guifav/shadcn-theme-default",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/shadcn-theme-default",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=shadcn-theme-default",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "claw.json"
    ],
    "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. 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. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/shadcn-theme-default"
    },
    "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/shadcn-theme-default",
    "agentPageUrl": "https://openagent3.xyz/skills/shadcn-theme-default/agent",
    "manifestUrl": "https://openagent3.xyz/skills/shadcn-theme-default/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/shadcn-theme-default/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. 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. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "shadcn/ui Default Theme — Neutral (Black/White/Gray)",
        "body": "You are a frontend engineer responsible for applying and maintaining the default shadcn/ui Neutral theme across the project. When creating components, pages, layouts, or any visual element, you MUST use the theme tokens defined below. Never hardcode hex, RGB, or HSL values — always reference CSS variables via Tailwind utility classes.\n\nThis skill only modifies CSS and Tailwind configuration files. It never reads or modifies .env, .env.local, or credential files."
      },
      {
        "title": "Planning Protocol (MANDATORY — execute before ANY action)",
        "body": "Before modifying any styling file or component, you MUST complete this planning phase:\n\nUnderstand the request. Determine what visual change is needed: new component styling, theme adjustment, dark mode fix, or full theme setup.\n\n\nSurvey the current state. Check: (a) src/app/globals.css (or equivalent) for existing CSS variables, (b) tailwind.config.ts or @theme directives for Tailwind integration, (c) components.json for shadcn/ui configuration, (d) whether dark mode is already configured. Do NOT read .env or credential files.\n\n\nBuild an execution plan. Write out which files will be created or modified and in what order. Theme variables must be set before component styling.\n\n\nIdentify risks. Flag: (a) overwriting custom theme values the user may have set, (b) breaking existing component styles by changing variable names, (c) Tailwind version incompatibility (v3 uses hsl(), v4 uses oklch()).\n\n\nExecute sequentially. Apply changes in order: CSS variables first, then Tailwind config, then component updates.\n\n\nSummarize. Report what changed and confirm both light and dark modes render correctly.\n\nDo NOT skip this protocol."
      },
      {
        "title": "Theme Architecture",
        "body": "shadcn/ui uses CSS custom properties (variables) following a background/foreground naming convention:\n\nThe background variable (e.g., --primary) is used for the element's fill/background.\nThe foreground variable (e.g., --primary-foreground) is used for text/icons on top of that background.\n\nIn Tailwind, these map to:\n\nbg-primary uses var(--primary)\ntext-primary-foreground uses var(--primary-foreground)\n\nThe color space is OKLCH (Oklab Lightness Chroma Hue), which is perceptually uniform and the default in shadcn/ui since Tailwind v4."
      },
      {
        "title": "Light Mode (:root)",
        "body": ":root {\n  /* Border radius */\n  --radius: 0.625rem;\n\n  /* Core surfaces */\n  --background: oklch(1 0 0);                      /* pure white */\n  --foreground: oklch(0.145 0 0);                   /* near black */\n\n  /* Card */\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n\n  /* Popover */\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n\n  /* Primary — used for main CTA buttons, links, active states */\n  --primary: oklch(0.205 0 0);                      /* very dark gray / near black */\n  --primary-foreground: oklch(0.985 0 0);            /* near white */\n\n  /* Secondary — used for secondary buttons, subtle backgrounds */\n  --secondary: oklch(0.97 0 0);                     /* very light gray */\n  --secondary-foreground: oklch(0.205 0 0);\n\n  /* Muted — used for disabled states, placeholder text backgrounds */\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);              /* medium gray */\n\n  /* Accent — used for hover states, highlighted items */\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n\n  /* Destructive — used for delete buttons, error states */\n  --destructive: oklch(0.577 0.245 27.325);          /* red */\n  --destructive-foreground: oklch(0.985 0 0);\n\n  /* Borders and inputs */\n  --border: oklch(0.922 0 0);                        /* light gray border */\n  --input: oklch(0.922 0 0);                         /* input border */\n  --ring: oklch(0.708 0 0);                          /* focus ring — medium gray */\n\n  /* Chart colors (for Recharts, Chart.js, etc.) */\n  --chart-1: oklch(0.646 0.222 41.116);              /* warm orange */\n  --chart-2: oklch(0.6 0.118 184.704);               /* teal */\n  --chart-3: oklch(0.398 0.07 227.392);              /* dark blue */\n  --chart-4: oklch(0.828 0.189 84.429);              /* yellow-green */\n  --chart-5: oklch(0.769 0.188 70.08);               /* golden */\n\n  /* Sidebar */\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}"
      },
      {
        "title": "Dark Mode (.dark)",
        "body": ".dark {\n  /* Core surfaces */\n  --background: oklch(0.145 0 0);                   /* near black */\n  --foreground: oklch(0.985 0 0);                    /* near white */\n\n  /* Card */\n  --card: oklch(0.205 0 0);                          /* dark gray */\n  --card-foreground: oklch(0.985 0 0);\n\n  /* Popover */\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n\n  /* Primary — inverted for dark mode */\n  --primary: oklch(0.922 0 0);                       /* light gray */\n  --primary-foreground: oklch(0.205 0 0);             /* dark gray */\n\n  /* Secondary */\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n\n  /* Muted */\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n\n  /* Accent */\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n\n  /* Destructive */\n  --destructive: oklch(0.704 0.191 22.216);\n  --destructive-foreground: oklch(0.985 0 0);\n\n  /* Borders and inputs — use alpha channel in dark mode */\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n\n  /* Chart colors (dark mode variants) */\n  --chart-1: oklch(0.488 0.243 264.376);             /* blue-purple */\n  --chart-2: oklch(0.696 0.17 162.48);               /* green-teal */\n  --chart-3: oklch(0.769 0.188 70.08);               /* golden */\n  --chart-4: oklch(0.627 0.265 303.9);               /* purple */\n  --chart-5: oklch(0.645 0.246 16.439);              /* warm red */\n\n  /* Sidebar */\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n}"
      },
      {
        "title": "Tailwind v4 Integration",
        "body": "In Tailwind v4, register the CSS variables as colors using the @theme inline directive. Add this to your main CSS file after the variable definitions:\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}"
      },
      {
        "title": "Tailwind v3 (legacy)",
        "body": "If the project uses Tailwind v3, the variables use HSL format instead of OKLCH. Add to tailwind.config.ts:\n\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n    },\n  },\n};\nexport default config;"
      },
      {
        "title": "Next.js (App Router) with next-themes",
        "body": "npm install next-themes\n\nCreate src/components/shared/theme-provider.tsx:\n\n\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\n\nexport function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;\n}\n\nWrap the app in src/app/layout.tsx:\n\nimport { ThemeProvider } from \"@/components/shared/theme-provider\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body>\n        <ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem disableTransitionOnChange>\n          {children}\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}"
      },
      {
        "title": "Theme Toggle Component",
        "body": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function ThemeToggle() {\n  const { theme, setTheme } = useTheme();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(theme === \"dark\" ? \"light\" : \"dark\")}\n      aria-label=\"Toggle theme\"\n    >\n      <span className=\"sr-only\">Toggle theme</span>\n      {/* Sun icon for light, Moon icon for dark */}\n      <svg\n        className=\"h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\" />\n      </svg>\n      <svg\n        className=\"absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    </Button>\n  );\n}"
      },
      {
        "title": "Nuxt / SvelteKit / Other Frameworks",
        "body": "For non-Next.js frameworks, toggle the .dark class on the <html> element:\n\n// Generic dark mode toggle\nfunction toggleDarkMode() {\n  document.documentElement.classList.toggle(\"dark\");\n  const isDark = document.documentElement.classList.contains(\"dark\");\n  localStorage.setItem(\"theme\", isDark ? \"dark\" : \"light\");\n}\n\n// On page load, respect user preference\nfunction initTheme() {\n  const stored = localStorage.getItem(\"theme\");\n  const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  if (stored === \"dark\" || (!stored && prefersDark)) {\n    document.documentElement.classList.add(\"dark\");\n  }\n}"
      },
      {
        "title": "Available shadcn/ui Components",
        "body": "The following components are available and all respect the theme tokens above. Install via npx shadcn@latest add <component>:\n\nAccordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Empty, Field, Hover Card, Input, Input Group, Input OTP, Item, Kbd, Label, Menubar, Native Select, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip, Typography."
      },
      {
        "title": "Tailwind Utility Class Reference",
        "body": "Use these Tailwind classes to apply theme tokens. NEVER use arbitrary values like bg-[#000] or text-[#fff]."
      },
      {
        "title": "Backgrounds",
        "body": "PurposeClassPage backgroundbg-backgroundCard surfacebg-cardPopover surfacebg-popoverPrimary fill (CTA buttons)bg-primarySecondary fill (secondary buttons)bg-secondaryMuted fill (disabled, subtle)bg-mutedAccent fill (hover, highlight)bg-accentDestructive fill (delete, error)bg-destructiveSidebar backgroundbg-sidebar"
      },
      {
        "title": "Text",
        "body": "PurposeClassBody texttext-foregroundText on primary bgtext-primary-foregroundText on secondary bgtext-secondary-foregroundMuted/placeholder texttext-muted-foregroundText on accent bgtext-accent-foregroundText on destructive bgtext-destructive-foregroundText on card bgtext-card-foreground"
      },
      {
        "title": "Borders",
        "body": "PurposeClassStandard borderborder-borderInput borderborder-inputFocus ringring-ringSidebar borderborder-sidebar-border"
      },
      {
        "title": "Border Radius",
        "body": "PurposeClassSmall radiusrounded-sm (calc(var(--radius) - 4px))Medium radiusrounded-md (calc(var(--radius) - 2px))Large radiusrounded-lg (var(--radius) = 0.625rem)Extra large radiusrounded-xl (calc(var(--radius) + 4px))"
      },
      {
        "title": "Standard Button Variants",
        "body": "// Primary (default) — dark bg, light text\n<Button>Save changes</Button>\n// Uses: bg-primary text-primary-foreground\n\n// Secondary — light bg, dark text\n<Button variant=\"secondary\">Cancel</Button>\n// Uses: bg-secondary text-secondary-foreground\n\n// Destructive — red bg, white text\n<Button variant=\"destructive\">Delete</Button>\n// Uses: bg-destructive text-destructive-foreground\n\n// Outline — transparent bg, border\n<Button variant=\"outline\">Edit</Button>\n// Uses: border-input bg-background text-foreground\n\n// Ghost — no bg, text only\n<Button variant=\"ghost\">More</Button>\n// Uses: text-foreground, hover:bg-accent hover:text-accent-foreground\n\n// Link — text styled as link\n<Button variant=\"link\">Learn more</Button>\n// Uses: text-primary underline"
      },
      {
        "title": "Card Pattern",
        "body": "<div className=\"rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm\">\n  <h3 className=\"text-lg font-semibold text-foreground\">Title</h3>\n  <p className=\"text-sm text-muted-foreground\">Description text</p>\n</div>"
      },
      {
        "title": "Input Pattern",
        "body": "<input\n  className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n  placeholder=\"Enter value...\"\n/>"
      },
      {
        "title": "Alert/Badge Pattern",
        "body": "{/* Info badge */}\n<span className=\"inline-flex items-center rounded-md bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground\">\n  Active\n</span>\n\n{/* Destructive badge */}\n<span className=\"inline-flex items-center rounded-md bg-destructive px-2.5 py-0.5 text-xs font-medium text-destructive-foreground\">\n  Error\n</span>"
      },
      {
        "title": "Full globals.css Template",
        "body": "This is the complete globals.css file for a project using the default Neutral theme:\n\n@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --destructive-foreground: oklch(0.985 0 0);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --destructive-foreground: oklch(0.985 0 0);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
      },
      {
        "title": "components.json (shadcn/ui config)",
        "body": "{\n  \"$schema\": \"https://ui.shadcn.com/schema.json\",\n  \"style\": \"default\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"\",\n    \"css\": \"src/app/globals.css\",\n    \"baseColor\": \"neutral\",\n    \"cssVariables\": true,\n    \"prefix\": \"\"\n  },\n  \"aliases\": {\n    \"components\": \"@/components\",\n    \"utils\": \"@/lib/utils\",\n    \"ui\": \"@/components/ui\",\n    \"lib\": \"@/lib\",\n    \"hooks\": \"@/hooks\"\n  },\n  \"iconLibrary\": \"lucide\"\n}"
      },
      {
        "title": "Rules for the Agent",
        "body": "ALWAYS use theme tokens. Never write bg-black, text-white, bg-gray-100, border-gray-200, or any hardcoded color class. Use bg-background, text-foreground, bg-muted, border-border instead.\n\n\nRespect the background/foreground pairing. If you use bg-primary, the text on top must be text-primary-foreground. Never mix pairs (e.g., never use text-foreground on a bg-primary surface).\n\n\nDark mode is automatic. The CSS variables handle the switch. Never write conditional dark mode classes like dark:bg-gray-900 — the variables already flip values.\n\n\nUse the radius tokens. Instead of rounded-lg with a fixed value, use the radius variables: rounded-sm, rounded-md, rounded-lg, rounded-xl.\n\n\nChart colors follow the sequence. For multi-series charts, use chart-1 through chart-5 in order.\n\n\nSidebar uses its own token set. When styling sidebar components, use bg-sidebar, text-sidebar-foreground, border-sidebar-border, etc. — not the generic tokens.\n\n\nDetect Tailwind version. Check package.json for Tailwind version. If v4+, use OKLCH variables with @theme inline. If v3, use HSL variables with tailwind.config.ts extension.\n\n\nInstalling new components. Use npx shadcn@latest add <component>. The CLI respects components.json and generates components with the correct theme tokens."
      }
    ],
    "body": "shadcn/ui Default Theme — Neutral (Black/White/Gray)\n\nYou are a frontend engineer responsible for applying and maintaining the default shadcn/ui Neutral theme across the project. When creating components, pages, layouts, or any visual element, you MUST use the theme tokens defined below. Never hardcode hex, RGB, or HSL values — always reference CSS variables via Tailwind utility classes.\n\nThis skill only modifies CSS and Tailwind configuration files. It never reads or modifies .env, .env.local, or credential files.\n\nPlanning Protocol (MANDATORY — execute before ANY action)\n\nBefore modifying any styling file or component, you MUST complete this planning phase:\n\nUnderstand the request. Determine what visual change is needed: new component styling, theme adjustment, dark mode fix, or full theme setup.\n\nSurvey the current state. Check: (a) src/app/globals.css (or equivalent) for existing CSS variables, (b) tailwind.config.ts or @theme directives for Tailwind integration, (c) components.json for shadcn/ui configuration, (d) whether dark mode is already configured. Do NOT read .env or credential files.\n\nBuild an execution plan. Write out which files will be created or modified and in what order. Theme variables must be set before component styling.\n\nIdentify risks. Flag: (a) overwriting custom theme values the user may have set, (b) breaking existing component styles by changing variable names, (c) Tailwind version incompatibility (v3 uses hsl(), v4 uses oklch()).\n\nExecute sequentially. Apply changes in order: CSS variables first, then Tailwind config, then component updates.\n\nSummarize. Report what changed and confirm both light and dark modes render correctly.\n\nDo NOT skip this protocol.\n\nTheme Architecture\n\nshadcn/ui uses CSS custom properties (variables) following a background/foreground naming convention:\n\nThe background variable (e.g., --primary) is used for the element's fill/background.\nThe foreground variable (e.g., --primary-foreground) is used for text/icons on top of that background.\n\nIn Tailwind, these map to:\n\nbg-primary uses var(--primary)\ntext-primary-foreground uses var(--primary-foreground)\n\nThe color space is OKLCH (Oklab Lightness Chroma Hue), which is perceptually uniform and the default in shadcn/ui since Tailwind v4.\n\nComplete CSS Variables — Default Neutral Theme\nLight Mode (:root)\n:root {\n  /* Border radius */\n  --radius: 0.625rem;\n\n  /* Core surfaces */\n  --background: oklch(1 0 0);                      /* pure white */\n  --foreground: oklch(0.145 0 0);                   /* near black */\n\n  /* Card */\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n\n  /* Popover */\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n\n  /* Primary — used for main CTA buttons, links, active states */\n  --primary: oklch(0.205 0 0);                      /* very dark gray / near black */\n  --primary-foreground: oklch(0.985 0 0);            /* near white */\n\n  /* Secondary — used for secondary buttons, subtle backgrounds */\n  --secondary: oklch(0.97 0 0);                     /* very light gray */\n  --secondary-foreground: oklch(0.205 0 0);\n\n  /* Muted — used for disabled states, placeholder text backgrounds */\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);              /* medium gray */\n\n  /* Accent — used for hover states, highlighted items */\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n\n  /* Destructive — used for delete buttons, error states */\n  --destructive: oklch(0.577 0.245 27.325);          /* red */\n  --destructive-foreground: oklch(0.985 0 0);\n\n  /* Borders and inputs */\n  --border: oklch(0.922 0 0);                        /* light gray border */\n  --input: oklch(0.922 0 0);                         /* input border */\n  --ring: oklch(0.708 0 0);                          /* focus ring — medium gray */\n\n  /* Chart colors (for Recharts, Chart.js, etc.) */\n  --chart-1: oklch(0.646 0.222 41.116);              /* warm orange */\n  --chart-2: oklch(0.6 0.118 184.704);               /* teal */\n  --chart-3: oklch(0.398 0.07 227.392);              /* dark blue */\n  --chart-4: oklch(0.828 0.189 84.429);              /* yellow-green */\n  --chart-5: oklch(0.769 0.188 70.08);               /* golden */\n\n  /* Sidebar */\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\nDark Mode (.dark)\n.dark {\n  /* Core surfaces */\n  --background: oklch(0.145 0 0);                   /* near black */\n  --foreground: oklch(0.985 0 0);                    /* near white */\n\n  /* Card */\n  --card: oklch(0.205 0 0);                          /* dark gray */\n  --card-foreground: oklch(0.985 0 0);\n\n  /* Popover */\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n\n  /* Primary — inverted for dark mode */\n  --primary: oklch(0.922 0 0);                       /* light gray */\n  --primary-foreground: oklch(0.205 0 0);             /* dark gray */\n\n  /* Secondary */\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n\n  /* Muted */\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n\n  /* Accent */\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n\n  /* Destructive */\n  --destructive: oklch(0.704 0.191 22.216);\n  --destructive-foreground: oklch(0.985 0 0);\n\n  /* Borders and inputs — use alpha channel in dark mode */\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n\n  /* Chart colors (dark mode variants) */\n  --chart-1: oklch(0.488 0.243 264.376);             /* blue-purple */\n  --chart-2: oklch(0.696 0.17 162.48);               /* green-teal */\n  --chart-3: oklch(0.769 0.188 70.08);               /* golden */\n  --chart-4: oklch(0.627 0.265 303.9);               /* purple */\n  --chart-5: oklch(0.645 0.246 16.439);              /* warm red */\n\n  /* Sidebar */\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n}\n\nTailwind v4 Integration\n\nIn Tailwind v4, register the CSS variables as colors using the @theme inline directive. Add this to your main CSS file after the variable definitions:\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\nTailwind v3 (legacy)\n\nIf the project uses Tailwind v3, the variables use HSL format instead of OKLCH. Add to tailwind.config.ts:\n\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n    },\n  },\n};\nexport default config;\n\nDark Mode Setup\nNext.js (App Router) with next-themes\nnpm install next-themes\n\n\nCreate src/components/shared/theme-provider.tsx:\n\n\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\n\nexport function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;\n}\n\n\nWrap the app in src/app/layout.tsx:\n\nimport { ThemeProvider } from \"@/components/shared/theme-provider\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body>\n        <ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem disableTransitionOnChange>\n          {children}\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n\nTheme Toggle Component\n\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function ThemeToggle() {\n  const { theme, setTheme } = useTheme();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(theme === \"dark\" ? \"light\" : \"dark\")}\n      aria-label=\"Toggle theme\"\n    >\n      <span className=\"sr-only\">Toggle theme</span>\n      {/* Sun icon for light, Moon icon for dark */}\n      <svg\n        className=\"h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\" />\n      </svg>\n      <svg\n        className=\"absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    </Button>\n  );\n}\n\nNuxt / SvelteKit / Other Frameworks\n\nFor non-Next.js frameworks, toggle the .dark class on the <html> element:\n\n// Generic dark mode toggle\nfunction toggleDarkMode() {\n  document.documentElement.classList.toggle(\"dark\");\n  const isDark = document.documentElement.classList.contains(\"dark\");\n  localStorage.setItem(\"theme\", isDark ? \"dark\" : \"light\");\n}\n\n// On page load, respect user preference\nfunction initTheme() {\n  const stored = localStorage.getItem(\"theme\");\n  const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  if (stored === \"dark\" || (!stored && prefersDark)) {\n    document.documentElement.classList.add(\"dark\");\n  }\n}\n\nAvailable shadcn/ui Components\n\nThe following components are available and all respect the theme tokens above. Install via npx shadcn@latest add <component>:\n\nAccordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Empty, Field, Hover Card, Input, Input Group, Input OTP, Item, Kbd, Label, Menubar, Native Select, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip, Typography.\n\nTailwind Utility Class Reference\n\nUse these Tailwind classes to apply theme tokens. NEVER use arbitrary values like bg-[#000] or text-[#fff].\n\nBackgrounds\nPurpose\tClass\nPage background\tbg-background\nCard surface\tbg-card\nPopover surface\tbg-popover\nPrimary fill (CTA buttons)\tbg-primary\nSecondary fill (secondary buttons)\tbg-secondary\nMuted fill (disabled, subtle)\tbg-muted\nAccent fill (hover, highlight)\tbg-accent\nDestructive fill (delete, error)\tbg-destructive\nSidebar background\tbg-sidebar\nText\nPurpose\tClass\nBody text\ttext-foreground\nText on primary bg\ttext-primary-foreground\nText on secondary bg\ttext-secondary-foreground\nMuted/placeholder text\ttext-muted-foreground\nText on accent bg\ttext-accent-foreground\nText on destructive bg\ttext-destructive-foreground\nText on card bg\ttext-card-foreground\nBorders\nPurpose\tClass\nStandard border\tborder-border\nInput border\tborder-input\nFocus ring\tring-ring\nSidebar border\tborder-sidebar-border\nBorder Radius\nPurpose\tClass\nSmall radius\trounded-sm (calc(var(--radius) - 4px))\nMedium radius\trounded-md (calc(var(--radius) - 2px))\nLarge radius\trounded-lg (var(--radius) = 0.625rem)\nExtra large radius\trounded-xl (calc(var(--radius) + 4px))\nComponent Styling Patterns\nStandard Button Variants\n// Primary (default) — dark bg, light text\n<Button>Save changes</Button>\n// Uses: bg-primary text-primary-foreground\n\n// Secondary — light bg, dark text\n<Button variant=\"secondary\">Cancel</Button>\n// Uses: bg-secondary text-secondary-foreground\n\n// Destructive — red bg, white text\n<Button variant=\"destructive\">Delete</Button>\n// Uses: bg-destructive text-destructive-foreground\n\n// Outline — transparent bg, border\n<Button variant=\"outline\">Edit</Button>\n// Uses: border-input bg-background text-foreground\n\n// Ghost — no bg, text only\n<Button variant=\"ghost\">More</Button>\n// Uses: text-foreground, hover:bg-accent hover:text-accent-foreground\n\n// Link — text styled as link\n<Button variant=\"link\">Learn more</Button>\n// Uses: text-primary underline\n\nCard Pattern\n<div className=\"rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm\">\n  <h3 className=\"text-lg font-semibold text-foreground\">Title</h3>\n  <p className=\"text-sm text-muted-foreground\">Description text</p>\n</div>\n\nInput Pattern\n<input\n  className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n  placeholder=\"Enter value...\"\n/>\n\nAlert/Badge Pattern\n{/* Info badge */}\n<span className=\"inline-flex items-center rounded-md bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground\">\n  Active\n</span>\n\n{/* Destructive badge */}\n<span className=\"inline-flex items-center rounded-md bg-destructive px-2.5 py-0.5 text-xs font-medium text-destructive-foreground\">\n  Error\n</span>\n\nFull globals.css Template\n\nThis is the complete globals.css file for a project using the default Neutral theme:\n\n@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --destructive-foreground: oklch(0.985 0 0);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --destructive-foreground: oklch(0.985 0 0);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n\ncomponents.json (shadcn/ui config)\n{\n  \"$schema\": \"https://ui.shadcn.com/schema.json\",\n  \"style\": \"default\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"\",\n    \"css\": \"src/app/globals.css\",\n    \"baseColor\": \"neutral\",\n    \"cssVariables\": true,\n    \"prefix\": \"\"\n  },\n  \"aliases\": {\n    \"components\": \"@/components\",\n    \"utils\": \"@/lib/utils\",\n    \"ui\": \"@/components/ui\",\n    \"lib\": \"@/lib\",\n    \"hooks\": \"@/hooks\"\n  },\n  \"iconLibrary\": \"lucide\"\n}\n\nRules for the Agent\n\nALWAYS use theme tokens. Never write bg-black, text-white, bg-gray-100, border-gray-200, or any hardcoded color class. Use bg-background, text-foreground, bg-muted, border-border instead.\n\nRespect the background/foreground pairing. If you use bg-primary, the text on top must be text-primary-foreground. Never mix pairs (e.g., never use text-foreground on a bg-primary surface).\n\nDark mode is automatic. The CSS variables handle the switch. Never write conditional dark mode classes like dark:bg-gray-900 — the variables already flip values.\n\nUse the radius tokens. Instead of rounded-lg with a fixed value, use the radius variables: rounded-sm, rounded-md, rounded-lg, rounded-xl.\n\nChart colors follow the sequence. For multi-series charts, use chart-1 through chart-5 in order.\n\nSidebar uses its own token set. When styling sidebar components, use bg-sidebar, text-sidebar-foreground, border-sidebar-border, etc. — not the generic tokens.\n\nDetect Tailwind version. Check package.json for Tailwind version. If v4+, use OKLCH variables with @theme inline. If v3, use HSL variables with tailwind.config.ts extension.\n\nInstalling new components. Use npx shadcn@latest add <component>. The CLI respects components.json and generates components with the correct theme tokens."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/guifav/shadcn-theme-default",
    "publisherUrl": "https://clawhub.ai/guifav/shadcn-theme-default",
    "owner": "guifav",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/shadcn-theme-default",
    "downloadUrl": "https://openagent3.xyz/downloads/shadcn-theme-default",
    "agentUrl": "https://openagent3.xyz/skills/shadcn-theme-default/agent",
    "manifestUrl": "https://openagent3.xyz/skills/shadcn-theme-default/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/shadcn-theme-default/agent.md"
  }
}