[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FVHBVFJYMGCRXHSSB0PVH2":3,"skill-same:01M6FVHBVFJYMGCRXHSSB0PVH2":62},{"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":18,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":14,"repositoryHtmlUrl":43,"repositoryHomepageUrl":6,"ownerHtmlUrl":44,"ownerBlogUrl":45,"ownerDescription":46,"updatedAt":47,"install":48,"resources":61},"01M6FVHBVFJYMGCRXHSSB0PVH2","tailwind-4",null,"Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.","Ezequielpereyraa\u002Fai-config","Ezequielpereyraa","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50385003?v=4","01M6CZBZ5PS0XDHVZ5818PF9VY","Ezequiel Pereyra","01M6CZBZA0M26G9FAE57AA6CVV",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-4\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"Tailwind","tailwind 4","css","best practices","programming","styling","patterns","Tailwind CSS","trigger","theme","with","Variables","2026-11-10 10:12:30",false,"---\nname: tailwind-4\ndescription: >\n  Tailwind CSS 4 patterns and best practices.\n  Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.\nlicense: Apache-2.0\nmetadata:\n  author: gentleman-programming\n  version: \"1.1\"\n---\n\n## Styling Decision Tree\n\n```\nTailwind class exists?  → className=\"...\"\nDynamic value?          → style={{ width: `${x}%` }}\nConditional styles?     → cn(\"base\", condition && \"variant\")\nStatic only?            → className=\"...\" (no cn() needed)\nLibrary can't use class?→ style prop with var() constants\n```\n\n## Critical Rules\n\n### Avoid var() in className\n\n```typescript\n\u002F\u002F ❌ Avoid: var() in className\n\u003Cdiv className=\"bg-[var(--color-primary)]\" \u002F>\n\u003Cdiv className=\"text-[var(--text-color)]\" \u002F>\n\n\u002F\u002F ✅ Prefer: Tailwind semantic classes\n\u003Cdiv className=\"bg-primary\" \u002F>\n\u003Cdiv className=\"text-slate-400\" \u002F>\n```\n\n### Avoid Hex Colors In Components\n\n```typescript\n\u002F\u002F ❌ Avoid: Hex colors in className\n\u003Cp className=\"text-[#ffffff]\" \u002F>\n\u003Cdiv className=\"bg-[#1e293b]\" \u002F>\n\n\u002F\u002F ✅ Prefer: Tailwind color classes or project tokens\n\u003Cp className=\"text-white\" \u002F>\n\u003Cdiv className=\"bg-slate-800\" \u002F>\n```\n\n## The cn() Utility\n\n```typescript\nimport { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n```\n\n### When to Use cn()\n\n```typescript\n\u002F\u002F ✅ Conditional classes\n\u003Cdiv className={cn(\"base-class\", isActive && \"active-class\")} \u002F>\n\n\u002F\u002F ✅ Merging with potential conflicts\n\u003Cbutton className={cn(\"px-4 py-2\", className)} \u002F>  \u002F\u002F className might override\n\n\u002F\u002F ✅ Multiple conditions\n\u003Cdiv className={cn(\n  \"rounded-lg border\",\n  variant === \"primary\" && \"bg-blue-500 text-white\",\n  variant === \"secondary\" && \"bg-gray-200 text-gray-800\",\n  disabled && \"opacity-50 cursor-not-allowed\"\n)} \u002F>\n```\n\n### When NOT to Use cn()\n\n```typescript\n\u002F\u002F ❌ Static classes - unnecessary wrapper\n\u003Cdiv className={cn(\"flex items-center gap-2\")} \u002F>\n\n\u002F\u002F ✅ Just use className directly\n\u003Cdiv className=\"flex items-center gap-2\" \u002F>\n```\n\n## Style Constants for Charts\u002FLibraries\n\nWhen libraries don't accept className (like Recharts):\n\n```typescript\n\u002F\u002F ✅ Constants with var() - ONLY for library props\nconst CHART_COLORS = {\n  primary: \"var(--color-primary)\",\n  secondary: \"var(--color-secondary)\",\n  text: \"var(--color-text)\",\n  gridLine: \"var(--color-border)\",\n};\n\n\u002F\u002F Usage with Recharts (can't use className)\n\u003CXAxis tick={{ fill: CHART_COLORS.text }} \u002F>\n\u003CCartesianGrid stroke={CHART_COLORS.gridLine} \u002F>\n```\n\n## Dynamic Values\n\n```typescript\n\u002F\u002F ✅ style prop for truly dynamic values\n\u003Cdiv style={{ width: `${percentage}%` }} \u002F>\n\u003Cdiv style={{ opacity: isVisible ? 1 : 0 }} \u002F>\n\n\u002F\u002F ✅ CSS custom properties for theming\n\u003Cdiv style={{ \"--progress\": `${value}%` } as React.CSSProperties} \u002F>\n```\n\n## Common Patterns\n\n### Flexbox\n\n```typescript\n\u003Cdiv className=\"flex items-center justify-between gap-4\" \u002F>\n\u003Cdiv className=\"flex flex-col gap-2\" \u002F>\n\u003Cdiv className=\"inline-flex items-center\" \u002F>\n```\n\n### Grid\n\n```typescript\n\u003Cdiv className=\"grid grid-cols-3 gap-4\" \u002F>\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\" \u002F>\n```\n\n### Spacing\n\n```typescript\n\u002F\u002F Padding\n\u003Cdiv className=\"p-4\" \u002F>           \u002F\u002F All sides\n\u003Cdiv className=\"px-4 py-2\" \u002F>     \u002F\u002F Horizontal, vertical\n\u003Cdiv className=\"pt-4 pb-2\" \u002F>     \u002F\u002F Top, bottom\n\n\u002F\u002F Margin\n\u003Cdiv className=\"m-4\" \u002F>\n\u003Cdiv className=\"mx-auto\" \u002F>       \u002F\u002F Center horizontally\n\u003Cdiv className=\"mt-8 mb-4\" \u002F>\n```\n\n### Typography\n\n```typescript\n\u003Ch1 className=\"text-2xl font-bold text-white\" \u002F>\n\u003Cp className=\"text-sm text-slate-400\" \u002F>\n\u003Cspan className=\"text-xs font-medium uppercase tracking-wide\" \u002F>\n```\n\n### Borders & Shadows\n\n```typescript\n\u003Cdiv className=\"rounded-lg border border-slate-700\" \u002F>\n\u003Cdiv className=\"rounded-full shadow-lg\" \u002F>\n\u003Cdiv className=\"ring-2 ring-blue-500 ring-offset-2\" \u002F>\n```\n\n### States\n\n```typescript\n\u003Cbutton className=\"hover:bg-blue-600 focus:ring-2 active:scale-95\" \u002F>\n\u003Cinput className=\"focus:border-blue-500 focus:outline-none\" \u002F>\n\u003Cdiv className=\"group-hover:opacity-100\" \u002F>\n```\n\n### Responsive\n\n```typescript\n\u003Cdiv className=\"w-full md:w-1\u002F2 lg:w-1\u002F3\" \u002F>\n\u003Cdiv className=\"hidden md:block\" \u002F>\n\u003Cdiv className=\"text-sm md:text-base lg:text-lg\" \u002F>\n```\n\n### Dark Mode\n\n```typescript\n\u003Cdiv className=\"bg-white dark:bg-slate-900\" \u002F>\n\u003Cp className=\"text-gray-900 dark:text-white\" \u002F>\n```\n\n## Arbitrary Values (Escape Hatch)\n\n```typescript\n\u002F\u002F ✅ OK for one-off values not in design system\n\u003Cdiv className=\"w-[327px]\" \u002F>\n\u003Cdiv className=\"top-[117px]\" \u002F>\n\u003Cdiv className=\"grid-cols-[1fr_2fr_1fr]\" \u002F>\n\n\u002F\u002F ❌ Don't use for colors - use theme instead\n\u003Cdiv className=\"bg-[#1e293b]\" \u002F>  \u002F\u002F NO\n```\n\n## Keywords\ntailwind, css, styling, cn, utility classes, responsive\n","## Styling Decision Tree\n\n```\nTailwind class exists?  → className=\"...\"\nDynamic value?          → style={{ width: `${x}%` }}\nConditional styles?     → cn(\"base\", condition && \"variant\")\nStatic only?            → className=\"...\" (no cn() needed)\nLibrary can't use class?→ style prop with var() constants\n```\n\n## Critical Rules\n\n### Avoid var() in className\n\n```typescript\n\u002F\u002F ❌ Avoid: var() in className\n\u003Cdiv className=\"bg-[var(--color-primary)]\" \u002F>\n\u003Cdiv className=\"text-[var(--text-color)]\" \u002F>\n\n\u002F\u002F ✅ Prefer: Tailwind semantic classes\n\u003Cdiv className=\"bg-primary\" \u002F>\n\u003Cdiv className=\"text-slate-400\" \u002F>\n```\n\n### Avoid Hex Colors In Components\n\n```typescript\n\u002F\u002F ❌ Avoid: Hex colors in className\n\u003Cp className=\"text-[#ffffff]\" \u002F>\n\u003Cdiv className=\"bg-[#1e293b]\" \u002F>\n\n\u002F\u002F ✅ Prefer: Tailwind color classes or project tokens\n\u003Cp className=\"text-white\" \u002F>\n\u003Cdiv className=\"bg-slate-800\" \u002F>\n```\n\n## The cn() Utility\n\n```typescript\nimport { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n```\n\n### When to Use cn()\n\n```typescript\n\u002F\u002F ✅ Conditional classes\n\u003Cdiv className={cn(\"base-class\", isActive && \"active-class\")} \u002F>\n\n\u002F\u002F ✅ Merging with potential conflicts\n\u003Cbutton className={cn(\"px-4 py-2\", className)} \u002F>  \u002F\u002F className might override\n\n\u002F\u002F ✅ Multiple conditions\n\u003Cdiv className={cn(\n  \"rounded-lg border\",\n  variant === \"primary\" && \"bg-blue-500 text-white\",\n  variant === \"secondary\" && \"bg-gray-200 text-gray-800\",\n  disabled && \"opacity-50 cursor-not-allowed\"\n)} \u002F>\n```\n\n### When NOT to Use cn()\n\n```typescript\n\u002F\u002F ❌ Static classes - unnecessary wrapper\n\u003Cdiv className={cn(\"flex items-center gap-2\")} \u002F>\n\n\u002F\u002F ✅ Just use className directly\n\u003Cdiv className=\"flex items-center gap-2\" \u002F>\n```\n\n## Style Constants for Charts\u002FLibraries\n\nWhen libraries don't accept className (like Recharts):\n\n```typescript\n\u002F\u002F ✅ Constants with var() - ONLY for library props\nconst CHART_COLORS = {\n  primary: \"var(--color-primary)\",\n  secondary: \"var(--color-secondary)\",\n  text: \"var(--color-text)\",\n  gridLine: \"var(--color-border)\",\n};\n\n\u002F\u002F Usage with Recharts (can't use className)\n\u003CXAxis tick={{ fill: CHART_COLORS.text }} \u002F>\n\u003CCartesianGrid stroke={CHART_COLORS.gridLine} \u002F>\n```\n\n## Dynamic Values\n\n```typescript\n\u002F\u002F ✅ style prop for truly dynamic values\n\u003Cdiv style={{ width: `${percentage}%` }} \u002F>\n\u003Cdiv style={{ opacity: isVisible ? 1 : 0 }} \u002F>\n\n\u002F\u002F ✅ CSS custom properties for theming\n\u003Cdiv style={{ \"--progress\": `${value}%` } as React.CSSProperties} \u002F>\n```\n\n## Common Patterns\n\n### Flexbox\n\n```typescript\n\u003Cdiv className=\"flex items-center justify-between gap-4\" \u002F>\n\u003Cdiv className=\"flex flex-col gap-2\" \u002F>\n\u003Cdiv className=\"inline-flex items-center\" \u002F>\n```\n\n### Grid\n\n```typescript\n\u003Cdiv className=\"grid grid-cols-3 gap-4\" \u002F>\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\" \u002F>\n```\n\n### Spacing\n\n```typescript\n\u002F\u002F Padding\n\u003Cdiv className=\"p-4\" \u002F>           \u002F\u002F All sides\n\u003Cdiv className=\"px-4 py-2\" \u002F>     \u002F\u002F Horizontal, vertical\n\u003Cdiv className=\"pt-4 pb-2\" \u002F>     \u002F\u002F Top, bottom\n\n\u002F\u002F Margin\n\u003Cdiv className=\"m-4\" \u002F>\n\u003Cdiv className=\"mx-auto\" \u002F>       \u002F\u002F Center horizontally\n\u003Cdiv className=\"mt-8 mb-4\" \u002F>\n```\n\n### Typography\n\n```typescript\n\u003Ch1 className=\"text-2xl font-bold text-white\" \u002F>\n\u003Cp className=\"text-sm text-slate-400\" \u002F>\n\u003Cspan className=\"text-xs font-medium uppercase tracking-wide\" \u002F>\n```\n\n### Borders & Shadows\n\n```typescript\n\u003Cdiv className=\"rounded-lg border border-slate-700\" \u002F>\n\u003Cdiv className=\"rounded-full shadow-lg\" \u002F>\n\u003Cdiv className=\"ring-2 ring-blue-500 ring-offset-2\" \u002F>\n```\n\n### States\n\n```typescript\n\u003Cbutton className=\"hover:bg-blue-600 focus:ring-2 active:scale-95\" \u002F>\n\u003Cinput className=\"focus:border-blue-500 focus:outline-none\" \u002F>\n\u003Cdiv className=\"group-hover:opacity-100\" \u002F>\n```\n\n### Responsive\n\n```typescript\n\u003Cdiv className=\"w-full md:w-1\u002F2 lg:w-1\u002F3\" \u002F>\n\u003Cdiv className=\"hidden md:block\" \u002F>\n\u003Cdiv className=\"text-sm md:text-base lg:text-lg\" \u002F>\n```\n\n### Dark Mode\n\n```typescript\n\u003Cdiv className=\"bg-white dark:bg-slate-900\" \u002F>\n\u003Cp className=\"text-gray-900 dark:text-white\" \u002F>\n```\n\n## Arbitrary Values (Escape Hatch)\n\n```typescript\n\u002F\u002F ✅ OK for one-off values not in design system\n\u003Cdiv className=\"w-[327px]\" \u002F>\n\u003Cdiv className=\"top-[117px]\" \u002F>\n\u003Cdiv className=\"grid-cols-[1fr_2fr_1fr]\" \u002F>\n\n\u002F\u002F ❌ Don't use for colors - use theme instead\n\u003Cdiv className=\"bg-[#1e293b]\" \u002F>  \u002F\u002F NO\n```\n\n## Keywords\ntailwind, css, styling, cn, utility classes, responsive\n",{"name":5,"license":15,"metadata":36,"description":39},{"author":37,"version":38},"gentleman-programming","1.1","Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.\n","main","5607e1990992eb0c7e4a8b61f6dcc905eb2f18aa","skills\u002Ftailwind-4","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa","gezequielpereyra.netlify.app\u002F","Full Stack Web Developer","2026-09-12 21:54:51",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add Ezequielpereyraa\u002Fai-config --skill tailwind-4",{"tool":54,"command":55},"bunx","bunx skills add Ezequielpereyraa\u002Fai-config --skill tailwind-4",{"tool":57,"command":58},"pnpm","pnpm dlx skills add Ezequielpereyraa\u002Fai-config --skill tailwind-4","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-4\u002FSKILL.md",true,[],[63,90,129],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":67,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":31},"01M6FVGPDWJA88HCPV7DTPFGA2","ponytail","Forces the laziest solution that actually works, simplest, shortest, most minimal. Channels a senior dev who has seen everything: question whether the task needs to exist at all (YAGNI), reach for the standard library before custom code, native platform features before dependencies, one line before fifty. Supports intensity levels: lite, full (default), ultra. Use whenever the user says \"ponytail\", \"be lazy\", \"lazy mode\", \"simplest solution\", \"minimal solution\", \"yagni\", \"do less\", or \"shortest path\", and whenever they complain about over-engineering, bloat, boilerplate, or unnecessary dependencies.","MIT","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config\u002Fblob\u002Fmain\u002Fskills\u002Fponytail\u002FSKILL.md",[],[65,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89],"do","about","code","dev","library","engineering","question","use","yagni","minimal","default","task","dependencies","platform","line","boilerplate","intensity","native","channels",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":109,"publishedAt":31},"01M6CZD108VTW97PZDCDXVQJVP","impeccable","Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config\u002Fblob\u002Fmain\u002Fskills\u002Fimpeccable\u002FSKILL.md",[96,101,104],{"categoryNo":97,"categoryName":98,"taxonomyType":99,"taxonomyTypeDesc":100},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":102,"categoryName":103,"taxonomyType":99,"taxonomyTypeDesc":100},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":105,"categoryName":106,"taxonomyType":107,"taxonomyTypeDesc":108},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[92,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128],"design systems","frontend","design","review","performance","components","init","architecture","tasks","iteration","Bash","improve","clarify","distill","only","alignment","overdrive","quieter","typeset",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":137,"publishedAt":31},"01M6CZCAJV5HQ6MPHNWG2KXFVM","design-init","Skill invocable via \u002Fdesign-init. Escanea el proyecto, extrae tokens de diseño existentes (fuentes, colores, spacing, animaciones), detecta duplicidades y problemas de escalabilidad, y genera DESIGN.md pre-poblado con mejoras propuestas.","https:\u002F\u002Fgithub.com\u002FEzequielpereyraa\u002Fai-config\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-init\u002FSKILL.md",[135,136],{"categoryNo":102,"categoryName":103,"taxonomyType":99,"taxonomyTypeDesc":100},{"categoryNo":105,"categoryName":106,"taxonomyType":107,"taxonomyTypeDesc":108},[116,112,138,139],"design init","tokens"]