tribunal-kit 4.5.0 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/.agent/.shared/ui-ux-pro-max/README.md +4 -4
  2. package/.agent/ARCHITECTURE.md +279 -277
  3. package/.agent/GEMINI.md +127 -121
  4. package/.agent/agents/accessibility-reviewer.md +187 -187
  5. package/.agent/agents/ai-code-reviewer.md +199 -199
  6. package/.agent/agents/api-architect.md +71 -66
  7. package/.agent/agents/backend-specialist.md +219 -215
  8. package/.agent/agents/cloud-engineer.md +98 -0
  9. package/.agent/agents/code-archaeologist.md +168 -161
  10. package/.agent/agents/database-architect.md +184 -184
  11. package/.agent/agents/db-latency-auditor.md +213 -216
  12. package/.agent/agents/debugger.md +198 -191
  13. package/.agent/agents/dependency-reviewer.md +106 -103
  14. package/.agent/agents/devops-engineer.md +218 -218
  15. package/.agent/agents/documentation-writer.md +209 -201
  16. package/.agent/agents/explorer-agent.md +167 -160
  17. package/.agent/agents/frontend-reviewer.md +162 -160
  18. package/.agent/agents/frontend-specialist.md +257 -248
  19. package/.agent/agents/game-developer.md +48 -48
  20. package/.agent/agents/logic-reviewer.md +118 -116
  21. package/.agent/agents/mobile-developer.md +197 -200
  22. package/.agent/agents/mobile-reviewer.md +159 -162
  23. package/.agent/agents/orchestrator.md +187 -181
  24. package/.agent/agents/penetration-tester.md +160 -157
  25. package/.agent/agents/performance-optimizer.md +183 -183
  26. package/.agent/agents/performance-reviewer.md +178 -178
  27. package/.agent/agents/precedence-reviewer.md +251 -250
  28. package/.agent/agents/product-manager.md +149 -142
  29. package/.agent/agents/product-owner.md +81 -80
  30. package/.agent/agents/project-planner.md +152 -142
  31. package/.agent/agents/qa-automation-engineer.md +216 -225
  32. package/.agent/agents/resilience-reviewer.md +88 -88
  33. package/.agent/agents/schema-reviewer.md +67 -67
  34. package/.agent/agents/security-auditor.md +180 -174
  35. package/.agent/agents/seo-specialist.md +188 -193
  36. package/.agent/agents/sql-reviewer.md +159 -161
  37. package/.agent/agents/supervisor-agent.md +173 -184
  38. package/.agent/agents/swarm-worker-contracts.md +170 -166
  39. package/.agent/agents/swarm-worker-registry.md +92 -92
  40. package/.agent/agents/system-architect.md +85 -0
  41. package/.agent/agents/test-coverage-reviewer.md +158 -160
  42. package/.agent/agents/test-engineer.md +118 -118
  43. package/.agent/agents/throughput-optimizer.md +291 -299
  44. package/.agent/agents/type-safety-reviewer.md +182 -175
  45. package/.agent/agents/ui-ux-auditor.md +300 -292
  46. package/.agent/agents/vitals-reviewer.md +223 -223
  47. package/.agent/mcp_config.json +37 -40
  48. package/.agent/patterns/generator.md +11 -9
  49. package/.agent/patterns/inversion.md +14 -12
  50. package/.agent/patterns/pipeline.md +11 -9
  51. package/.agent/patterns/reviewer.md +15 -13
  52. package/.agent/patterns/tool-wrapper.md +11 -9
  53. package/.agent/routing_index.json +654 -0
  54. package/.agent/rules/GEMINI.md +358 -352
  55. package/.agent/scripts/compile_router.py +112 -0
  56. package/.agent/scripts/migrate_skills_frontmatter.py +64 -0
  57. package/.agent/scripts/strengthen_skills.js +1 -1
  58. package/.agent/skills/advanced-rag-pipelines/SKILL.md +56 -0
  59. package/.agent/skills/agent-organizer/SKILL.md +156 -150
  60. package/.agent/skills/agentic-patterns/SKILL.md +313 -315
  61. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +190 -184
  62. package/.agent/skills/api-patterns/SKILL.md +253 -247
  63. package/.agent/skills/api-security-auditor/SKILL.md +195 -193
  64. package/.agent/skills/app-builder/SKILL.md +573 -572
  65. package/.agent/skills/app-builder/templates/SKILL.md +108 -115
  66. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -76
  67. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -92
  68. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -88
  69. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -88
  70. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -83
  71. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -90
  72. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -90
  73. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +126 -122
  74. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +127 -122
  75. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +172 -169
  76. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +139 -134
  77. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -83
  78. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +122 -119
  79. package/.agent/skills/appflow-wireframe/SKILL.md +146 -145
  80. package/.agent/skills/architecture/SKILL.md +226 -219
  81. package/.agent/skills/authentication-best-practices/SKILL.md +197 -189
  82. package/.agent/skills/backend-security-expert/SKILL.md +16 -2
  83. package/.agent/skills/bash-linux/SKILL.md +179 -179
  84. package/.agent/skills/behavioral-modes/SKILL.md +239 -223
  85. package/.agent/skills/brainstorming/SKILL.md +498 -486
  86. package/.agent/skills/browser-native-ai/SKILL.md +57 -4
  87. package/.agent/skills/building-native-ui/SKILL.md +202 -202
  88. package/.agent/skills/cicd-pro/SKILL.md +442 -0
  89. package/.agent/skills/clean-code/SKILL.md +400 -381
  90. package/.agent/skills/cloud-architect/SKILL.md +439 -0
  91. package/.agent/skills/code-review-checklist/SKILL.md +203 -194
  92. package/.agent/skills/config-validator/SKILL.md +165 -165
  93. package/.agent/skills/containerization-pro/SKILL.md +452 -0
  94. package/.agent/skills/csharp-developer/SKILL.md +518 -518
  95. package/.agent/skills/data-validation-schemas/SKILL.md +333 -328
  96. package/.agent/skills/database-design/SKILL.md +247 -240
  97. package/.agent/skills/deployment-procedures/SKILL.md +172 -169
  98. package/.agent/skills/devops-engineer/SKILL.md +345 -345
  99. package/.agent/skills/devops-incident-responder/SKILL.md +143 -137
  100. package/.agent/skills/doc.md +209 -177
  101. package/.agent/skills/documentation-templates/SKILL.md +291 -279
  102. package/.agent/skills/edge-computing/SKILL.md +183 -181
  103. package/.agent/skills/error-resilience/SKILL.md +411 -428
  104. package/.agent/skills/extract-design-system/SKILL.md +160 -158
  105. package/.agent/skills/framer-motion-expert/SKILL.md +253 -244
  106. package/.agent/skills/frontend-design/SKILL.md +208 -201
  107. package/.agent/skills/frontend-security-expert/SKILL.md +16 -3
  108. package/.agent/skills/game-design-expert/SKILL.md +132 -129
  109. package/.agent/skills/game-engineering-expert/SKILL.md +148 -146
  110. package/.agent/skills/generative-ui-expert/SKILL.md +57 -1
  111. package/.agent/skills/geo-fundamentals/SKILL.md +148 -147
  112. package/.agent/skills/git-pro/SKILL.md +435 -0
  113. package/.agent/skills/github-operations/SKILL.md +335 -329
  114. package/.agent/skills/gsap-core/SKILL.md +319 -308
  115. package/.agent/skills/gsap-frameworks/SKILL.md +213 -207
  116. package/.agent/skills/gsap-performance/SKILL.md +139 -133
  117. package/.agent/skills/gsap-plugins/SKILL.md +486 -480
  118. package/.agent/skills/gsap-react/SKILL.md +202 -189
  119. package/.agent/skills/gsap-scrolltrigger/SKILL.md +357 -350
  120. package/.agent/skills/gsap-timeline/SKILL.md +165 -161
  121. package/.agent/skills/gsap-utils/SKILL.md +344 -338
  122. package/.agent/skills/harness-protocol/SKILL.md +48 -0
  123. package/.agent/skills/i18n-localization/SKILL.md +174 -163
  124. package/.agent/skills/intelligent-routing/SKILL.md +202 -246
  125. package/.agent/skills/knowledge-graph/SKILL.md +60 -52
  126. package/.agent/skills/lint-and-validate/SKILL.md +261 -261
  127. package/.agent/skills/llm-engineering/SKILL.md +400 -394
  128. package/.agent/skills/local-first/SKILL.md +178 -178
  129. package/.agent/skills/mcp-builder/SKILL.md +143 -142
  130. package/.agent/skills/mobile-design/SKILL.md +272 -263
  131. package/.agent/skills/monorepo-management/SKILL.md +335 -334
  132. package/.agent/skills/motion-engineering/SKILL.md +266 -234
  133. package/.agent/skills/nextjs-react-expert/SKILL.md +236 -234
  134. package/.agent/skills/nodejs-best-practices/SKILL.md +547 -548
  135. package/.agent/skills/observability/SKILL.md +343 -343
  136. package/.agent/skills/parallel-agents/SKILL.md +143 -146
  137. package/.agent/skills/performance-profiling/SKILL.md +259 -267
  138. package/.agent/skills/plan-writing/SKILL.md +150 -142
  139. package/.agent/skills/platform-engineer/SKILL.md +148 -147
  140. package/.agent/skills/playwright-best-practices/SKILL.md +188 -187
  141. package/.agent/skills/powershell-windows/SKILL.md +162 -162
  142. package/.agent/skills/project-idioms/SKILL.md +137 -137
  143. package/.agent/skills/python-patterns/SKILL.md +260 -259
  144. package/.agent/skills/python-pro/SKILL.md +324 -323
  145. package/.agent/skills/react-specialist/SKILL.md +305 -277
  146. package/.agent/skills/readme-builder/SKILL.md +310 -300
  147. package/.agent/skills/realtime-patterns/SKILL.md +323 -319
  148. package/.agent/skills/red-team-tactics/SKILL.md +231 -218
  149. package/.agent/skills/rust-pro/SKILL.md +671 -673
  150. package/.agent/skills/seo-fundamentals/SKILL.md +179 -179
  151. package/.agent/skills/server-management/SKILL.md +218 -214
  152. package/.agent/skills/shadcn-ui-expert/SKILL.md +231 -231
  153. package/.agent/skills/skill-creator/SKILL.md +87 -86
  154. package/.agent/skills/sql-pro/SKILL.md +629 -629
  155. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +97 -97
  156. package/.agent/skills/swiftui-expert/SKILL.md +204 -201
  157. package/.agent/skills/system-design-pro/SKILL.md +345 -0
  158. package/.agent/skills/systematic-debugging/SKILL.md +153 -142
  159. package/.agent/skills/tailwind-patterns/SKILL.md +610 -566
  160. package/.agent/skills/tdd-workflow/SKILL.md +169 -161
  161. package/.agent/skills/test-result-analyzer/SKILL.md +313 -309
  162. package/.agent/skills/testing-patterns/SKILL.md +566 -579
  163. package/.agent/skills/trend-researcher/SKILL.md +243 -237
  164. package/.agent/skills/typescript-advanced/SKILL.md +336 -335
  165. package/.agent/skills/ui-ux-pro-max/SKILL.md +590 -562
  166. package/.agent/skills/ui-ux-researcher/SKILL.md +244 -244
  167. package/.agent/skills/vue-expert/SKILL.md +294 -275
  168. package/.agent/skills/vulnerability-scanner/SKILL.md +416 -404
  169. package/.agent/skills/web-accessibility-auditor/SKILL.md +219 -218
  170. package/.agent/skills/web-design-guidelines/SKILL.md +192 -186
  171. package/.agent/skills/webapp-testing/SKILL.md +167 -169
  172. package/.agent/skills/webgpu-performance/SKILL.md +56 -2
  173. package/.agent/skills/whimsy-injector/SKILL.md +346 -325
  174. package/.agent/skills/workflow-optimizer/SKILL.md +231 -229
  175. package/.agent/workflows/acf.md +141 -0
  176. package/.agent/workflows/api-tester.md +176 -151
  177. package/.agent/workflows/audit.md +150 -127
  178. package/.agent/workflows/brainstorm.md +134 -110
  179. package/.agent/workflows/changelog.md +140 -112
  180. package/.agent/workflows/create.md +168 -124
  181. package/.agent/workflows/debug.md +190 -165
  182. package/.agent/workflows/deploy.md +201 -180
  183. package/.agent/workflows/enhance.md +154 -128
  184. package/.agent/workflows/fix.md +136 -114
  185. package/.agent/workflows/generate.md +198 -183
  186. package/.agent/workflows/marathon.md +37 -11
  187. package/.agent/workflows/migrate.md +184 -160
  188. package/.agent/workflows/orchestrate.md +192 -168
  189. package/.agent/workflows/performance-benchmarker.md +135 -114
  190. package/.agent/workflows/plan.md +196 -173
  191. package/.agent/workflows/preview.md +103 -80
  192. package/.agent/workflows/refactor.md +192 -161
  193. package/.agent/workflows/review-ai.md +125 -101
  194. package/.agent/workflows/review.md +141 -116
  195. package/.agent/workflows/session.md +122 -94
  196. package/.agent/workflows/status.md +101 -79
  197. package/.agent/workflows/strengthen-skills.md +164 -138
  198. package/.agent/workflows/super-prompt.md +24 -0
  199. package/.agent/workflows/swarm.md +193 -179
  200. package/.agent/workflows/test.md +211 -189
  201. package/.agent/workflows/tribunal-backend.md +136 -105
  202. package/.agent/workflows/tribunal-database.md +122 -95
  203. package/.agent/workflows/tribunal-frontend.md +221 -96
  204. package/.agent/workflows/tribunal-full.md +129 -100
  205. package/.agent/workflows/tribunal-mobile.md +122 -95
  206. package/.agent/workflows/tribunal-performance.md +136 -110
  207. package/.agent/workflows/tribunal-speed.md +209 -183
  208. package/.agent/workflows/ui-ux-pro-max.md +145 -122
  209. package/README.md +107 -55
  210. package/bin/mcp-server.js +159 -0
  211. package/bin/tribunal-kit.js +105 -29
  212. package/bin/wrapper.js +16 -7
  213. package/mcp_config.json +9 -0
  214. package/package.json +94 -86
  215. package/scripts/changelog.js +4 -3
  216. package/scripts/validate-payload.js +6 -1
  217. package/scripts/postinstall.js +0 -127
package/.agent/skills/tailwind-patterns/SKILL.md CHANGED
@@ -1,570 +1,612 @@
1
- ---
2
- name: tailwind-patterns
3
- description: Tailwind CSS v4+ mastery. CSS-first configuration, @theme directive, container queries, scroll-driven animations, logical properties, clamp(), fluid typography, responsive design, dark mode, custom variants, component extraction, and performance optimization. Use when styling with Tailwind, building design systems, or optimizing CSS output.
4
- allowed-tools: Read, Write, Edit, Glob, Grep
5
- version: 2.0.0
6
- last-updated: 2026-04-01
7
- applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
8
- ---
9
-
10
- # Tailwind CSS v4+ — CSS-First Mastery
11
-
12
- ---
13
-
14
- ## v4 Configuration (CSS-First)
15
-
16
- ### The @theme Directive
17
-
18
- ```css
19
- /* app.css — THE configuration file in Tailwind v4 */
20
- @import "tailwindcss";
21
-
22
- @theme {
23
- /* Colors */
24
- --color-primary-50: oklch(0.97 0.02 250);
25
- --color-primary-100: oklch(0.93 0.04 250);
26
- --color-primary-500: oklch(0.55 0.18 250);
27
- --color-primary-600: oklch(0.48 0.18 250);
28
- --color-primary-700: oklch(0.40 0.16 250);
29
- --color-primary-900: oklch(0.25 0.10 250);
30
-
31
- --color-surface: oklch(0.99 0.00 0);
32
- --color-surface-alt: oklch(0.96 0.00 0);
33
- --color-text: oklch(0.15 0.00 0);
34
- --color-text-muted: oklch(0.45 0.00 0);
35
-
36
- /* Typography */
37
- --font-sans: "Inter", "system-ui", sans-serif;
38
- --font-mono: "JetBrains Mono", monospace;
39
-
40
- /* Spacing (extends the default scale) */
41
- --spacing-18: 4.5rem;
42
- --spacing-88: 22rem;
43
-
44
- /* Border radius */
45
- --radius-pill: 9999px;
46
- --radius-card: 1rem;
47
-
48
- /* Shadows */
49
- --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.06);
50
- --shadow-elevated: 0 10px 25px oklch(0 0 0 / 0.1), 0 4px 10px oklch(0 0 0 / 0.05);
51
-
52
- /* Animations */
53
- --animate-fade-in: fade-in 0.3s ease-out;
54
- --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
55
- }
56
-
57
- @keyframes fade-in {
58
- from { opacity: 0; }
59
- to { opacity: 1; }
60
- }
61
-
62
- @keyframes slide-up {
63
- from { opacity: 0; transform: translateY(12px); }
64
- to { opacity: 1; transform: translateY(0); }
65
- }
66
-
67
- /* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use tailwind.config.js
68
- ❌ module.exports = { theme: { extend: { ... } } } ← REMOVED in v4
69
- ✅ Use @theme { } directive in your CSS file
70
- ✅ @import "tailwindcss" replaces the three @tailwind directives */
71
- ```
72
-
73
- ### Dark Mode
74
-
75
- ```css
76
- /* Tailwind v4 dark mode with @theme */
77
- @theme {
78
- --color-surface: oklch(0.99 0.00 0);
79
- --color-text: oklch(0.15 0.00 0);
80
- }
81
-
82
- /* Dark variant — override variables */
83
- @variant dark {
84
- @theme {
85
- --color-surface: oklch(0.13 0.02 260);
86
- --color-text: oklch(0.93 0.00 0);
87
- }
88
- }
89
-
90
- /* Usage in HTML: */
91
- /* <div class="bg-surface text-text dark:bg-surface dark:text-text"> */
92
- /* With the @variant dark override, classes "just work" in dark mode */
93
- ```
94
-
95
- ```html
96
- <!-- Dark mode toggle pattern -->
97
- <html class="dark">
98
- <body class="bg-surface text-text transition-colors duration-300">
99
- <!-- Automatically uses dark @theme values -->
100
- </body>
101
- </html>
102
- ```
103
-
104
- ### Custom Variants
105
-
106
- ```css
107
- /* @variant — custom selector-based variants */
108
- @variant scrolled (&:where([data-scrolled]));
109
- @variant hocus (&:hover, &:focus-visible);
110
-
111
- /* Usage: */
112
- /* <nav class="scrolled:shadow-elevated hocus:ring-2"> */
113
- ```
114
-
115
- ---
116
-
117
- ## Layout Patterns
118
-
119
- ### Flexbox
120
-
121
- ```html
122
- <!-- Centered hero -->
123
- <section class="flex min-h-svh flex-col items-center justify-center gap-6 px-6">
124
- <h1 class="text-5xl font-bold tracking-tight">Hero Title</h1>
125
- <p class="max-w-2xl text-center text-lg text-text-muted">Subtitle text</p>
126
- <div class="flex gap-3">
127
- <button class="rounded-pill bg-primary-600 px-6 py-3 text-white">Primary</button>
128
- <button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">Secondary</button>
129
- </div>
130
- </section>
131
-
132
- <!-- Sidebar layout -->
133
- <div class="flex min-h-svh">
134
- <aside class="w-64 shrink-0 border-r border-gray-200 p-4">Sidebar</aside>
135
- <main class="flex-1 overflow-y-auto p-6">Content</main>
136
- </div>
137
-
138
- <!-- ❌ HALLUCINATION TRAP: Use min-h-svh (small viewport height), NOT min-h-screen
139
- min-h-screen = 100vh (broken on mobile — includes browser chrome)
140
- min-h-svh = 100svh (accounts for mobile browser chrome)
141
- min-h-dvh = 100dvh (dynamic — updates as chrome shows/hides) -->
142
- ```
143
-
144
- ### CSS Grid
145
-
146
- ```html
147
- <!-- Auto-fit responsive grid (no breakpoints needed) -->
148
- <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
149
- <div class="rounded-card bg-surface p-6 shadow-card">Card 1</div>
150
- <div class="rounded-card bg-surface p-6 shadow-card">Card 2</div>
151
- <div class="rounded-card bg-surface p-6 shadow-card">Card 3</div>
152
- </div>
153
-
154
- <!-- Dashboard grid with named areas -->
155
- <div class="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr] min-h-svh">
156
- <header class="col-span-2 border-b">Header</header>
157
- <aside class="border-r p-4">Sidebar</aside>
158
- <main class="overflow-y-auto p-6">Content</main>
159
- </div>
160
-
161
- <!-- Bento grid -->
162
- <div class="grid auto-rows-[180px] grid-cols-3 gap-4">
163
- <div class="col-span-2 row-span-2 rounded-2xl bg-primary-100">Large</div>
164
- <div class="rounded-2xl bg-surface-alt">Small 1</div>
165
- <div class="rounded-2xl bg-surface-alt">Small 2</div>
166
- <div class="col-span-3 rounded-2xl bg-primary-50">Full width</div>
167
- </div>
168
- ```
169
-
170
- ### Container Queries
171
-
172
- ```html
173
- <!-- Container queries — component-level responsiveness -->
174
- <div class="@container">
175
- <div class="flex flex-col gap-3 @sm:flex-row @sm:items-center @lg:gap-6">
176
- <img class="size-16 rounded-full @sm:size-20" src="avatar.jpg" alt="">
177
- <div>
178
- <h3 class="text-lg font-semibold @lg:text-xl">User Name</h3>
179
- <p class="text-sm text-text-muted @lg:text-base">Description</p>
180
- </div>
181
- </div>
182
- </div>
183
-
184
- <!-- Named container -->
185
- <div class="@container/card">
186
- <div class="@md/card:grid @md/card:grid-cols-2">
187
- <!-- Responds to the card container's width, not viewport -->
188
- </div>
189
- </div>
190
-
191
- <!-- ❌ HALLUCINATION TRAP: Container queries use @sm, @md, @lg (with @ prefix)
192
- NOT sm:, md:, lg: — those are VIEWPORT breakpoints
193
- @sm = container >= 320px (component-level)
194
- sm: = viewport >= 640px (page-level) -->
195
- ```
196
-
197
- ---
198
-
199
- ## Typography
200
-
201
- ### Fluid Typography with clamp()
202
-
203
- ```html
204
- <!-- Fluid heading — scales smoothly from 2rem to 4rem -->
205
- <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">
206
- Responsive Heading
207
- </h1>
208
-
209
- <!-- Fluid body text -->
210
- <p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">
211
- Body text that scales with viewport
212
- </p>
213
-
214
- <!-- Prose (for long-form content) -->
215
- <article class="prose prose-lg mx-auto max-w-3xl dark:prose-invert">
216
- <!-- @tailwindcss/typography plugin handles all typography -->
217
- <h1>Article Title</h1>
218
- <p>Paragraph with <a href="#">links</a> and <code>code</code>.</p>
219
- </article>
220
- ```
221
-
222
- ### Font Loading
223
-
224
- ```css
225
- /* @font-face in your CSS (Tailwind v4 approach) */
226
- @font-face {
227
- font-family: "Inter";
228
- font-weight: 100 900;
229
- font-display: swap;
230
- src: url("/fonts/inter-variable.woff2") format("woff2");
231
- }
232
-
233
- @theme {
234
- --font-sans: "Inter", system-ui, sans-serif;
235
- }
236
- ```
237
-
238
- ---
239
-
240
- ## Component Patterns
241
-
242
- ### Button System
243
-
244
- ```html
245
- <!-- Base button with variants -->
246
- <button class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
247
- text-sm font-medium transition-all duration-150
248
- focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500
249
- active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50">
250
- Button Text
251
- </button>
252
-
253
- <!-- Primary variant -->
254
- <button class="... bg-primary-600 text-white shadow-sm hover:bg-primary-700">Primary</button>
255
-
256
- <!-- Ghost variant -->
257
- <button class="... text-text hover:bg-gray-100 dark:hover:bg-gray-800">Ghost</button>
258
-
259
- <!-- Destructive variant -->
260
- <button class="... bg-red-600 text-white hover:bg-red-700">Delete</button>
261
-
262
- <!-- Icon button -->
263
- <button class="grid size-10 place-items-center rounded-lg hover:bg-gray-100"
264
- aria-label="Settings">
265
- <svg class="size-5" ...></svg>
266
- </button>
267
- ```
268
-
269
- ### Input System
270
-
271
- ```html
272
- <!-- Text input -->
273
- <div class="space-y-1.5">
274
- <label for="email" class="text-sm font-medium text-text">Email</label>
275
- <input id="email" type="email" placeholder="you@example.com"
276
- class="w-full rounded-lg border border-gray-300 bg-surface px-3.5 py-2.5
277
- text-sm text-text placeholder:text-text-muted
278
- transition-colors duration-150
279
- focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
280
- disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
281
- />
282
- <p class="text-xs text-red-500">Error message here</p>
283
- </div>
284
-
285
- <!-- Checkbox -->
286
- <label class="flex items-center gap-2.5 text-sm">
287
- <input type="checkbox"
288
- class="size-4 rounded border-gray-300 text-primary-600
289
- focus:ring-2 focus:ring-primary-500/20" />
290
- Remember me
291
- </label>
292
- ```
293
-
294
- ### Card Pattern
295
-
296
- ```html
297
- <div class="group overflow-hidden rounded-card bg-surface shadow-card
298
- transition-shadow duration-200 hover:shadow-elevated">
299
- <div class="aspect-video overflow-hidden bg-gray-100">
300
- <img src="cover.jpg" alt="Cover"
301
- class="size-full object-cover transition-transform duration-300
302
- group-hover:scale-105" />
303
- </div>
304
- <div class="space-y-2 p-5">
305
- <span class="inline-block rounded-full bg-primary-100 px-2.5 py-0.5
306
- text-xs font-medium text-primary-700">Category</span>
307
- <h3 class="text-lg font-semibold text-text line-clamp-2">Card Title</h3>
308
- <p class="text-sm text-text-muted line-clamp-3">Description text...</p>
309
- </div>
310
- </div>
311
- ```
312
-
313
- ### Modal / Dialog
314
-
315
- ```html
316
- <!-- Backdrop -->
317
- <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50
318
- backdrop-blur-sm animate-fade-in">
319
- <!-- Modal -->
320
- <div class="w-full max-w-md rounded-2xl bg-surface p-6 shadow-elevated animate-slide-up"
321
- role="dialog" aria-modal="true" aria-labelledby="modal-title">
322
- <h2 id="modal-title" class="text-lg font-semibold">Dialog Title</h2>
323
- <p class="mt-2 text-sm text-text-muted">Dialog description.</p>
324
-
325
- <div class="mt-6 flex justify-end gap-3">
326
- <button class="rounded-lg px-4 py-2 text-sm hover:bg-gray-100">Cancel</button>
327
- <button class="rounded-lg bg-primary-600 px-4 py-2 text-sm text-white
328
- hover:bg-primary-700">Confirm</button>
329
- </div>
330
- </div>
331
- </div>
332
- ```
333
-
334
- ---
335
-
336
- ## Responsive Design Rules
337
-
338
- ```html
339
- <!-- Tailwind breakpoints (mobile-first) -->
340
- <!-- sm: 640px │ md: 768px │ lg: 1024px │ xl: 1280px │ 2xl: 1536px -->
341
-
342
- <!-- Stack on mobile, row on tablet+ -->
343
- <div class="flex flex-col gap-4 md:flex-row md:items-center">
344
- <div class="md:w-1/2">Left</div>
345
- <div class="md:w-1/2">Right</div>
346
- </div>
347
-
348
- <!-- Hide/show at breakpoints -->
349
- <nav class="hidden lg:flex">Desktop nav</nav>
350
- <button class="lg:hidden">☰ Mobile menu</button>
351
-
352
- <!-- Responsive padding -->
353
- <section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-24">
354
- <div class="mx-auto max-w-7xl">Content</div>
355
- </section>
356
-
357
- <!-- Responsive grid -->
358
- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
359
- <!-- Cards -->
360
- </div>
361
- ```
362
-
363
- ---
364
-
365
- ## Animations & Transitions
366
-
367
- ### Transition Utilities
368
-
369
- ```html
370
- <!-- Smooth hover transitions -->
371
- <a class="text-text-muted transition-colors duration-150 hover:text-primary-600">Link</a>
372
-
373
- <!-- Transform transitions -->
374
- <div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-105">
375
- Hover me
376
- </div>
377
-
378
- <!-- Combined transition -->
379
- <button class="rounded-lg bg-primary-600 px-4 py-2 text-white
380
- transition-all duration-200
381
- hover:bg-primary-700 hover:shadow-lg
382
- active:scale-95">
383
- Click me
384
- </button>
385
- ```
386
-
387
- ### Custom Keyframe Animations
388
-
389
- ```css
390
- @theme {
391
- --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
392
- --animate-spin-slow: spin 3s linear infinite;
393
- --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
394
- }
395
-
396
- @keyframes bounce-in {
397
- 0% { opacity: 0; transform: scale(0.3); }
398
- 50% { transform: scale(1.05); }
399
- 70% { transform: scale(0.9); }
400
- 100% { opacity: 1; transform: scale(1); }
401
- }
402
-
403
- @keyframes pulse-soft {
404
- 0%, 100% { opacity: 1; }
405
- 50% { opacity: 0.7; }
406
- }
407
- ```
408
-
409
- ### Scroll-Driven Animations (CSS Native)
410
-
411
- ```css
412
- /* Progress bar that fills as user scrolls */
413
- .scroll-progress {
414
- animation: grow-width linear;
415
- animation-timeline: scroll();
416
- }
417
-
418
- @keyframes grow-width {
419
- from { transform: scaleX(0); }
420
- to { transform: scaleX(1); }
421
- }
422
- ```
423
-
424
- ```html
425
- <div class="scroll-progress fixed top-0 left-0 z-50 h-1 w-full origin-left bg-primary-600"></div>
426
- ```
427
-
428
- ---
429
-
430
- ## Performance
431
-
432
- ### Purging & Bundle Size
433
-
434
- ```css
435
- /* Tailwind v4 automatically tree-shakes unused CSS at build time */
436
- /* No manual purge configuration needed */
437
-
438
- /* @source — explicitly add content paths for scanning */
439
- @source "../components/**/*.tsx";
440
- @source "../pages/**/*.tsx";
441
-
442
- /* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use purge: [] config
443
- ❌ purge: ['./src/**/*.{html,tsx}'] ← REMOVED in v4
444
- ✅ Uses automatic content detection based on your project structure
445
- ✅ Use @source directive for custom paths */
446
- ```
447
-
448
- ### Avoiding Bloat
449
-
450
- ```html
451
- <!-- ✅ GOOD: Use component extraction for repeated patterns -->
452
- <!-- Create a .btn class in CSS instead of repeating 15 utilities -->
453
-
454
- <!-- ❌ BAD: One-off arbitrary values everywhere -->
455
- <div class="mt-[13px] mr-[7px] p-[11px] text-[15px]">
456
- <!-- Every arbitrary value = unique CSS rule = bundle bloat -->
457
- </div>
458
-
459
- <!-- ✅ GOOD: Use your design scale -->
460
- <div class="mt-3 mr-2 p-3 text-sm">
461
- <!-- Maps to existing utilities = zero extra CSS -->
462
- </div>
463
- ```
464
-
465
- ### Component Extraction (When to @apply)
466
-
467
- ```css
468
- /* Use @apply ONLY for highly reused component patterns */
469
- /* Do NOT @apply everything — it defeats Tailwind's purpose */
470
-
471
- .btn {
472
- @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
473
- text-sm font-medium transition-all duration-150
474
- focus-visible:outline-2 focus-visible:outline-offset-2
475
- active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50;
476
- }
477
-
478
- .btn-primary {
479
- @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700
480
- focus-visible:outline-primary-500;
481
- }
482
-
483
- /* ❌ HALLUCINATION TRAP: @apply is for component patterns shared across files
484
- If a pattern appears in only 1-2 places, just use inline utilities
485
- Over-extracting with @apply = recreating regular CSS with extra steps */
486
- ```
487
-
488
- ---
489
-
490
- ## Accessibility with Tailwind
491
-
492
- ```html
493
- <!-- Focus visible (keyboard only, not mouse click) -->
494
- <a class="rounded-lg focus-visible:outline-2 focus-visible:outline-primary-500
495
- focus-visible:outline-offset-2">
496
- Keyboard accessible link
497
- </a>
498
-
499
- <!-- Screen reader only text -->
500
- <button>
501
- <svg class="size-5" aria-hidden="true"></svg>
502
- <span class="sr-only">Close menu</span>
503
- </button>
504
-
505
- <!-- Motion-safe / motion-reduce -->
506
- <div class="motion-safe:animate-bounce-in motion-reduce:animate-none">
507
- <!-- Only animates if user hasn't enabled "reduce motion" -->
508
- </div>
509
-
510
- <!-- Forced colors mode (high contrast) -->
511
- <button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">
512
- Accessible button
513
- </button>
514
- ```
515
-
516
- ---
517
-
518
-
519
- ---
520
-
521
-
522
-
523
- AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
524
-
525
- 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
526
- 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
527
- 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
528
- 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
529
- 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
530
-
531
- ---
532
-
533
-
534
-
535
- **Slash command: `/review` or `/tribunal-full`**
536
- **Active reviewers: `logic-reviewer` · `security-auditor`**
537
-
538
- ### ❌ Forbidden AI Tropes
539
-
540
- 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
541
- 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
542
- 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
543
-
544
-
545
-
546
- Review these questions before confirming output:
547
- ```
548
- ✅ Did I rely ONLY on real, verified tools and methods?
549
- ✅ Is this solution appropriately scoped to the user's constraints?
550
- ✅ Did I handle potential failure modes and edge cases?
551
- ✅ Have I avoided generic boilerplate that doesn't add value?
552
- ```
553
-
554
- ### 🛑 Verification-Before-Completion (VBC) Protocol
555
-
556
- **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
557
- - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
558
- - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
559
-
560
-
561
- ## Pre-Flight Checklist
562
- - [ ] Have I reviewed the user's specific constraints and requests?
563
- - [ ] Have I checked the environment for relevant existing implementations?
564
-
565
- ## VBC Protocol (Verification-Before-Completion)
566
- You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
1
+ ---
2
+ name: tailwind-patterns
3
+ description: Tailwind CSS v4+ mastery. CSS-first configuration, @theme directive, container queries, scroll-driven animations, logical properties, clamp(), fluid typography, responsive design, dark mode, custom variants, component extraction, and performance optimization. Use when styling with Tailwind, building design systems, or optimizing CSS output.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep
5
+ version: 2.0.0
6
+ last-updated: 2026-04-01
7
+ applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
8
+ routing:
9
+ domain: general
10
+ tier: basic
11
+ ---
12
+
13
+ # Tailwind CSS v4+ — CSS-First Mastery
14
+
15
+ ---
16
+
17
+ ## v4 Configuration (CSS-First)
18
+
19
+ ### The @theme Directive
20
+
21
+ ```css
22
+ /* app.css — THE configuration file in Tailwind v4 */
23
+ @import "tailwindcss";
24
+
25
+ @theme {
26
+ /* Colors */
27
+ --color-primary-50: oklch(0.97 0.02 250);
28
+ --color-primary-100: oklch(0.93 0.04 250);
29
+ --color-primary-500: oklch(0.55 0.18 250);
30
+ --color-primary-600: oklch(0.48 0.18 250);
31
+ --color-primary-700: oklch(0.4 0.16 250);
32
+ --color-primary-900: oklch(0.25 0.1 250);
33
+
34
+ --color-surface: oklch(0.99 0 0);
35
+ --color-surface-alt: oklch(0.96 0 0);
36
+ --color-text: oklch(0.15 0 0);
37
+ --color-text-muted: oklch(0.45 0 0);
38
+
39
+ /* Typography */
40
+ --font-sans: "Inter", "system-ui", sans-serif;
41
+ --font-mono: "JetBrains Mono", monospace;
42
+
43
+ /* Spacing (extends the default scale) */
44
+ --spacing-18: 4.5rem;
45
+ --spacing-88: 22rem;
46
+
47
+ /* Border radius */
48
+ --radius-pill: 9999px;
49
+ --radius-card: 1rem;
50
+
51
+ /* Shadows */
52
+ --shadow-card: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.06);
53
+ --shadow-elevated: 0 10px 25px oklch(0 0 0 / 0.1), 0 4px 10px oklch(0 0 0 / 0.05);
54
+
55
+ /* Animations */
56
+ --animate-fade-in: fade-in 0.3s ease-out;
57
+ --animate-slide-up: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
58
+ }
59
+
60
+ @keyframes fade-in {
61
+ from {
62
+ opacity: 0;
63
+ }
64
+ to {
65
+ opacity: 1;
66
+ }
67
+ }
68
+
69
+ @keyframes slide-up {
70
+ from {
71
+ opacity: 0;
72
+ transform: translateY(12px);
73
+ }
74
+ to {
75
+ opacity: 1;
76
+ transform: translateY(0);
77
+ }
78
+ }
79
+
80
+ /* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use tailwind.config.js
81
+ ❌ module.exports = { theme: { extend: { ... } } } ← REMOVED in v4
82
+ ✅ Use @theme { } directive in your CSS file
83
+ ✅ @import "tailwindcss" replaces the three @tailwind directives */
84
+ ```
85
+
86
+ ### Dark Mode
87
+
88
+ ```css
89
+ /* Tailwind v4 dark mode with @theme */
90
+ @theme {
91
+ --color-surface: oklch(0.99 0 0);
92
+ --color-text: oklch(0.15 0 0);
93
+ }
94
+
95
+ /* Dark variant — override variables */
96
+ @variant dark {
97
+ @theme {
98
+ --color-surface: oklch(0.13 0.02 260);
99
+ --color-text: oklch(0.93 0 0);
100
+ }
101
+ }
102
+
103
+ /* Usage in HTML: */
104
+ /* <div class="bg-surface text-text dark:bg-surface dark:text-text"> */
105
+ /* With the @variant dark override, classes "just work" in dark mode */
106
+ ```
107
+
108
+ ```html
109
+ <!-- Dark mode toggle pattern -->
110
+ <html class="dark">
111
+ <body class="bg-surface text-text transition-colors duration-300">
112
+ <!-- Automatically uses dark @theme values -->
113
+ </body>
114
+ </html>
115
+ ```
116
+
117
+ ### Custom Variants
118
+
119
+ ```css
120
+ /* @variant — custom selector-based variants */
121
+ @variant scrolled (&:where([data-scrolled]));
122
+ @variant hocus (&:hover, &:focus-visible);
123
+
124
+ /* Usage: */
125
+ /* <nav class="scrolled:shadow-elevated hocus:ring-2"> */
126
+ ```
127
+
128
+ ---
129
+
130
+ ## Layout Patterns
131
+
132
+ ### Flexbox
133
+
134
+ ```html
135
+ <!-- Centered hero -->
136
+ <section class="flex min-h-svh flex-col items-center justify-center gap-6 px-6">
137
+ <h1 class="text-5xl font-bold tracking-tight">Hero Title</h1>
138
+ <p class="max-w-2xl text-center text-lg text-text-muted">Subtitle text</p>
139
+ <div class="flex gap-3">
140
+ <button class="rounded-pill bg-primary-600 px-6 py-3 text-white">Primary</button>
141
+ <button class="rounded-pill border border-primary-600 px-6 py-3 text-primary-600">Secondary</button>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Sidebar layout -->
146
+ <div class="flex min-h-svh">
147
+ <aside class="w-64 shrink-0 border-r border-gray-200 p-4">Sidebar</aside>
148
+ <main class="flex-1 overflow-y-auto p-6">Content</main>
149
+ </div>
150
+
151
+ <!-- ❌ HALLUCINATION TRAP: Use min-h-svh (small viewport height), NOT min-h-screen
152
+ min-h-screen = 100vh (broken on mobile — includes browser chrome)
153
+ min-h-svh = 100svh (accounts for mobile browser chrome)
154
+ min-h-dvh = 100dvh (dynamic — updates as chrome shows/hides) -->
155
+ ```
156
+
157
+ ### CSS Grid
158
+
159
+ ```html
160
+ <!-- Auto-fit responsive grid (no breakpoints needed) -->
161
+ <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
162
+ <div class="rounded-card bg-surface p-6 shadow-card">Card 1</div>
163
+ <div class="rounded-card bg-surface p-6 shadow-card">Card 2</div>
164
+ <div class="rounded-card bg-surface p-6 shadow-card">Card 3</div>
165
+ </div>
166
+
167
+ <!-- Dashboard grid with named areas -->
168
+ <div class="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr] min-h-svh">
169
+ <header class="col-span-2 border-b">Header</header>
170
+ <aside class="border-r p-4">Sidebar</aside>
171
+ <main class="overflow-y-auto p-6">Content</main>
172
+ </div>
173
+
174
+ <!-- Bento grid -->
175
+ <div class="grid auto-rows-[180px] grid-cols-3 gap-4">
176
+ <div class="col-span-2 row-span-2 rounded-2xl bg-primary-100">Large</div>
177
+ <div class="rounded-2xl bg-surface-alt">Small 1</div>
178
+ <div class="rounded-2xl bg-surface-alt">Small 2</div>
179
+ <div class="col-span-3 rounded-2xl bg-primary-50">Full width</div>
180
+ </div>
181
+ ```
182
+
183
+ ### Container Queries
184
+
185
+ ```html
186
+ <!-- Container queries — component-level responsiveness -->
187
+ <div class="@container">
188
+ <div class="flex flex-col gap-3 @sm:flex-row @sm:items-center @lg:gap-6">
189
+ <img class="size-16 rounded-full @sm:size-20" src="avatar.jpg" alt="" />
190
+ <div>
191
+ <h3 class="text-lg font-semibold @lg:text-xl">User Name</h3>
192
+ <p class="text-sm text-text-muted @lg:text-base">Description</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Named container -->
198
+ <div class="@container/card">
199
+ <div class="@md/card:grid @md/card:grid-cols-2">
200
+ <!-- Responds to the card container's width, not viewport -->
201
+ </div>
202
+ </div>
203
+
204
+ <!-- ❌ HALLUCINATION TRAP: Container queries use @sm, @md, @lg (with @ prefix)
205
+ NOT sm:, md:, lg: — those are VIEWPORT breakpoints
206
+ @sm = container >= 320px (component-level)
207
+ sm: = viewport >= 640px (page-level) -->
208
+ ```
209
+
210
+ ---
211
+
212
+ ## Typography
213
+
214
+ ### Fluid Typography with clamp()
215
+
216
+ ```html
217
+ <!-- Fluid heading — scales smoothly from 2rem to 4rem -->
218
+ <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight tracking-tight">Responsive Heading</h1>
219
+
220
+ <!-- Fluid body text -->
221
+ <p class="text-[clamp(1rem,1.2vw,1.25rem)] leading-relaxed text-text-muted">Body text that scales with viewport</p>
222
+
223
+ <!-- Prose (for long-form content) -->
224
+ <article class="prose prose-lg mx-auto max-w-3xl dark:prose-invert">
225
+ <!-- @tailwindcss/typography plugin handles all typography -->
226
+ <h1>Article Title</h1>
227
+ <p>Paragraph with <a href="#">links</a> and <code>code</code>.</p>
228
+ </article>
229
+ ```
230
+
231
+ ### Font Loading
232
+
233
+ ```css
234
+ /* @font-face in your CSS (Tailwind v4 approach) */
235
+ @font-face {
236
+ font-family: "Inter";
237
+ font-weight: 100 900;
238
+ font-display: swap;
239
+ src: url("/fonts/inter-variable.woff2") format("woff2");
240
+ }
241
+
242
+ @theme {
243
+ --font-sans: "Inter", system-ui, sans-serif;
244
+ }
245
+ ```
246
+
247
+ ---
248
+
249
+ ## Component Patterns
250
+
251
+ ### Button System
252
+
253
+ ```html
254
+ <!-- Base button with variants -->
255
+ <button
256
+ class="inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
257
+ text-sm font-medium transition-all duration-150
258
+ focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500
259
+ active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
260
+ >
261
+ Button Text
262
+ </button>
263
+
264
+ <!-- Primary variant -->
265
+ <button class="... bg-primary-600 text-white shadow-sm hover:bg-primary-700">Primary</button>
266
+
267
+ <!-- Ghost variant -->
268
+ <button class="... text-text hover:bg-gray-100 dark:hover:bg-gray-800">Ghost</button>
269
+
270
+ <!-- Destructive variant -->
271
+ <button class="... bg-red-600 text-white hover:bg-red-700">Delete</button>
272
+
273
+ <!-- Icon button -->
274
+ <button class="grid size-10 place-items-center rounded-lg hover:bg-gray-100" aria-label="Settings">
275
+ <svg class="size-5" ...></svg>
276
+ </button>
277
+ ```
278
+
279
+ ### Input System
280
+
281
+ ```html
282
+ <!-- Text input -->
283
+ <div class="space-y-1.5">
284
+ <label for="email" class="text-sm font-medium text-text">Email</label>
285
+ <input
286
+ id="email"
287
+ type="email"
288
+ placeholder="you@example.com"
289
+ class="w-full rounded-lg border border-gray-300 bg-surface px-3.5 py-2.5
290
+ text-sm text-text placeholder:text-text-muted
291
+ transition-colors duration-150
292
+ focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
293
+ disabled:cursor-not-allowed disabled:bg-gray-50 disabled:opacity-60"
294
+ />
295
+ <p class="text-xs text-red-500">Error message here</p>
296
+ </div>
297
+
298
+ <!-- Checkbox -->
299
+ <label class="flex items-center gap-2.5 text-sm">
300
+ <input
301
+ type="checkbox"
302
+ class="size-4 rounded border-gray-300 text-primary-600
303
+ focus:ring-2 focus:ring-primary-500/20"
304
+ />
305
+ Remember me
306
+ </label>
307
+ ```
308
+
309
+ ### Card Pattern
310
+
311
+ ```html
312
+ <div
313
+ class="group overflow-hidden rounded-card bg-surface shadow-card
314
+ transition-shadow duration-200 hover:shadow-elevated"
315
+ >
316
+ <div class="aspect-video overflow-hidden bg-gray-100">
317
+ <img
318
+ src="cover.jpg"
319
+ alt="Cover"
320
+ class="size-full object-cover transition-transform duration-300
321
+ group-hover:scale-105"
322
+ />
323
+ </div>
324
+ <div class="space-y-2 p-5">
325
+ <span
326
+ class="inline-block rounded-full bg-primary-100 px-2.5 py-0.5
327
+ text-xs font-medium text-primary-700"
328
+ >Category</span
329
+ >
330
+ <h3 class="text-lg font-semibold text-text line-clamp-2">Card Title</h3>
331
+ <p class="text-sm text-text-muted line-clamp-3">Description text...</p>
332
+ </div>
333
+ </div>
334
+ ```
335
+
336
+ ### Modal / Dialog
337
+
338
+ ```html
339
+ <!-- Backdrop -->
340
+ <div
341
+ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50
342
+ backdrop-blur-sm animate-fade-in"
343
+ >
344
+ <!-- Modal -->
345
+ <div class="w-full max-w-md rounded-2xl bg-surface p-6 shadow-elevated animate-slide-up" role="dialog" aria-modal="true" aria-labelledby="modal-title">
346
+ <h2 id="modal-title" class="text-lg font-semibold">Dialog Title</h2>
347
+ <p class="mt-2 text-sm text-text-muted">Dialog description.</p>
348
+
349
+ <div class="mt-6 flex justify-end gap-3">
350
+ <button class="rounded-lg px-4 py-2 text-sm hover:bg-gray-100">Cancel</button>
351
+ <button
352
+ class="rounded-lg bg-primary-600 px-4 py-2 text-sm text-white
353
+ hover:bg-primary-700"
354
+ >
355
+ Confirm
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ ```
361
+
362
+ ---
363
+
364
+ ## Responsive Design Rules
365
+
366
+ ```html
367
+ <!-- Tailwind breakpoints (mobile-first) -->
368
+ <!-- sm: 640px │ md: 768px │ lg: 1024px │ xl: 1280px │ 2xl: 1536px -->
369
+
370
+ <!-- Stack on mobile, row on tablet+ -->
371
+ <div class="flex flex-col gap-4 md:flex-row md:items-center">
372
+ <div class="md:w-1/2">Left</div>
373
+ <div class="md:w-1/2">Right</div>
374
+ </div>
375
+
376
+ <!-- Hide/show at breakpoints -->
377
+ <nav class="hidden lg:flex">Desktop nav</nav>
378
+ <button class="lg:hidden">☰ Mobile menu</button>
379
+
380
+ <!-- Responsive padding -->
381
+ <section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-24">
382
+ <div class="mx-auto max-w-7xl">Content</div>
383
+ </section>
384
+
385
+ <!-- Responsive grid -->
386
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
387
+ <!-- Cards -->
388
+ </div>
389
+ ```
567
390
 
391
+ ---
392
+
393
+ ## Animations & Transitions
394
+
395
+ ### Transition Utilities
396
+
397
+ ```html
398
+ <!-- Smooth hover transitions -->
399
+ <a class="text-text-muted transition-colors duration-150 hover:text-primary-600">Link</a>
400
+
401
+ <!-- Transform transitions -->
402
+ <div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-105">Hover me</div>
403
+
404
+ <!-- Combined transition -->
405
+ <button
406
+ class="rounded-lg bg-primary-600 px-4 py-2 text-white
407
+ transition-all duration-200
408
+ hover:bg-primary-700 hover:shadow-lg
409
+ active:scale-95"
410
+ >
411
+ Click me
412
+ </button>
413
+ ```
414
+
415
+ ### Custom Keyframe Animations
416
+
417
+ ```css
418
+ @theme {
419
+ --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
420
+ --animate-spin-slow: spin 3s linear infinite;
421
+ --animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
422
+ }
423
+
424
+ @keyframes bounce-in {
425
+ 0% {
426
+ opacity: 0;
427
+ transform: scale(0.3);
428
+ }
429
+ 50% {
430
+ transform: scale(1.05);
431
+ }
432
+ 70% {
433
+ transform: scale(0.9);
434
+ }
435
+ 100% {
436
+ opacity: 1;
437
+ transform: scale(1);
438
+ }
439
+ }
440
+
441
+ @keyframes pulse-soft {
442
+ 0%,
443
+ 100% {
444
+ opacity: 1;
445
+ }
446
+ 50% {
447
+ opacity: 0.7;
448
+ }
449
+ }
450
+ ```
451
+
452
+ ### Scroll-Driven Animations (CSS Native)
453
+
454
+ ```css
455
+ /* Progress bar that fills as user scrolls */
456
+ .scroll-progress {
457
+ animation: grow-width linear;
458
+ animation-timeline: scroll();
459
+ }
460
+
461
+ @keyframes grow-width {
462
+ from {
463
+ transform: scaleX(0);
464
+ }
465
+ to {
466
+ transform: scaleX(1);
467
+ }
468
+ }
469
+ ```
470
+
471
+ ```html
472
+ <div class="scroll-progress fixed top-0 left-0 z-50 h-1 w-full origin-left bg-primary-600"></div>
473
+ ```
474
+
475
+ ---
476
+
477
+ ## Performance
478
+
479
+ ### Purging & Bundle Size
480
+
481
+ ```css
482
+ /* Tailwind v4 automatically tree-shakes unused CSS at build time */
483
+ /* No manual purge configuration needed */
484
+
485
+ /* @source — explicitly add content paths for scanning */
486
+ @source "../components/**/*.tsx";
487
+ @source "../pages/**/*.tsx";
488
+
489
+ /* ❌ HALLUCINATION TRAP: Tailwind v4 does NOT use purge: [] config
490
+ ❌ purge: ['./src/**/*.{html,tsx}'] ← REMOVED in v4
491
+ ✅ Uses automatic content detection based on your project structure
492
+ ✅ Use @source directive for custom paths */
493
+ ```
494
+
495
+ ### Avoiding Bloat
496
+
497
+ ```html
498
+ <!-- ✅ GOOD: Use component extraction for repeated patterns -->
499
+ <!-- Create a .btn class in CSS instead of repeating 15 utilities -->
500
+
501
+ <!-- ❌ BAD: One-off arbitrary values everywhere -->
502
+ <div class="mt-[13px] mr-[7px] p-[11px] text-[15px]">
503
+ <!-- Every arbitrary value = unique CSS rule = bundle bloat -->
504
+ </div>
505
+
506
+ <!-- ✅ GOOD: Use your design scale -->
507
+ <div class="mt-3 mr-2 p-3 text-sm">
508
+ <!-- Maps to existing utilities = zero extra CSS -->
509
+ </div>
510
+ ```
511
+
512
+ ### Component Extraction (When to @apply)
513
+
514
+ ```css
515
+ /* Use @apply ONLY for highly reused component patterns */
516
+ /* Do NOT @apply everything — it defeats Tailwind's purpose */
517
+
518
+ .btn {
519
+ @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5
520
+ text-sm font-medium transition-all duration-150
521
+ focus-visible:outline-2 focus-visible:outline-offset-2
522
+ active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50;
523
+ }
524
+
525
+ .btn-primary {
526
+ @apply btn bg-primary-600 text-white shadow-sm hover:bg-primary-700
527
+ focus-visible:outline-primary-500;
528
+ }
529
+
530
+ /* ❌ HALLUCINATION TRAP: @apply is for component patterns shared across files
531
+ If a pattern appears in only 1-2 places, just use inline utilities
532
+ Over-extracting with @apply = recreating regular CSS with extra steps */
533
+ ```
534
+
535
+ ---
536
+
537
+ ## Accessibility with Tailwind
538
+
539
+ ```html
540
+ <!-- Focus visible (keyboard only, not mouse click) -->
541
+ <a
542
+ class="rounded-lg focus-visible:outline-2 focus-visible:outline-primary-500
543
+ focus-visible:outline-offset-2"
544
+ >
545
+ Keyboard accessible link
546
+ </a>
547
+
548
+ <!-- Screen reader only text -->
549
+ <button>
550
+ <svg class="size-5" aria-hidden="true"></svg>
551
+ <span class="sr-only">Close menu</span>
552
+ </button>
553
+
554
+ <!-- Motion-safe / motion-reduce -->
555
+ <div class="motion-safe:animate-bounce-in motion-reduce:animate-none">
556
+ <!-- Only animates if user hasn't enabled "reduce motion" -->
557
+ </div>
558
+
559
+ <!-- Forced colors mode (high contrast) -->
560
+ <button class="bg-primary-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]">Accessible button</button>
561
+ ```
562
+
563
+ ---
564
+
565
+ ---
566
+
567
+ AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
568
+
569
+ 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
570
+ 2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
571
+ 3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
572
+ 4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
573
+ 5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
574
+
575
+ ---
576
+
577
+ **Slash command: `/review` or `/tribunal-full`**
578
+ **Active reviewers: `logic-reviewer` · `security-auditor`**
579
+
580
+ ### ❌ Forbidden AI Tropes
581
+
582
+ 1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
583
+ 2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
584
+ 3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
585
+
586
+ Review these questions before confirming output:
587
+
588
+ ```
589
+ ✅ Did I rely ONLY on real, verified tools and methods?
590
+ ✅ Is this solution appropriately scoped to the user's constraints?
591
+ ✅ Did I handle potential failure modes and edge cases?
592
+ ✅ Have I avoided generic boilerplate that doesn't add value?
593
+ ```
594
+
595
+ ### 🛑 Verification-Before-Completion (VBC) Protocol
596
+
597
+ **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
598
+
599
+ - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
600
+ - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
601
+
602
+ ## Pre-Flight Checklist
603
+
604
+ - [ ] Have I reviewed the user's specific constraints and requests?
605
+ - [ ] Have I checked the environment for relevant existing implementations?
606
+
607
+ ## VBC Protocol (Verification-Before-Completion)
608
+
609
+ You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
568
610
 
569
611
  ---
570
612
 
@@ -594,6 +636,7 @@ AI coding assistants often fall into specific bad habits when dealing with this
594
636
  ### ✅ Pre-Flight Self-Audit
595
637
 
596
638
  Review these questions before confirming output:
639
+
597
640
  ```
598
641
  ✅ Did I rely ONLY on real, verified tools and methods?
599
642
  ✅ Is this solution appropriately scoped to the user's constraints?
@@ -604,5 +647,6 @@ Review these questions before confirming output:
604
647
  ### 🛑 Verification-Before-Completion (VBC) Protocol
605
648
 
606
649
  **CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
650
+
607
651
  - ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
608
652
  - ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.