[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71STMH47XJMPYERFA068DR7":3,"skill-same:01M71STMH47XJMPYERFA068DR7":104},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":63,"ownerHtmlUrl":64,"ownerBlogUrl":65,"ownerDescription":66,"updatedAt":67,"install":68,"resources":81},"01M71STMH47XJMPYERFA068DR7","tailwind-design-system",null,"Build scalable Tailwind CSS v4 design systems — design tokens, component libraries, responsive patterns","HigorAlves\u002Forc","HigorAlves","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F11262976?v=4","01M71S79EZEMHZ8PQSV0XQJHYY","Higor Alves","01M71S79FKKTCHCN1EDR8DSTWQ",7,"MIT","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"design system","Tailwind","tailwind design system","system","design","use","ui patterns","for","Scalable","systems","tokens","responsive","patterns","build","design tokens","ui","design systems","libraries","component","css","2026-11-10 13:02:02",false,"---\nname: tailwind-design-system\ndescription: Build scalable Tailwind CSS v4 design systems — design tokens, component libraries, responsive patterns\nwhen_to_use: Use for component libraries, design systems, or standardizing UI patterns.\n---\n\n# Tailwind Design System (v4)\n\nBuild production-ready design systems with Tailwind CSS v4: CSS-first configuration, design tokens, component variants, responsive patterns, accessibility, and a distinctive (non-generic) aesthetic.\n\n> **Note**: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the [upgrade guide](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fupgrade-guide).\n\n## When to Use This Skill\n\n- Creating a component library with Tailwind v4\n- Implementing design tokens and theming with CSS-first configuration\n- Building responsive and accessible components\n- Standardizing UI patterns across a codebase\n- Migrating from Tailwind v3 to v4\n- Setting up dark mode with native CSS features\n- Designing interfaces that look intentionally crafted, not generic \"AI slop\"\n\n## Key v4 Changes (at a glance)\n\n| v3 Pattern                            | v4 Pattern                                          |\n| ------------------------------------- | --------------------------------------------------- |\n| `tailwind.config.ts`                  | `@theme` in CSS                                     |\n| `@tailwind base\u002Fcomponents\u002Futilities` | `@import \"tailwindcss\"`                             |\n| `darkMode: \"class\"`                   | `@custom-variant dark (&:where(.dark, .dark *))`    |\n| `theme.extend.colors`                 | `@theme { --color-*: value }`                       |\n| `require(\"tailwindcss-animate\")`      | native `@keyframes` + `@starting-style`             |\n\nFull migration checklist lives in [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md).\n\n## Core Concepts\n\n- **Design token hierarchy** — Brand tokens → Semantic tokens → Component tokens. Reference tokens via utilities (`bg-primary`), never hardcode colors.\n- **Component architecture** — Base styles → Variants → Sizes → States → Overrides. Use CVA for type-safe variants.\n- **CSS-first config** — All theme configuration lives in `@theme` blocks in CSS, not a JS\u002FTS config file.\n- **OKLCH colors** — Prefer OKLCH for perceptual uniformity over HSL.\n- **React 19** — `ref` is a regular prop; no `forwardRef`.\n\n## Reference Topics\n\nRead the topic file relevant to the task — each is self-contained with full copy-paste examples.\n\n| Topic | File | Covers |\n| ----- | ---- | ------ |\n| **Design tokens & setup** | [references\u002Fdesign-tokens.md](references\u002Fdesign-tokens.md) | `@theme` quick-start, OKLCH semantic tokens, dark-mode variant + overrides, base styles, token hierarchy, `cn()` \u002F `focusRing` \u002F `disabled` utilities, v3→v4 change table |\n| **Component patterns** | [references\u002Fcomponents.md](references\u002Fcomponents.md) | CVA button (Pattern 1), compound Card (Pattern 2), form Input\u002FLabel + React Hook Form + Zod (Pattern 3) |\n| **Responsive patterns** | [references\u002Fresponsive.md](references\u002Fresponsive.md) | Responsive `Grid` + `Container` CVA components (Pattern 4) |\n| **Advanced patterns** | [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md) | Native CSS animations (Pattern 5), Dialog with Radix, dark-mode `ThemeProvider` + `ThemeToggle` (Pattern 6), custom `@utility`, theme modifiers (`@theme inline`\u002F`static`), namespace overrides, `color-mix()` alpha variants, container queries, v3→v4 migration checklist, Do's & Don'ts |\n| **Distinctive UI** | [references\u002Fdistinctive-ui.md](references\u002Fdistinctive-ui.md) | Avoiding generic AI aesthetics — design thinking, bold aesthetic direction, typography\u002Fcolor\u002Fmotion\u002Fcomposition\u002Fbackground guidelines |\n\n## Best Practices (summary)\n\n**Do:** use `@theme` blocks; OKLCH colors; compose with CVA; semantic tokens (`bg-primary`); `size-*` shorthand; ARIA + focus states; commit to a distinctive, cohesive aesthetic.\n\n**Don't:** use `tailwind.config.ts` or `@tailwind` directives; use `forwardRef`; use arbitrary values (extend `@theme` instead); hardcode colors; forget dark mode; converge on generic fonts\u002Fpalettes (Inter, purple-on-white, etc.).\n\nFull Do's & Don'ts and the migration checklist are in [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md); aesthetic guidance is in [references\u002Fdistinctive-ui.md](references\u002Fdistinctive-ui.md).\n","# Tailwind Design System (v4)\n\nBuild production-ready design systems with Tailwind CSS v4: CSS-first configuration, design tokens, component variants, responsive patterns, accessibility, and a distinctive (non-generic) aesthetic.\n\n> **Note**: This skill targets Tailwind CSS v4 (2024+). For v3 projects, refer to the [upgrade guide](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fupgrade-guide).\n\n## When to Use This Skill\n\n- Creating a component library with Tailwind v4\n- Implementing design tokens and theming with CSS-first configuration\n- Building responsive and accessible components\n- Standardizing UI patterns across a codebase\n- Migrating from Tailwind v3 to v4\n- Setting up dark mode with native CSS features\n- Designing interfaces that look intentionally crafted, not generic \"AI slop\"\n\n## Key v4 Changes (at a glance)\n\n| v3 Pattern                            | v4 Pattern                                          |\n| ------------------------------------- | --------------------------------------------------- |\n| `tailwind.config.ts`                  | `@theme` in CSS                                     |\n| `@tailwind base\u002Fcomponents\u002Futilities` | `@import \"tailwindcss\"`                             |\n| `darkMode: \"class\"`                   | `@custom-variant dark (&:where(.dark, .dark *))`    |\n| `theme.extend.colors`                 | `@theme { --color-*: value }`                       |\n| `require(\"tailwindcss-animate\")`      | native `@keyframes` + `@starting-style`             |\n\nFull migration checklist lives in [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md).\n\n## Core Concepts\n\n- **Design token hierarchy** — Brand tokens → Semantic tokens → Component tokens. Reference tokens via utilities (`bg-primary`), never hardcode colors.\n- **Component architecture** — Base styles → Variants → Sizes → States → Overrides. Use CVA for type-safe variants.\n- **CSS-first config** — All theme configuration lives in `@theme` blocks in CSS, not a JS\u002FTS config file.\n- **OKLCH colors** — Prefer OKLCH for perceptual uniformity over HSL.\n- **React 19** — `ref` is a regular prop; no `forwardRef`.\n\n## Reference Topics\n\nRead the topic file relevant to the task — each is self-contained with full copy-paste examples.\n\n| Topic | File | Covers |\n| ----- | ---- | ------ |\n| **Design tokens & setup** | [references\u002Fdesign-tokens.md](references\u002Fdesign-tokens.md) | `@theme` quick-start, OKLCH semantic tokens, dark-mode variant + overrides, base styles, token hierarchy, `cn()` \u002F `focusRing` \u002F `disabled` utilities, v3→v4 change table |\n| **Component patterns** | [references\u002Fcomponents.md](references\u002Fcomponents.md) | CVA button (Pattern 1), compound Card (Pattern 2), form Input\u002FLabel + React Hook Form + Zod (Pattern 3) |\n| **Responsive patterns** | [references\u002Fresponsive.md](references\u002Fresponsive.md) | Responsive `Grid` + `Container` CVA components (Pattern 4) |\n| **Advanced patterns** | [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md) | Native CSS animations (Pattern 5), Dialog with Radix, dark-mode `ThemeProvider` + `ThemeToggle` (Pattern 6), custom `@utility`, theme modifiers (`@theme inline`\u002F`static`), namespace overrides, `color-mix()` alpha variants, container queries, v3→v4 migration checklist, Do's & Don'ts |\n| **Distinctive UI** | [references\u002Fdistinctive-ui.md](references\u002Fdistinctive-ui.md) | Avoiding generic AI aesthetics — design thinking, bold aesthetic direction, typography\u002Fcolor\u002Fmotion\u002Fcomposition\u002Fbackground guidelines |\n\n## Best Practices (summary)\n\n**Do:** use `@theme` blocks; OKLCH colors; compose with CVA; semantic tokens (`bg-primary`); `size-*` shorthand; ARIA + focus states; commit to a distinctive, cohesive aesthetic.\n\n**Don't:** use `tailwind.config.ts` or `@tailwind` directives; use `forwardRef`; use arbitrary values (extend `@theme` instead); hardcode colors; forget dark mode; converge on generic fonts\u002Fpalettes (Inter, purple-on-white, etc.).\n\nFull Do's & Don'ts and the migration checklist are in [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md); aesthetic guidance is in [references\u002Fdistinctive-ui.md](references\u002Fdistinctive-ui.md).\n",{"name":5,"description":7,"when_to_use":57},"Use for component libraries, design systems, or standardizing UI patterns.","main","7522fd7266944e30052204c2f6df287d8b5516be","orc\u002Fskills\u002Ftailwind-design-system",0,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc","https:\u002F\u002Forc.novacstack.com\u002F","https:\u002F\u002Fgithub.com\u002FHigorAlves","higoralves.dev","Software Engineering","2026-11-07 07:26:38",{"source":8,"skillName":5,"commands":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add HigorAlves\u002Forc --skill tailwind-design-system",{"tool":74,"command":75},"bunx","bunx skills add HigorAlves\u002Forc --skill tailwind-design-system",{"tool":77,"command":78},"pnpm","pnpm dlx skills add HigorAlves\u002Forc --skill tailwind-design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002FSKILL.md",true,[82,88,92,96,100],{"path":83,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fadvanced-patterns.md","REFERENCE","参考文档",8108,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fadvanced-patterns.md",{"path":89,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fcomponents.md",7230,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fcomponents.md",{"path":93,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Fdesign-tokens.md",4850,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fdesign-tokens.md",{"path":97,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002Fdistinctive-ui.md",4106,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fdistinctive-ui.md",{"path":101,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":102,"sourceHtmlUrl":103},"references\u002Fresponsive.md",2076,"https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Ftailwind-design-system\u002Freferences\u002Fresponsive.md",[105,139,163,184,206,226],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":120,"publishedAt":52},"01M71SW40F9TAAEDKBYYBCM814","writing-plans","Write a comprehensive implementation plan of bite-sized TDD tasks that an engineer with zero codebase context could execute — exact files, code, tests, and verification steps","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[111,114,117],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":115,"categoryName":116,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师",{"categoryNo":118,"categoryName":119,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,39,138,37],"writing","writing plans","plans","engineer","superpowers","implementation plan","files","when","you","code","tasks","verification","plan","write","steps","context","ZeRO","tests",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":148,"publishedAt":52},"01M71SW15KHE4MHJW9NEXV65X2","writing-for-agents","orc's doctrine layer for writing any document an agent consumes — skills, AGENTS.md\u002FCLAUDE.md, reference docs","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fwriting-for-agents\u002FSKILL.md",[145,146,147],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":118,"categoryName":119,"taxonomyType":29,"taxonomyTypeDesc":30},[149,121,39,150,128,151,152,153,154,155,156,157,37,158,159,160,161,162],"writing for agents","matt pocock","inline","tuning","a skill","layer","doctrine","push","editing","document","github","https","reference","docs",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":170,"publishedAt":52},"01M71SVYQKXT743HHHWGHT3G13","workspace-mode","Use when cwd is a parent dir holding multiple sibling git repos — defines repo auto-detection, --repos\u002F--repo\u002F--all-repos\u002F--this-repo precedence, per-repo dispatch, and linked-PR mechanics.","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fworkspace-mode\u002FSKILL.md",[169],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[171,172,173,174,175,128,176,177,178,179,37,180,181,182,183],"workspace mode","mode","workspace","mechanics","auto","repos","git","pr","repo","dispatch","auto-detection","detection","parent",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":191,"publishedAt":52},"01M71SVVP3BXS06G9395P2K0RH","wizard","Generate an interactive bash wizard walking a human through work only they can perform — credentials, secrets, one-off migrations","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fwizard\u002FSKILL.md",[190],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[186,192,193,194,195,150,128,196,197,198,199,200,201,135,202,203,39,37,204,205],"condition","never","provisioning infrastructure","only","Bash","work","credentials","generate","human","secrets","infrastructure","do","one","interactive",{"skillNo":207,"name":208,"nameZh":6,"description":209,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":210,"categories":211,"keywords":212,"publishedAt":52},"01M71SVT4AR6NKAM5B077E7QSJ","wait-what","Stop and re-pitch — the last message did not land; say it again simply, in the project's own vocabulary.","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fwait-what\u002FSKILL.md",[],[213,214,215,216,217,150,218,219,220,221,159,160,222,223,224,225],"wait what","wait","project","re","true","pitch","last","say","message","land","it","stop","vocabulary",{"skillNo":227,"name":228,"nameZh":6,"description":229,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":230,"categories":231,"keywords":236,"publishedAt":52},"01M71SVQVYRA9QBQ6G8MWR8G6F","vitest","Vitest fast unit testing framework powered by Vite with Jest-compatible API","https:\u002F\u002Fgithub.com\u002FHigorAlves\u002Forc\u002Fblob\u002Fmain\u002Forc\u002Fskills\u002Fvitest\u002FSKILL.md",[232,235],{"categoryNo":233,"categoryName":234,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":115,"categoryName":116,"taxonomyType":29,"taxonomyTypeDesc":30},[228,237,238,239,240,241,121,128,242,243,244,245,246,247,248,249,250,251,138,252],"coverage","unit","testing","testing framework","generated","api","jest","2026","at","scripts","unit testing","antfu","framework","vite","mocking","dev"]