[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DZ6385911YENGYA985W015":3,"skill-same:01M6DZ6385911YENGYA985W015":135},{"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":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":58,"install":59,"resources":72},"01M6DZ6385911YENGYA985W015","tailwind-v4-shadcn",null,"Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React.\n\nUse when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui,\nimplementing dark mode, debugging CSS variable issues, fixing theme switching,\nmigrating from Tailwind v3, or encountering color\u002Ftheming problems.\n\nCovers: @theme inline pattern, CSS variable architecture, dark mode with\nThemeProvider, component composition, vite.config setup, common v4 gotchas,\nand production-tested patterns.\n\nKeywords: Tailwind v4, shadcn\u002Fui, @tailwindcss\u002Fvite, @theme inline, dark mode,\nCSS variables, hsl() wrapper, components.json, React theming, theme switching,\ncolors not working, variables broken, theme not applying, @plugin directive,\ntypography plugin, forms plugin, prose class, @tailwindcss\u002Ftypography,\n@tailwindcss\u002Fforms","kennyolofsson23-netizen\u002Fclaude-code-config","kennyolofsson23-netizen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F262391667?v=4","01M6DYPCT5DBDV0C11CXD8G7RX","01M6DYPD3KYJ7P6A8H7RKJ6KGG",0,"MIT","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"tailwind v4 shadcn","tailwind v4","shadcn","Tailwind","Composition","css variables","switching","up","broken","common","projects","css","issues","debugging","config","architecture","component","react","components","tailwindcss","2026-11-10 10:12:30",false,"---\nname: tailwind-v4-shadcn\ndescription: |\n  Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React.\n\n  Use when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui,\n  implementing dark mode, debugging CSS variable issues, fixing theme switching,\n  migrating from Tailwind v3, or encountering color\u002Ftheming problems.\n\n  Covers: @theme inline pattern, CSS variable architecture, dark mode with\n  ThemeProvider, component composition, vite.config setup, common v4 gotchas,\n  and production-tested patterns.\n\n  Keywords: Tailwind v4, shadcn\u002Fui, @tailwindcss\u002Fvite, @theme inline, dark mode,\n  CSS variables, hsl() wrapper, components.json, React theming, theme switching,\n  colors not working, variables broken, theme not applying, @plugin directive,\n  typography plugin, forms plugin, prose class, @tailwindcss\u002Ftypography,\n  @tailwindcss\u002Fforms\nlicense: MIT\n---\n\n# Tailwind v4 + shadcn\u002Fui Production Stack\n\n**Production-tested**: WordPress Auditor (https:\u002F\u002Fwordpress-auditor.webfonts.workers.dev)\n**Last Updated**: 2025-12-04\n**Status**: Production Ready ✅\n\n## Table of Contents\n1. [Before You Start](#-before-you-start-read-this)\n2. [Quick Start](#quick-start-5-minutes---follow-this-exact-order)\n3. [Four-Step Architecture](#the-four-step-architecture-critical)\n4. [Dark Mode Setup](#dark-mode-setup)\n5. [Critical Rules](#critical-rules-must-follow)\n6. [Semantic Color Tokens](#semantic-color-tokens)\n7. [Common Issues & Fixes](#common-issues--quick-fixes)\n8. [File Templates](#file-templates)\n9. [Setup Checklist](#complete-setup-checklist)\n10. [Advanced Topics](#advanced-topics)\n11. [Dependencies](#dependencies)\n12. [Tailwind v4 Plugins](#tailwind-v4-plugins)\n13. [Reference Documentation](#reference-documentation)\n14. [When to Load References](#when-to-load-references)\n\n---\n\n## ⚠️ BEFORE YOU START (READ THIS!)\n\n**CRITICAL FOR AI AGENTS**: If you're Claude Code helping a user set up Tailwind v4:\n\n1. **Explicitly state you're using this skill** at the start of the conversation\n2. **Reference patterns from the skill** rather than general knowledge\n3. **Prevent known issues** listed in `reference\u002Fcommon-gotchas.md`\n4. **Don't guess** - if unsure, check the skill documentation\n\n**USER ACTION REQUIRED**: Tell Claude to check this skill first!\n\nSay: **\"I'm setting up Tailwind v4 + shadcn\u002Fui - check the tailwind-v4-shadcn skill first\"**\n\n### Why This Matters (Real-World Results)\n\n**Without skill activation:**\n- ❌ Setup time: ~5 minutes\n- ❌ Errors encountered: 2-3 (tw-animate-css, duplicate @layer base)\n- ❌ Manual fixes needed: 2+ commits\n- ❌ Token usage: ~65k\n- ❌ User confidence: Required debugging\n\n**With skill activation:**\n- ✅ Setup time: ~1 minute\n- ✅ Errors encountered: 0\n- ✅ Manual fixes needed: 0\n- ✅ Token usage: ~20k (70% reduction)\n- ✅ User confidence: Instant success\n\n### Known Issues This Skill Prevents\n\n1. **tw-animate-css import error** (deprecated in v4)\n2. **Duplicate @layer base blocks** (shadcn init adds its own)\n3. **Wrong template selection** (vanilla TS vs React)\n4. **Missing post-init cleanup** (incompatible CSS rules)\n5. **Wrong plugin syntax** (using @import or require() instead of @plugin directive)\n\nAll of these are handled automatically when the skill is active.\n\n---\n\n## Quick Start (5 Minutes - Follow This Exact Order)\n\n### 1. Install Dependencies\n\n```bash\nbun add tailwindcss @tailwindcss\u002Fvite\n# or: npm install tailwindcss @tailwindcss\u002Fvite\n\nbun add -d @types\u002Fnode\n\n# Note: Using pnpm for shadcn init due to known Bun compatibility issues\n# (bunx has \"Script not found\" and postinstall\u002Fmsw problems)\npnpm dlx shadcn@latest init\n```\n\n### 2. Configure Vite\n\n```typescript\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport tailwindcss from '@tailwindcss\u002Fvite'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, '.\u002Fsrc')\n    }\n  }\n})\n```\n\n### 3. Update components.json\n\n```json\n{\n  \"tailwind\": {\n    \"config\": \"\",              \u002F\u002F ← CRITICAL: Empty for v4\n    \"css\": \"src\u002Findex.css\",\n    \"cssVariables\": true\n  }\n}\n```\n\n### 4. Delete tailwind.config.ts\n\n```bash\nrm tailwind.config.ts  # v4 doesn't use this file\n```\n\n---\n\n## The Four-Step Architecture (CRITICAL)\n\nThis pattern is **mandatory** - skipping steps will break your theme.\n\n### Step 1: Define CSS Variables at Root Level\n\n```css\n\u002F* src\u002Findex.css *\u002F\n@import \"tailwindcss\";\n\n:root {\n  --background: hsl(0 0% 100%);      \u002F* ← hsl() wrapper required *\u002F\n  --foreground: hsl(222.2 84% 4.9%);\n  --primary: hsl(221.2 83.2% 53.3%);\n  \u002F* ... all light mode colors *\u002F\n}\n\n.dark {\n  --background: hsl(222.2 84% 4.9%);\n  --foreground: hsl(210 40% 98%);\n  --primary: hsl(217.2 91.2% 59.8%);\n  \u002F* ... all dark mode colors *\u002F\n}\n```\n\n**Critical Rules:**\n- ✅ Define at root level (NOT inside `@layer base`)\n- ✅ Use `hsl()` wrapper on all color values\n- ✅ Use `.dark` for dark mode (NOT `.dark { @theme { } }`)\n\n### Step 2: Map Variables to Tailwind Utilities\n\n```css\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  \u002F* ... map ALL CSS variables *\u002F\n}\n```\n\n**Why This Is Required:**\n- Generates utility classes (`bg-background`, `text-primary`)\n- Without this, `bg-primary` etc. won't exist\n\n### Step 3: Apply Base Styles\n\n```css\n@layer base {\n  body {\n    background-color: var(--background);  \u002F* NO hsl() here *\u002F\n    color: var(--foreground);\n  }\n}\n```\n\n**Critical Rules:**\n- ✅ Reference variables directly: `var(--background)`\n- ❌ Never double-wrap: `hsl(var(--background))`\n\n### Step 4: Result - Automatic Dark Mode\n\n```tsx\n\u003Cdiv className=\"bg-background text-foreground\">\n  {\u002F* No dark: variants needed - theme switches automatically *\u002F}\n\u003C\u002Fdiv>\n```\n\n---\n\n## Dark Mode Setup\n\n### 1. Create ThemeProvider\n\nSee `reference\u002Fdark-mode.md` for full implementation or use template:\n\n```typescript\n\u002F\u002F Copy from: templates\u002Ftheme-provider.tsx\n```\n\n### 2. Wrap Your App\n\n```typescript\n\u002F\u002F src\u002Fmain.tsx\nimport { ThemeProvider } from '@\u002Fcomponents\u002Ftheme-provider'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003CReact.StrictMode>\n    \u003CThemeProvider defaultTheme=\"dark\" storageKey=\"vite-ui-theme\">\n      \u003CApp \u002F>\n    \u003C\u002FThemeProvider>\n  \u003C\u002FReact.StrictMode>,\n)\n```\n\n### 3. Add Theme Toggle\n\n```bash\npnpm dlx shadcn@latest add dropdown-menu\n```\n\nSee `reference\u002Fdark-mode.md` for ModeToggle component code.\n\n---\n\n## Critical Rules (MUST FOLLOW)\n\n### ✅ Always Do:\n\n1. **Wrap color values with `hsl()` in `:root` and `.dark`**\n   ```css\n   --background: hsl(0 0% 100%);  \u002F* ✅ Correct *\u002F\n   ```\n\n2. **Use `@theme inline` to map all CSS variables**\n   ```css\n   @theme inline {\n     --color-background: var(--background);\n   }\n   ```\n\n3. **Set `\"tailwind.config\": \"\"` in components.json**\n   ```json\n   { \"tailwind\": { \"config\": \"\" } }\n   ```\n\n4. **Delete `tailwind.config.ts` if it exists**\n\n5. **Use `@tailwindcss\u002Fvite` plugin (NOT PostCSS)**\n\n6. **Use `cn()` for conditional classes**\n   ```typescript\n   import { cn } from \"@\u002Flib\u002Futils\"\n   \u003Cdiv className={cn(\"base\", isActive && \"active\")} \u002F>\n   ```\n\n### ❌ Never Do:\n\n1. **Put `:root` or `.dark` inside `@layer base`**\n   ```css\n   \u002F* WRONG *\u002F\n   @layer base {\n     :root { --background: hsl(...); }\n   }\n   ```\n\n2. **Use `.dark { @theme { } }` pattern**\n   ```css\n   \u002F* WRONG - v4 doesn't support nested @theme *\u002F\n   .dark {\n     @theme {\n       --color-primary: hsl(...);\n     }\n   }\n   ```\n\n3. **Double-wrap colors**\n   ```css\n   \u002F* WRONG *\u002F\n   body {\n     background-color: hsl(var(--background));\n   }\n   ```\n\n4. **Use `tailwind.config.ts` for theme colors**\n   ```typescript\n   \u002F* WRONG - v4 ignores this *\u002F\n   export default {\n     theme: {\n       extend: {\n         colors: { primary: 'hsl(var(--primary))' }\n       }\n     }\n   }\n   ```\n\n5. **Use `@apply` directive (deprecated in v4)**\n\n6. **Use `dark:` variants for semantic colors**\n   ```tsx\n   \u002F* WRONG *\u002F\n   \u003Cdiv className=\"bg-primary dark:bg-primary-dark\" \u002F>\n\n   \u002F* CORRECT *\u002F\n   \u003Cdiv className=\"bg-primary\" \u002F>\n   ```\n\n---\n\n## Semantic Color Tokens\n\nAlways use semantic names for colors:\n\n```css\n:root {\n  --destructive: hsl(0 84.2% 60.2%);        \u002F* Red - errors, critical *\u002F\n  --success: hsl(142.1 76.2% 36.3%);        \u002F* Green - success states *\u002F\n  --warning: hsl(38 92% 50%);               \u002F* Yellow - warnings *\u002F\n  --info: hsl(221.2 83.2% 53.3%);           \u002F* Blue - info, primary *\u002F\n}\n```\n\n**Usage:**\n```tsx\n\u003Cdiv className=\"bg-destructive text-destructive-foreground\">Critical\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-success text-success-foreground\">Success\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-warning text-warning-foreground\">Warning\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-info text-info-foreground\">Info\u003C\u002Fdiv>\n```\n\n---\n\n## Common Issues & Quick Fixes\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| `bg-primary` doesn't work | Missing `@theme inline` mapping | Add `@theme inline` block |\n| Colors all black\u002Fwhite | Double `hsl()` wrapping | Use `var(--color)` not `hsl(var(--color))` |\n| Dark mode not switching | Missing ThemeProvider | Wrap app in `\u003CThemeProvider>` |\n| Build fails | `tailwind.config.ts` exists | Delete the file |\n| Text invisible | Wrong contrast colors | Check color definitions in `:root`\u002F`.dark` |\n\nSee `reference\u002Fcommon-gotchas.md` for complete troubleshooting guide.\n\n---\n\n## File Templates\n\nAll templates are available in the `templates\u002F` directory:\n\n- **index.css** - Complete CSS setup with all color variables\n- **components.json** - shadcn\u002Fui v4 configuration\n- **vite.config.ts** - Vite + Tailwind plugin setup\n- **tsconfig.app.json** - TypeScript with path aliases\n- **theme-provider.tsx** - Dark mode provider with localStorage\n- **utils.ts** - `cn()` utility for class merging\n\nCopy these files to your project and customize as needed.\n\n---\n\n## Complete Setup Checklist\n\n- [ ] Vite + React + TypeScript project created\n- [ ] `@tailwindcss\u002Fvite` installed (NOT postcss)\n- [ ] `vite.config.ts` uses `tailwindcss()` plugin\n- [ ] `tsconfig.json` has path aliases configured\n- [ ] `components.json` exists with `\"config\": \"\"`\n- [ ] NO `tailwind.config.ts` file exists\n- [ ] `src\u002Findex.css` follows v4 pattern:\n  - [ ] `:root` and `.dark` at root level (not in @layer)\n  - [ ] Colors wrapped with `hsl()`\n  - [ ] `@theme inline` maps all variables\n  - [ ] `@layer base` uses unwrapped variables\n- [ ] Theme provider installed and wrapping app\n- [ ] Dark mode toggle component created\n- [ ] Test theme switching works in browser\n\n---\n\n## Advanced Topics\n\nLoad `references\u002Fadvanced-usage.md` for advanced patterns including:\n\n- **Custom Colors**: Add semantic colors beyond default palette\n- **v3 Migration**: See `references\u002Fmigration-guide.md` for complete guide\n- **Component Best Practices**: Semantic tokens, cn() utility, composition patterns\n\n**Quick Example:**\n```css\n:root { --brand: hsl(280 65% 60%); }\n@theme inline { --color-brand: var(--brand); }\n```\nUsage: `\u003Cdiv className=\"bg-brand\">Branded\u003C\u002Fdiv>`\n\nFor detailed patterns and component composition examples, load `references\u002Fadvanced-usage.md`.\n\n---\n\n## Dependencies\n\n### ✅ Install These\n\n```json\n{\n  \"dependencies\": {\n    \"tailwindcss\": \"^4.1.17\",\n    \"@tailwindcss\u002Fvite\": \"^4.1.17\",\n    \"clsx\": \"^2.1.1\",\n    \"tailwind-merge\": \"^3.3.1\",\n    \"@radix-ui\u002Freact-*\": \"latest\",\n    \"lucide-react\": \"^0.554.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types\u002Fnode\": \"^24.10.1\",\n    \"@vitejs\u002Fplugin-react\": \"^5.1.1\",\n    \"vite\": \"^7.2.4\",\n    \"typescript\": \"~5.9.3\"\n  }\n}\n```\n\n### ❌ NEVER Install These (Deprecated in v4)\n\n```bash\n# These packages will cause build errors:\nbun add tailwindcss-animate  # ❌ Deprecated\n# or: npm install tailwindcss-animate  # ❌ Deprecated\n\nbun add tw-animate-css      # ❌ Doesn't exist\n```\n\n**If you see import errors for these packages**, remove them and use native CSS animations or `@tailwindcss\u002Fmotion` instead.\n\n---\n\n## Tailwind v4 Plugins\n\nTailwind v4 supports official plugins using the `@plugin` directive in CSS.\n\n**Quick Example:**\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss\u002Ftypography\";\n@plugin \"@tailwindcss\u002Fforms\";\n```\n\n**Common Error:**\n❌ WRONG: `@import \"@tailwindcss\u002Ftypography\"` (doesn't work)\n✅ CORRECT: `@plugin \"@tailwindcss\u002Ftypography\"` (use @plugin directive)\n\n**Built-in Features:** Container queries are now core (no `@tailwindcss\u002Fcontainer-queries` plugin needed).\n\nLoad `references\u002Fplugins-reference.md` for complete documentation including Typography plugin (prose classes), Forms plugin, installation steps, and common plugin errors.\n\n---\n\n## Reference Documentation\n\nFor deeper understanding, see:\n\n- **common-gotchas.md** - All the ways it can break (and fixes)\n- **dark-mode.md** - Complete dark mode implementation\n- **migration-guide.md** - Migrating hardcoded colors to CSS variables\n- **plugins-reference.md** - Official Tailwind v4 plugins (Typography, Forms)\n- **advanced-usage.md** - Custom colors and advanced patterns\n\n---\n\n## When to Load References\n\nLoad reference files based on user's specific needs:\n\n### Load `references\u002Fcommon-gotchas.md` when:\n- User reports \"colors not working\" or \"bg-primary doesn't exist\"\n- Dark mode not switching properly\n- Build fails with Tailwind errors\n- User encounters any CSS\u002Fconfiguration issue\n- Debugging theme problems\n\n### Load `references\u002Fdark-mode.md` when:\n- User asks to implement dark mode\n- Theme switching not working\n- Need ThemeProvider component code\n- Questions about system theme detection\n\n### Load `references\u002Fmigration-guide.md` when:\n- Migrating from Tailwind v3 to v4\n- User has hardcoded colors to migrate\n- Questions about v3 → v4 changes\n- Need migration checklist\n\n### Load `references\u002Fplugins-reference.md` when:\n- User needs Typography plugin (prose class)\n- User needs Forms plugin\n- Questions about @plugin directive\n- Plugin installation errors\n\n### Load `references\u002Fadvanced-usage.md` when:\n- User asks about custom colors beyond defaults\n- Need advanced component patterns\n- Questions about component best practices\n- Component composition questions\n\n---\n\n## Official Documentation\n\n- **shadcn\u002Fui Vite Setup**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Finstallation\u002Fvite\n- **shadcn\u002Fui Tailwind v4 Guide**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n- **shadcn\u002Fui Dark Mode (Vite)**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fdark-mode\u002Fvite\n- **Tailwind v4 Docs**: https:\u002F\u002Ftailwindcss.com\u002Fdocs\n- **shadcn\u002Fui Theming**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftheming\n\n---\n\n## Production Example\n\nThis skill is based on the WordPress Auditor project:\n- **Live**: https:\u002F\u002Fwordpress-auditor.webfonts.workers.dev\n- **Stack**: Vite + React 19 + Tailwind v4 + shadcn\u002Fui + Cloudflare Workers\n- **Dark Mode**: Full system\u002Flight\u002Fdark support\n- **Version**: Tailwind v4.1.17 + shadcn\u002Fui latest (Nov 2025)\n\nAll patterns in this skill have been validated in production.\n\n---\n\n**Questions? Issues?**\n\n1. Check `reference\u002Fcommon-gotchas.md` first\n2. Verify all steps in the 4-step architecture\n3. Ensure `components.json` has `\"config\": \"\"`\n4. Delete `tailwind.config.ts` if it exists\n5. Check official docs: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n","# Tailwind v4 + shadcn\u002Fui Production Stack\n\n**Production-tested**: WordPress Auditor (https:\u002F\u002Fwordpress-auditor.webfonts.workers.dev)\n**Last Updated**: 2025-12-04\n**Status**: Production Ready ✅\n\n## Table of Contents\n1. [Before You Start](#-before-you-start-read-this)\n2. [Quick Start](#quick-start-5-minutes---follow-this-exact-order)\n3. [Four-Step Architecture](#the-four-step-architecture-critical)\n4. [Dark Mode Setup](#dark-mode-setup)\n5. [Critical Rules](#critical-rules-must-follow)\n6. [Semantic Color Tokens](#semantic-color-tokens)\n7. [Common Issues & Fixes](#common-issues--quick-fixes)\n8. [File Templates](#file-templates)\n9. [Setup Checklist](#complete-setup-checklist)\n10. [Advanced Topics](#advanced-topics)\n11. [Dependencies](#dependencies)\n12. [Tailwind v4 Plugins](#tailwind-v4-plugins)\n13. [Reference Documentation](#reference-documentation)\n14. [When to Load References](#when-to-load-references)\n\n---\n\n## ⚠️ BEFORE YOU START (READ THIS!)\n\n**CRITICAL FOR AI AGENTS**: If you're Claude Code helping a user set up Tailwind v4:\n\n1. **Explicitly state you're using this skill** at the start of the conversation\n2. **Reference patterns from the skill** rather than general knowledge\n3. **Prevent known issues** listed in `reference\u002Fcommon-gotchas.md`\n4. **Don't guess** - if unsure, check the skill documentation\n\n**USER ACTION REQUIRED**: Tell Claude to check this skill first!\n\nSay: **\"I'm setting up Tailwind v4 + shadcn\u002Fui - check the tailwind-v4-shadcn skill first\"**\n\n### Why This Matters (Real-World Results)\n\n**Without skill activation:**\n- ❌ Setup time: ~5 minutes\n- ❌ Errors encountered: 2-3 (tw-animate-css, duplicate @layer base)\n- ❌ Manual fixes needed: 2+ commits\n- ❌ Token usage: ~65k\n- ❌ User confidence: Required debugging\n\n**With skill activation:**\n- ✅ Setup time: ~1 minute\n- ✅ Errors encountered: 0\n- ✅ Manual fixes needed: 0\n- ✅ Token usage: ~20k (70% reduction)\n- ✅ User confidence: Instant success\n\n### Known Issues This Skill Prevents\n\n1. **tw-animate-css import error** (deprecated in v4)\n2. **Duplicate @layer base blocks** (shadcn init adds its own)\n3. **Wrong template selection** (vanilla TS vs React)\n4. **Missing post-init cleanup** (incompatible CSS rules)\n5. **Wrong plugin syntax** (using @import or require() instead of @plugin directive)\n\nAll of these are handled automatically when the skill is active.\n\n---\n\n## Quick Start (5 Minutes - Follow This Exact Order)\n\n### 1. Install Dependencies\n\n```bash\nbun add tailwindcss @tailwindcss\u002Fvite\n# or: npm install tailwindcss @tailwindcss\u002Fvite\n\nbun add -d @types\u002Fnode\n\n# Note: Using pnpm for shadcn init due to known Bun compatibility issues\n# (bunx has \"Script not found\" and postinstall\u002Fmsw problems)\npnpm dlx shadcn@latest init\n```\n\n### 2. Configure Vite\n\n```typescript\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport tailwindcss from '@tailwindcss\u002Fvite'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, '.\u002Fsrc')\n    }\n  }\n})\n```\n\n### 3. Update components.json\n\n```json\n{\n  \"tailwind\": {\n    \"config\": \"\",              \u002F\u002F ← CRITICAL: Empty for v4\n    \"css\": \"src\u002Findex.css\",\n    \"cssVariables\": true\n  }\n}\n```\n\n### 4. Delete tailwind.config.ts\n\n```bash\nrm tailwind.config.ts  # v4 doesn't use this file\n```\n\n---\n\n## The Four-Step Architecture (CRITICAL)\n\nThis pattern is **mandatory** - skipping steps will break your theme.\n\n### Step 1: Define CSS Variables at Root Level\n\n```css\n\u002F* src\u002Findex.css *\u002F\n@import \"tailwindcss\";\n\n:root {\n  --background: hsl(0 0% 100%);      \u002F* ← hsl() wrapper required *\u002F\n  --foreground: hsl(222.2 84% 4.9%);\n  --primary: hsl(221.2 83.2% 53.3%);\n  \u002F* ... all light mode colors *\u002F\n}\n\n.dark {\n  --background: hsl(222.2 84% 4.9%);\n  --foreground: hsl(210 40% 98%);\n  --primary: hsl(217.2 91.2% 59.8%);\n  \u002F* ... all dark mode colors *\u002F\n}\n```\n\n**Critical Rules:**\n- ✅ Define at root level (NOT inside `@layer base`)\n- ✅ Use `hsl()` wrapper on all color values\n- ✅ Use `.dark` for dark mode (NOT `.dark { @theme { } }`)\n\n### Step 2: Map Variables to Tailwind Utilities\n\n```css\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  \u002F* ... map ALL CSS variables *\u002F\n}\n```\n\n**Why This Is Required:**\n- Generates utility classes (`bg-background`, `text-primary`)\n- Without this, `bg-primary` etc. won't exist\n\n### Step 3: Apply Base Styles\n\n```css\n@layer base {\n  body {\n    background-color: var(--background);  \u002F* NO hsl() here *\u002F\n    color: var(--foreground);\n  }\n}\n```\n\n**Critical Rules:**\n- ✅ Reference variables directly: `var(--background)`\n- ❌ Never double-wrap: `hsl(var(--background))`\n\n### Step 4: Result - Automatic Dark Mode\n\n```tsx\n\u003Cdiv className=\"bg-background text-foreground\">\n  {\u002F* No dark: variants needed - theme switches automatically *\u002F}\n\u003C\u002Fdiv>\n```\n\n---\n\n## Dark Mode Setup\n\n### 1. Create ThemeProvider\n\nSee `reference\u002Fdark-mode.md` for full implementation or use template:\n\n```typescript\n\u002F\u002F Copy from: templates\u002Ftheme-provider.tsx\n```\n\n### 2. Wrap Your App\n\n```typescript\n\u002F\u002F src\u002Fmain.tsx\nimport { ThemeProvider } from '@\u002Fcomponents\u002Ftheme-provider'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003CReact.StrictMode>\n    \u003CThemeProvider defaultTheme=\"dark\" storageKey=\"vite-ui-theme\">\n      \u003CApp \u002F>\n    \u003C\u002FThemeProvider>\n  \u003C\u002FReact.StrictMode>,\n)\n```\n\n### 3. Add Theme Toggle\n\n```bash\npnpm dlx shadcn@latest add dropdown-menu\n```\n\nSee `reference\u002Fdark-mode.md` for ModeToggle component code.\n\n---\n\n## Critical Rules (MUST FOLLOW)\n\n### ✅ Always Do:\n\n1. **Wrap color values with `hsl()` in `:root` and `.dark`**\n   ```css\n   --background: hsl(0 0% 100%);  \u002F* ✅ Correct *\u002F\n   ```\n\n2. **Use `@theme inline` to map all CSS variables**\n   ```css\n   @theme inline {\n     --color-background: var(--background);\n   }\n   ```\n\n3. **Set `\"tailwind.config\": \"\"` in components.json**\n   ```json\n   { \"tailwind\": { \"config\": \"\" } }\n   ```\n\n4. **Delete `tailwind.config.ts` if it exists**\n\n5. **Use `@tailwindcss\u002Fvite` plugin (NOT PostCSS)**\n\n6. **Use `cn()` for conditional classes**\n   ```typescript\n   import { cn } from \"@\u002Flib\u002Futils\"\n   \u003Cdiv className={cn(\"base\", isActive && \"active\")} \u002F>\n   ```\n\n### ❌ Never Do:\n\n1. **Put `:root` or `.dark` inside `@layer base`**\n   ```css\n   \u002F* WRONG *\u002F\n   @layer base {\n     :root { --background: hsl(...); }\n   }\n   ```\n\n2. **Use `.dark { @theme { } }` pattern**\n   ```css\n   \u002F* WRONG - v4 doesn't support nested @theme *\u002F\n   .dark {\n     @theme {\n       --color-primary: hsl(...);\n     }\n   }\n   ```\n\n3. **Double-wrap colors**\n   ```css\n   \u002F* WRONG *\u002F\n   body {\n     background-color: hsl(var(--background));\n   }\n   ```\n\n4. **Use `tailwind.config.ts` for theme colors**\n   ```typescript\n   \u002F* WRONG - v4 ignores this *\u002F\n   export default {\n     theme: {\n       extend: {\n         colors: { primary: 'hsl(var(--primary))' }\n       }\n     }\n   }\n   ```\n\n5. **Use `@apply` directive (deprecated in v4)**\n\n6. **Use `dark:` variants for semantic colors**\n   ```tsx\n   \u002F* WRONG *\u002F\n   \u003Cdiv className=\"bg-primary dark:bg-primary-dark\" \u002F>\n\n   \u002F* CORRECT *\u002F\n   \u003Cdiv className=\"bg-primary\" \u002F>\n   ```\n\n---\n\n## Semantic Color Tokens\n\nAlways use semantic names for colors:\n\n```css\n:root {\n  --destructive: hsl(0 84.2% 60.2%);        \u002F* Red - errors, critical *\u002F\n  --success: hsl(142.1 76.2% 36.3%);        \u002F* Green - success states *\u002F\n  --warning: hsl(38 92% 50%);               \u002F* Yellow - warnings *\u002F\n  --info: hsl(221.2 83.2% 53.3%);           \u002F* Blue - info, primary *\u002F\n}\n```\n\n**Usage:**\n```tsx\n\u003Cdiv className=\"bg-destructive text-destructive-foreground\">Critical\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-success text-success-foreground\">Success\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-warning text-warning-foreground\">Warning\u003C\u002Fdiv>\n\u003Cdiv className=\"bg-info text-info-foreground\">Info\u003C\u002Fdiv>\n```\n\n---\n\n## Common Issues & Quick Fixes\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| `bg-primary` doesn't work | Missing `@theme inline` mapping | Add `@theme inline` block |\n| Colors all black\u002Fwhite | Double `hsl()` wrapping | Use `var(--color)` not `hsl(var(--color))` |\n| Dark mode not switching | Missing ThemeProvider | Wrap app in `\u003CThemeProvider>` |\n| Build fails | `tailwind.config.ts` exists | Delete the file |\n| Text invisible | Wrong contrast colors | Check color definitions in `:root`\u002F`.dark` |\n\nSee `reference\u002Fcommon-gotchas.md` for complete troubleshooting guide.\n\n---\n\n## File Templates\n\nAll templates are available in the `templates\u002F` directory:\n\n- **index.css** - Complete CSS setup with all color variables\n- **components.json** - shadcn\u002Fui v4 configuration\n- **vite.config.ts** - Vite + Tailwind plugin setup\n- **tsconfig.app.json** - TypeScript with path aliases\n- **theme-provider.tsx** - Dark mode provider with localStorage\n- **utils.ts** - `cn()` utility for class merging\n\nCopy these files to your project and customize as needed.\n\n---\n\n## Complete Setup Checklist\n\n- [ ] Vite + React + TypeScript project created\n- [ ] `@tailwindcss\u002Fvite` installed (NOT postcss)\n- [ ] `vite.config.ts` uses `tailwindcss()` plugin\n- [ ] `tsconfig.json` has path aliases configured\n- [ ] `components.json` exists with `\"config\": \"\"`\n- [ ] NO `tailwind.config.ts` file exists\n- [ ] `src\u002Findex.css` follows v4 pattern:\n  - [ ] `:root` and `.dark` at root level (not in @layer)\n  - [ ] Colors wrapped with `hsl()`\n  - [ ] `@theme inline` maps all variables\n  - [ ] `@layer base` uses unwrapped variables\n- [ ] Theme provider installed and wrapping app\n- [ ] Dark mode toggle component created\n- [ ] Test theme switching works in browser\n\n---\n\n## Advanced Topics\n\nLoad `references\u002Fadvanced-usage.md` for advanced patterns including:\n\n- **Custom Colors**: Add semantic colors beyond default palette\n- **v3 Migration**: See `references\u002Fmigration-guide.md` for complete guide\n- **Component Best Practices**: Semantic tokens, cn() utility, composition patterns\n\n**Quick Example:**\n```css\n:root { --brand: hsl(280 65% 60%); }\n@theme inline { --color-brand: var(--brand); }\n```\nUsage: `\u003Cdiv className=\"bg-brand\">Branded\u003C\u002Fdiv>`\n\nFor detailed patterns and component composition examples, load `references\u002Fadvanced-usage.md`.\n\n---\n\n## Dependencies\n\n### ✅ Install These\n\n```json\n{\n  \"dependencies\": {\n    \"tailwindcss\": \"^4.1.17\",\n    \"@tailwindcss\u002Fvite\": \"^4.1.17\",\n    \"clsx\": \"^2.1.1\",\n    \"tailwind-merge\": \"^3.3.1\",\n    \"@radix-ui\u002Freact-*\": \"latest\",\n    \"lucide-react\": \"^0.554.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types\u002Fnode\": \"^24.10.1\",\n    \"@vitejs\u002Fplugin-react\": \"^5.1.1\",\n    \"vite\": \"^7.2.4\",\n    \"typescript\": \"~5.9.3\"\n  }\n}\n```\n\n### ❌ NEVER Install These (Deprecated in v4)\n\n```bash\n# These packages will cause build errors:\nbun add tailwindcss-animate  # ❌ Deprecated\n# or: npm install tailwindcss-animate  # ❌ Deprecated\n\nbun add tw-animate-css      # ❌ Doesn't exist\n```\n\n**If you see import errors for these packages**, remove them and use native CSS animations or `@tailwindcss\u002Fmotion` instead.\n\n---\n\n## Tailwind v4 Plugins\n\nTailwind v4 supports official plugins using the `@plugin` directive in CSS.\n\n**Quick Example:**\n```css\n@import \"tailwindcss\";\n@plugin \"@tailwindcss\u002Ftypography\";\n@plugin \"@tailwindcss\u002Fforms\";\n```\n\n**Common Error:**\n❌ WRONG: `@import \"@tailwindcss\u002Ftypography\"` (doesn't work)\n✅ CORRECT: `@plugin \"@tailwindcss\u002Ftypography\"` (use @plugin directive)\n\n**Built-in Features:** Container queries are now core (no `@tailwindcss\u002Fcontainer-queries` plugin needed).\n\nLoad `references\u002Fplugins-reference.md` for complete documentation including Typography plugin (prose classes), Forms plugin, installation steps, and common plugin errors.\n\n---\n\n## Reference Documentation\n\nFor deeper understanding, see:\n\n- **common-gotchas.md** - All the ways it can break (and fixes)\n- **dark-mode.md** - Complete dark mode implementation\n- **migration-guide.md** - Migrating hardcoded colors to CSS variables\n- **plugins-reference.md** - Official Tailwind v4 plugins (Typography, Forms)\n- **advanced-usage.md** - Custom colors and advanced patterns\n\n---\n\n## When to Load References\n\nLoad reference files based on user's specific needs:\n\n### Load `references\u002Fcommon-gotchas.md` when:\n- User reports \"colors not working\" or \"bg-primary doesn't exist\"\n- Dark mode not switching properly\n- Build fails with Tailwind errors\n- User encounters any CSS\u002Fconfiguration issue\n- Debugging theme problems\n\n### Load `references\u002Fdark-mode.md` when:\n- User asks to implement dark mode\n- Theme switching not working\n- Need ThemeProvider component code\n- Questions about system theme detection\n\n### Load `references\u002Fmigration-guide.md` when:\n- Migrating from Tailwind v3 to v4\n- User has hardcoded colors to migrate\n- Questions about v3 → v4 changes\n- Need migration checklist\n\n### Load `references\u002Fplugins-reference.md` when:\n- User needs Typography plugin (prose class)\n- User needs Forms plugin\n- Questions about @plugin directive\n- Plugin installation errors\n\n### Load `references\u002Fadvanced-usage.md` when:\n- User asks about custom colors beyond defaults\n- Need advanced component patterns\n- Questions about component best practices\n- Component composition questions\n\n---\n\n## Official Documentation\n\n- **shadcn\u002Fui Vite Setup**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Finstallation\u002Fvite\n- **shadcn\u002Fui Tailwind v4 Guide**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n- **shadcn\u002Fui Dark Mode (Vite)**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fdark-mode\u002Fvite\n- **Tailwind v4 Docs**: https:\u002F\u002Ftailwindcss.com\u002Fdocs\n- **shadcn\u002Fui Theming**: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftheming\n\n---\n\n## Production Example\n\nThis skill is based on the WordPress Auditor project:\n- **Live**: https:\u002F\u002Fwordpress-auditor.webfonts.workers.dev\n- **Stack**: Vite + React 19 + Tailwind v4 + shadcn\u002Fui + Cloudflare Workers\n- **Dark Mode**: Full system\u002Flight\u002Fdark support\n- **Version**: Tailwind v4.1.17 + shadcn\u002Fui latest (Nov 2025)\n\nAll patterns in this skill have been validated in production.\n\n---\n\n**Questions? Issues?**\n\n1. Check `reference\u002Fcommon-gotchas.md` first\n2. Verify all steps in the 4-step architecture\n3. Ensure `components.json` has `\"config\": \"\"`\n4. Delete `tailwind.config.ts` if it exists\n5. Check official docs: https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftailwind-v4\n",{"name":5,"license":14,"description":51},"Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React.\n\nUse when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui,\nimplementing dark mode, debugging CSS variable issues, fixing theme switching,\nmigrating from Tailwind v3, or encountering color\u002Ftheming problems.\n\nCovers: @theme inline pattern, CSS variable architecture, dark mode with\nThemeProvider, component composition, vite.config setup, common v4 gotchas,\nand production-tested patterns.\n\nKeywords: Tailwind v4, shadcn\u002Fui, @tailwindcss\u002Fvite, @theme inline, dark mode,\nCSS variables, hsl() wrapper, components.json, React theming, theme switching,\ncolors not working, variables broken, theme not applying, @plugin directive,\ntypography plugin, forms plugin, prose class, @tailwindcss\u002Ftypography,\n@tailwindcss\u002Fforms\n","main","770ead1d2718b931bf0d81b757d75d0f33e43d90","skills\u002Ftailwind-v4-shadcn",2,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen","2026-09-05 20:20:54",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill tailwind-v4-shadcn",{"tool":65,"command":66},"bunx","bunx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill tailwind-v4-shadcn",{"tool":68,"command":69},"pnpm","pnpm dlx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill tailwind-v4-shadcn","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002FSKILL.md",true,[73,79,85,89,93,97,101,105,109,113,119,123,127,131],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"python_recommendation.py","SCRIPT","脚本",161,"https:\u002F\u002Fgithub.com\u002Fondrej-merkun\u002Fskill-audit\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002FOBFS-EVAL-ATOB\u002Fbenign\u002Fpython_recommendation.py",{"path":80,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fadvanced-usage.md","REFERENCE","参考文档",3700,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Freferences\u002Fadvanced-usage.md",{"path":86,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fcommon-gotchas.md",7575,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Freferences\u002Fcommon-gotchas.md",{"path":90,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fdark-mode.md",5466,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Freferences\u002Fdark-mode.md",{"path":94,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fmigration-guide.md",6929,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Freferences\u002Fmigration-guide.md",{"path":98,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fplugins-reference.md",3130,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Freferences\u002Fplugins-reference.md",{"path":102,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":103,"sourceHtmlUrl":104},"safe.js",233,"https:\u002F\u002Fgithub.com\u002Fondrej-merkun\u002Fskill-audit\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002FOBFS-EVAL-ATOB\u002Fbenign\u002Fsafe.js",{"path":106,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":107,"sourceHtmlUrl":108},"scanner_rule_strings.js",388,"https:\u002F\u002Fgithub.com\u002Fondrej-merkun\u002Fskill-audit\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002FOBFS-EVAL-ATOB\u002Fbenign\u002Fscanner_rule_strings.js",{"path":110,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":111,"sourceHtmlUrl":112},"templates\u002Fcomponents.json",396,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Fcomponents.json",{"path":114,"resourceType":115,"resourceTypeDesc":116,"sizeBytes":117,"sourceHtmlUrl":118},"templates\u002Findex.css","OTHER","其他",4647,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Findex.css",{"path":120,"resourceType":115,"resourceTypeDesc":116,"sizeBytes":121,"sourceHtmlUrl":122},"templates\u002Ftheme-provider.tsx",2301,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Ftheme-provider.tsx",{"path":124,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":125,"sourceHtmlUrl":126},"templates\u002Ftsconfig.app.json",719,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Ftsconfig.app.json",{"path":128,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":129,"sourceHtmlUrl":130},"templates\u002Futils.ts",166,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Futils.ts",{"path":132,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":133,"sourceHtmlUrl":134},"templates\u002Fvite.config.ts",337,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002Ftemplates\u002Fvite.config.ts",[136,168,202,221,247,273],{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":150,"publishedAt":46},"01M6DZ7A62MZTGTBH4GYQPYHHM","web-quality-audit","Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to \"audit my site\", \"review web quality\", \"run lighthouse audit\", \"check page quality\", or \"optimize my website\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fweb-quality-audit\u002FSKILL.md",[142,145],{"categoryNo":143,"categoryName":144,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":146,"categoryName":147,"taxonomyType":148,"taxonomyTypeDesc":149},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167],"web","audit","web quality audit","quality","review","performance","accessibility","run","best practices","website","seo","Lighthouse","site","page","check","use","optimize",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":182,"publishedAt":46},"01M6DZ5Z3F0PTH87NM9ATQD3E3","social-content","When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter\u002FX, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' or 'viral content.' This skill covers content creation, repurposing, and platform-specific strategies.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fsocial-content\u002FSKILL.md",[174,175,178,179],{"categoryNo":143,"categoryName":144,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":176,"categoryName":177,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":146,"categoryName":147,"taxonomyType":148,"taxonomyTypeDesc":149},{"categoryNo":180,"categoryName":181,"taxonomyType":148,"taxonomyTypeDesc":149},"01JBSEEDCAT000000000000036","内容创作者",[183,184,185,186,187,188,189,190,191,166,192,193,194,195,196,197,198,199,200,201],"content","social content","social","Media","marketing","twitter","linkedin","instagram","social media","calendar","scheduling","tiktok","content calendar","content creation","facebook","viral","strategies","platform","creation",{"skillNo":203,"name":161,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":209,"publishedAt":46},"01M6DZ5NDBE4821RDH11V7FQTK","Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fseo\u002FSKILL.md",[207,208],{"categoryNo":143,"categoryName":144,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":146,"categoryName":147,"taxonomyType":148,"taxonomyTypeDesc":149},[161,210,151,211,212,213,214,215,216,217,154,218,166,167,219,220],"structured data","search","Optimization","data","Meta","Meta Tags","improve","engine","fix","structured","ranking",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":232,"publishedAt":46},"01M6DZ39W3BS39MBVGBDA38DV9","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[227,228,229],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":176,"categoryName":177,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":230,"categoryName":231,"taxonomyType":148,"taxonomyTypeDesc":149},"01JBSEEDCAT000000000000030","开发工程师",[43,233,159,234,235,236,156,44,237,238,239,240,212,213,241,242,243,244,245,246],"vercel react best practices","react best practices","vercel","writing","react components","guidelines","tasks","code","Next.js","refactoring","patterns","next","pages","triggers",{"skillNo":248,"name":249,"nameZh":6,"description":250,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":251,"categories":252,"keywords":258,"publishedAt":46},"01M6DZ2C3HPF1JX3TD508SXNDR","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fpostgres-best-practices\u002FSKILL.md",[253,256,257],{"categoryNo":254,"categoryName":255,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":176,"categoryName":177,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":230,"categoryName":231,"taxonomyType":148,"taxonomyTypeDesc":149},[159,259,260,261,262,236,156,240,263,264,212,265,266,267,166,268,269,270,271,272],"supabase postgres best practices","supabase","postgres best practices","postgres","database","examples","analysis","correct","Rules","schema","query","across","critical","impact",{"skillNo":274,"name":156,"nameZh":6,"description":275,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":276,"categories":277,"keywords":278,"publishedAt":46},"01M6DZ28D9T2A7PCYB76SJQ7N0","Optimize web performance for faster loading and better user experience. Use when asked to \"speed up my site\", \"optimize performance\", \"reduce load time\", \"fix slow loading\", \"improve page speed\", or \"performance audit\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fperformance\u002FSKILL.md",[],[156,151,279,152,216,163,164,154,280,218,166,33,167,281,282,283,284],"web performance","user","time","speed","user experience","optimize web"]