@musashishao/agent-kit 1.0.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 (220) hide show
  1. package/.agent/.shared/ui-ux-pro-max/data/charts.csv +26 -0
  2. package/.agent/.shared/ui-ux-pro-max/data/colors.csv +97 -0
  3. package/.agent/.shared/ui-ux-pro-max/data/icons.csv +101 -0
  4. package/.agent/.shared/ui-ux-pro-max/data/landing.csv +31 -0
  5. package/.agent/.shared/ui-ux-pro-max/data/products.csv +97 -0
  6. package/.agent/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
  7. package/.agent/.shared/ui-ux-pro-max/data/react-performance.csv +45 -0
  8. package/.agent/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  9. package/.agent/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  10. package/.agent/.shared/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
  11. package/.agent/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  12. package/.agent/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  13. package/.agent/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  14. package/.agent/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  15. package/.agent/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
  16. package/.agent/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  17. package/.agent/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  18. package/.agent/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  19. package/.agent/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  20. package/.agent/.shared/ui-ux-pro-max/data/styles.csv +59 -0
  21. package/.agent/.shared/ui-ux-pro-max/data/typography.csv +58 -0
  22. package/.agent/.shared/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
  23. package/.agent/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  24. package/.agent/.shared/ui-ux-pro-max/data/web-interface.csv +31 -0
  25. package/.agent/.shared/ui-ux-pro-max/scripts/core.py +258 -0
  26. package/.agent/.shared/ui-ux-pro-max/scripts/design_system.py +487 -0
  27. package/.agent/.shared/ui-ux-pro-max/scripts/search.py +76 -0
  28. package/.agent/ARCHITECTURE.md +225 -0
  29. package/.agent/CONTEXT.md +229 -0
  30. package/.agent/FEATURE_ROADMAP.md +435 -0
  31. package/.agent/PROMPT_TEMPLATES.md +261 -0
  32. package/.agent/agents/backend-specialist.md +263 -0
  33. package/.agent/agents/database-architect.md +226 -0
  34. package/.agent/agents/debugger.md +225 -0
  35. package/.agent/agents/devops-engineer.md +242 -0
  36. package/.agent/agents/documentation-writer.md +104 -0
  37. package/.agent/agents/explorer-agent.md +73 -0
  38. package/.agent/agents/frontend-specialist.md +556 -0
  39. package/.agent/agents/game-developer.md +162 -0
  40. package/.agent/agents/mobile-developer.md +377 -0
  41. package/.agent/agents/orchestrator.md +416 -0
  42. package/.agent/agents/penetration-tester.md +188 -0
  43. package/.agent/agents/performance-optimizer.md +187 -0
  44. package/.agent/agents/project-planner.md +403 -0
  45. package/.agent/agents/security-auditor.md +170 -0
  46. package/.agent/agents/seo-specialist.md +111 -0
  47. package/.agent/agents/test-engineer.md +158 -0
  48. package/.agent/rules/GEMINI.md +251 -0
  49. package/.agent/skills/api-patterns/SKILL.md +81 -0
  50. package/.agent/skills/api-patterns/api-style.md +42 -0
  51. package/.agent/skills/api-patterns/auth.md +24 -0
  52. package/.agent/skills/api-patterns/documentation.md +26 -0
  53. package/.agent/skills/api-patterns/graphql.md +41 -0
  54. package/.agent/skills/api-patterns/rate-limiting.md +31 -0
  55. package/.agent/skills/api-patterns/response.md +37 -0
  56. package/.agent/skills/api-patterns/rest.md +40 -0
  57. package/.agent/skills/api-patterns/scripts/api_validator.py +211 -0
  58. package/.agent/skills/api-patterns/security-testing.md +122 -0
  59. package/.agent/skills/api-patterns/trpc.md +41 -0
  60. package/.agent/skills/api-patterns/versioning.md +22 -0
  61. package/.agent/skills/app-builder/SKILL.md +75 -0
  62. package/.agent/skills/app-builder/agent-coordination.md +71 -0
  63. package/.agent/skills/app-builder/feature-building.md +53 -0
  64. package/.agent/skills/app-builder/project-detection.md +34 -0
  65. package/.agent/skills/app-builder/scaffolding.md +118 -0
  66. package/.agent/skills/app-builder/tech-stack.md +40 -0
  67. package/.agent/skills/app-builder/templates/SKILL.md +39 -0
  68. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -0
  69. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -0
  70. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -0
  71. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -0
  72. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -0
  73. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -0
  74. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -0
  75. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +82 -0
  76. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +100 -0
  77. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +106 -0
  78. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +101 -0
  79. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -0
  80. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +93 -0
  81. package/.agent/skills/architecture/SKILL.md +55 -0
  82. package/.agent/skills/architecture/context-discovery.md +43 -0
  83. package/.agent/skills/architecture/examples.md +94 -0
  84. package/.agent/skills/architecture/pattern-selection.md +68 -0
  85. package/.agent/skills/architecture/patterns-reference.md +50 -0
  86. package/.agent/skills/architecture/trade-off-analysis.md +77 -0
  87. package/.agent/skills/bash-linux/SKILL.md +199 -0
  88. package/.agent/skills/behavioral-modes/SKILL.md +242 -0
  89. package/.agent/skills/brainstorming/SKILL.md +163 -0
  90. package/.agent/skills/brainstorming/dynamic-questioning.md +350 -0
  91. package/.agent/skills/clean-code/SKILL.md +201 -0
  92. package/.agent/skills/code-review-checklist/SKILL.md +109 -0
  93. package/.agent/skills/database-design/SKILL.md +52 -0
  94. package/.agent/skills/database-design/database-selection.md +43 -0
  95. package/.agent/skills/database-design/indexing.md +39 -0
  96. package/.agent/skills/database-design/migrations.md +48 -0
  97. package/.agent/skills/database-design/optimization.md +36 -0
  98. package/.agent/skills/database-design/orm-selection.md +30 -0
  99. package/.agent/skills/database-design/schema-design.md +56 -0
  100. package/.agent/skills/database-design/scripts/schema_validator.py +172 -0
  101. package/.agent/skills/deployment-procedures/SKILL.md +241 -0
  102. package/.agent/skills/doc.md +177 -0
  103. package/.agent/skills/docker-expert/SKILL.md +409 -0
  104. package/.agent/skills/documentation-templates/SKILL.md +194 -0
  105. package/.agent/skills/frontend-design/SKILL.md +396 -0
  106. package/.agent/skills/frontend-design/animation-guide.md +331 -0
  107. package/.agent/skills/frontend-design/color-system.md +311 -0
  108. package/.agent/skills/frontend-design/decision-trees.md +418 -0
  109. package/.agent/skills/frontend-design/motion-graphics.md +306 -0
  110. package/.agent/skills/frontend-design/scripts/accessibility_checker.py +183 -0
  111. package/.agent/skills/frontend-design/scripts/ux_audit.py +722 -0
  112. package/.agent/skills/frontend-design/typography-system.md +345 -0
  113. package/.agent/skills/frontend-design/ux-psychology.md +541 -0
  114. package/.agent/skills/frontend-design/visual-effects.md +383 -0
  115. package/.agent/skills/game-development/2d-games/SKILL.md +119 -0
  116. package/.agent/skills/game-development/3d-games/SKILL.md +135 -0
  117. package/.agent/skills/game-development/SKILL.md +167 -0
  118. package/.agent/skills/game-development/game-art/SKILL.md +185 -0
  119. package/.agent/skills/game-development/game-audio/SKILL.md +190 -0
  120. package/.agent/skills/game-development/game-design/SKILL.md +129 -0
  121. package/.agent/skills/game-development/mobile-games/SKILL.md +108 -0
  122. package/.agent/skills/game-development/multiplayer/SKILL.md +132 -0
  123. package/.agent/skills/game-development/pc-games/SKILL.md +144 -0
  124. package/.agent/skills/game-development/vr-ar/SKILL.md +123 -0
  125. package/.agent/skills/game-development/web-games/SKILL.md +150 -0
  126. package/.agent/skills/geo-fundamentals/SKILL.md +156 -0
  127. package/.agent/skills/geo-fundamentals/scripts/geo_checker.py +289 -0
  128. package/.agent/skills/i18n-localization/SKILL.md +154 -0
  129. package/.agent/skills/i18n-localization/scripts/i18n_checker.py +241 -0
  130. package/.agent/skills/lint-and-validate/SKILL.md +45 -0
  131. package/.agent/skills/lint-and-validate/scripts/lint_runner.py +172 -0
  132. package/.agent/skills/lint-and-validate/scripts/type_coverage.py +173 -0
  133. package/.agent/skills/mcp-builder/SKILL.md +176 -0
  134. package/.agent/skills/mobile-design/SKILL.md +394 -0
  135. package/.agent/skills/mobile-design/decision-trees.md +516 -0
  136. package/.agent/skills/mobile-design/mobile-backend.md +491 -0
  137. package/.agent/skills/mobile-design/mobile-color-system.md +420 -0
  138. package/.agent/skills/mobile-design/mobile-debugging.md +122 -0
  139. package/.agent/skills/mobile-design/mobile-design-thinking.md +357 -0
  140. package/.agent/skills/mobile-design/mobile-navigation.md +458 -0
  141. package/.agent/skills/mobile-design/mobile-performance.md +767 -0
  142. package/.agent/skills/mobile-design/mobile-testing.md +356 -0
  143. package/.agent/skills/mobile-design/mobile-typography.md +433 -0
  144. package/.agent/skills/mobile-design/platform-android.md +666 -0
  145. package/.agent/skills/mobile-design/platform-ios.md +561 -0
  146. package/.agent/skills/mobile-design/scripts/mobile_audit.py +670 -0
  147. package/.agent/skills/mobile-design/touch-psychology.md +537 -0
  148. package/.agent/skills/nestjs-expert/SKILL.md +552 -0
  149. package/.agent/skills/nextjs-best-practices/SKILL.md +203 -0
  150. package/.agent/skills/nodejs-best-practices/SKILL.md +333 -0
  151. package/.agent/skills/parallel-agents/SKILL.md +175 -0
  152. package/.agent/skills/performance-profiling/SKILL.md +143 -0
  153. package/.agent/skills/performance-profiling/scripts/lighthouse_audit.py +76 -0
  154. package/.agent/skills/plan-writing/SKILL.md +152 -0
  155. package/.agent/skills/powershell-windows/SKILL.md +167 -0
  156. package/.agent/skills/prisma-expert/SKILL.md +355 -0
  157. package/.agent/skills/python-patterns/SKILL.md +441 -0
  158. package/.agent/skills/react-patterns/SKILL.md +198 -0
  159. package/.agent/skills/red-team-tactics/SKILL.md +199 -0
  160. package/.agent/skills/seo-fundamentals/SKILL.md +129 -0
  161. package/.agent/skills/seo-fundamentals/scripts/seo_checker.py +219 -0
  162. package/.agent/skills/server-management/SKILL.md +161 -0
  163. package/.agent/skills/systematic-debugging/SKILL.md +109 -0
  164. package/.agent/skills/tailwind-patterns/SKILL.md +269 -0
  165. package/.agent/skills/tdd-workflow/SKILL.md +149 -0
  166. package/.agent/skills/testing-patterns/SKILL.md +178 -0
  167. package/.agent/skills/testing-patterns/scripts/test_runner.py +219 -0
  168. package/.agent/skills/typescript-expert/SKILL.md +429 -0
  169. package/.agent/skills/typescript-expert/references/tsconfig-strict.json +92 -0
  170. package/.agent/skills/typescript-expert/references/typescript-cheatsheet.md +383 -0
  171. package/.agent/skills/typescript-expert/references/utility-types.ts +335 -0
  172. package/.agent/skills/typescript-expert/scripts/ts_diagnostic.py +203 -0
  173. package/.agent/skills/ui-ux-pro-max/SKILL.md +351 -0
  174. package/.agent/skills/ui-ux-pro-max/data/charts.csv +26 -0
  175. package/.agent/skills/ui-ux-pro-max/data/colors.csv +97 -0
  176. package/.agent/skills/ui-ux-pro-max/data/icons.csv +101 -0
  177. package/.agent/skills/ui-ux-pro-max/data/landing.csv +31 -0
  178. package/.agent/skills/ui-ux-pro-max/data/products.csv +97 -0
  179. package/.agent/skills/ui-ux-pro-max/data/prompts.csv +24 -0
  180. package/.agent/skills/ui-ux-pro-max/data/react-performance.csv +45 -0
  181. package/.agent/skills/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  182. package/.agent/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  183. package/.agent/skills/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  184. package/.agent/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  185. package/.agent/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  186. package/.agent/skills/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  187. package/.agent/skills/ui-ux-pro-max/data/stacks/react.csv +54 -0
  188. package/.agent/skills/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  189. package/.agent/skills/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  190. package/.agent/skills/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  191. package/.agent/skills/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  192. package/.agent/skills/ui-ux-pro-max/data/styles.csv +59 -0
  193. package/.agent/skills/ui-ux-pro-max/data/typography.csv +58 -0
  194. package/.agent/skills/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
  195. package/.agent/skills/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  196. package/.agent/skills/ui-ux-pro-max/data/web-interface.csv +31 -0
  197. package/.agent/skills/ui-ux-pro-max/scripts/core.py +257 -0
  198. package/.agent/skills/ui-ux-pro-max/scripts/design_system.py +487 -0
  199. package/.agent/skills/ui-ux-pro-max/scripts/search.py +76 -0
  200. package/.agent/skills/vulnerability-scanner/SKILL.md +276 -0
  201. package/.agent/skills/vulnerability-scanner/checklists.md +121 -0
  202. package/.agent/skills/vulnerability-scanner/scripts/security_scan.py +458 -0
  203. package/.agent/skills/webapp-testing/SKILL.md +187 -0
  204. package/.agent/skills/webapp-testing/scripts/playwright_runner.py +173 -0
  205. package/.agent/workflows/brainstorm.md +113 -0
  206. package/.agent/workflows/create.md +59 -0
  207. package/.agent/workflows/debug.md +103 -0
  208. package/.agent/workflows/deploy.md +176 -0
  209. package/.agent/workflows/enhance.md +63 -0
  210. package/.agent/workflows/orchestrate.md +237 -0
  211. package/.agent/workflows/plan.md +89 -0
  212. package/.agent/workflows/preview.md +80 -0
  213. package/.agent/workflows/status.md +86 -0
  214. package/.agent/workflows/test.md +144 -0
  215. package/.agent/workflows/ui-ux-pro-max.md +231 -0
  216. package/LICENSE +21 -0
  217. package/README.md +101 -0
  218. package/bin/cli.js +235 -0
  219. package/index.js +1 -0
  220. package/package.json +43 -0
@@ -0,0 +1,109 @@
1
+ ---
2
+ name: systematic-debugging
3
+ description: 4-phase systematic debugging methodology with root cause analysis and evidence-based verification. Use when debugging complex issues.
4
+ allowed-tools: Read, Glob, Grep
5
+ ---
6
+
7
+ # Systematic Debugging
8
+
9
+ > Source: obra/superpowers
10
+
11
+ ## Overview
12
+ This skill provides a structured approach to debugging that prevents random guessing and ensures problems are properly understood before solving.
13
+
14
+ ## 4-Phase Debugging Process
15
+
16
+ ### Phase 1: Reproduce
17
+ Before fixing, reliably reproduce the issue.
18
+
19
+ ```markdown
20
+ ## Reproduction Steps
21
+ 1. [Exact step to reproduce]
22
+ 2. [Next step]
23
+ 3. [Expected vs actual result]
24
+
25
+ ## Reproduction Rate
26
+ - [ ] Always (100%)
27
+ - [ ] Often (50-90%)
28
+ - [ ] Sometimes (10-50%)
29
+ - [ ] Rare (<10%)
30
+ ```
31
+
32
+ ### Phase 2: Isolate
33
+ Narrow down the source.
34
+
35
+ ```markdown
36
+ ## Isolation Questions
37
+ - When did this start happening?
38
+ - What changed recently?
39
+ - Does it happen in all environments?
40
+ - Can we reproduce with minimal code?
41
+ - What's the smallest change that triggers it?
42
+ ```
43
+
44
+ ### Phase 3: Understand
45
+ Find the root cause, not just symptoms.
46
+
47
+ ```markdown
48
+ ## Root Cause Analysis
49
+ ### The 5 Whys
50
+ 1. Why: [First observation]
51
+ 2. Why: [Deeper reason]
52
+ 3. Why: [Still deeper]
53
+ 4. Why: [Getting closer]
54
+ 5. Why: [Root cause]
55
+ ```
56
+
57
+ ### Phase 4: Fix & Verify
58
+ Fix and verify it's truly fixed.
59
+
60
+ ```markdown
61
+ ## Fix Verification
62
+ - [ ] Bug no longer reproduces
63
+ - [ ] Related functionality still works
64
+ - [ ] No new issues introduced
65
+ - [ ] Test added to prevent regression
66
+ ```
67
+
68
+ ## Debugging Checklist
69
+
70
+ ```markdown
71
+ ## Before Starting
72
+ - [ ] Can reproduce consistently
73
+ - [ ] Have minimal reproduction case
74
+ - [ ] Understand expected behavior
75
+
76
+ ## During Investigation
77
+ - [ ] Check recent changes (git log)
78
+ - [ ] Check logs for errors
79
+ - [ ] Add logging if needed
80
+ - [ ] Use debugger/breakpoints
81
+
82
+ ## After Fix
83
+ - [ ] Root cause documented
84
+ - [ ] Fix verified
85
+ - [ ] Regression test added
86
+ - [ ] Similar code checked
87
+ ```
88
+
89
+ ## Common Debugging Commands
90
+
91
+ ```bash
92
+ # Recent changes
93
+ git log --oneline -20
94
+ git diff HEAD~5
95
+
96
+ # Search for pattern
97
+ grep -r "errorPattern" --include="*.ts"
98
+
99
+ # Check logs
100
+ pm2 logs app-name --err --lines 100
101
+ ```
102
+
103
+ ## Anti-Patterns
104
+
105
+ ❌ **Random changes** - "Maybe if I change this..."
106
+ ❌ **Ignoring evidence** - "That can't be the cause"
107
+ ❌ **Assuming** - "It must be X" without proof
108
+ ❌ **Not reproducing first** - Fixing blindly
109
+ ❌ **Stopping at symptoms** - Not finding root cause
@@ -0,0 +1,269 @@
1
+ ---
2
+ name: tailwind-patterns
3
+ description: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep
5
+ ---
6
+
7
+ # Tailwind CSS Patterns (v4 - 2025)
8
+
9
+ > Modern utility-first CSS with CSS-native configuration.
10
+
11
+ ---
12
+
13
+ ## 1. Tailwind v4 Architecture
14
+
15
+ ### What Changed from v3
16
+
17
+ | v3 (Legacy) | v4 (Current) |
18
+ |-------------|--------------|
19
+ | `tailwind.config.js` | CSS-based `@theme` directive |
20
+ | PostCSS plugin | Oxide engine (10x faster) |
21
+ | JIT mode | Native, always-on |
22
+ | Plugin system | CSS-native features |
23
+ | `@apply` directive | Still works, discouraged |
24
+
25
+ ### v4 Core Concepts
26
+
27
+ | Concept | Description |
28
+ |---------|-------------|
29
+ | **CSS-first** | Configuration in CSS, not JavaScript |
30
+ | **Oxide Engine** | Rust-based compiler, much faster |
31
+ | **Native Nesting** | CSS nesting without PostCSS |
32
+ | **CSS Variables** | All tokens exposed as `--*` vars |
33
+
34
+ ---
35
+
36
+ ## 2. CSS-Based Configuration
37
+
38
+ ### Theme Definition
39
+
40
+ ```
41
+ @theme {
42
+ /* Colors - use semantic names */
43
+ --color-primary: oklch(0.7 0.15 250);
44
+ --color-surface: oklch(0.98 0 0);
45
+ --color-surface-dark: oklch(0.15 0 0);
46
+
47
+ /* Spacing scale */
48
+ --spacing-xs: 0.25rem;
49
+ --spacing-sm: 0.5rem;
50
+ --spacing-md: 1rem;
51
+ --spacing-lg: 2rem;
52
+
53
+ /* Typography */
54
+ --font-sans: 'Inter', system-ui, sans-serif;
55
+ --font-mono: 'JetBrains Mono', monospace;
56
+ }
57
+ ```
58
+
59
+ ### When to Extend vs Override
60
+
61
+ | Action | Use When |
62
+ |--------|----------|
63
+ | **Extend** | Adding new values alongside defaults |
64
+ | **Override** | Replacing default scale entirely |
65
+ | **Semantic tokens** | Project-specific naming (primary, surface) |
66
+
67
+ ---
68
+
69
+ ## 3. Container Queries (v4 Native)
70
+
71
+ ### Breakpoint vs Container
72
+
73
+ | Type | Responds To |
74
+ |------|-------------|
75
+ | **Breakpoint** (`md:`) | Viewport width |
76
+ | **Container** (`@container`) | Parent element width |
77
+
78
+ ### Container Query Usage
79
+
80
+ | Pattern | Classes |
81
+ |---------|---------|
82
+ | Define container | `@container` on parent |
83
+ | Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |
84
+ | Named containers | `@container/card` for specificity |
85
+
86
+ ### When to Use
87
+
88
+ | Scenario | Use |
89
+ |----------|-----|
90
+ | Page-level layouts | Viewport breakpoints |
91
+ | Component-level responsive | Container queries |
92
+ | Reusable components | Container queries (context-independent) |
93
+
94
+ ---
95
+
96
+ ## 4. Responsive Design
97
+
98
+ ### Breakpoint System
99
+
100
+ | Prefix | Min Width | Target |
101
+ |--------|-----------|--------|
102
+ | (none) | 0px | Mobile-first base |
103
+ | `sm:` | 640px | Large phone / small tablet |
104
+ | `md:` | 768px | Tablet |
105
+ | `lg:` | 1024px | Laptop |
106
+ | `xl:` | 1280px | Desktop |
107
+ | `2xl:` | 1536px | Large desktop |
108
+
109
+ ### Mobile-First Principle
110
+
111
+ 1. Write mobile styles first (no prefix)
112
+ 2. Add larger screen overrides with prefixes
113
+ 3. Example: `w-full md:w-1/2 lg:w-1/3`
114
+
115
+ ---
116
+
117
+ ## 5. Dark Mode
118
+
119
+ ### Configuration Strategies
120
+
121
+ | Method | Behavior | Use When |
122
+ |--------|----------|----------|
123
+ | `class` | `.dark` class toggles | Manual theme switcher |
124
+ | `media` | Follows system preference | No user control |
125
+ | `selector` | Custom selector (v4) | Complex theming |
126
+
127
+ ### Dark Mode Pattern
128
+
129
+ | Element | Light | Dark |
130
+ |---------|-------|------|
131
+ | Background | `bg-white` | `dark:bg-zinc-900` |
132
+ | Text | `text-zinc-900` | `dark:text-zinc-100` |
133
+ | Borders | `border-zinc-200` | `dark:border-zinc-700` |
134
+
135
+ ---
136
+
137
+ ## 6. Modern Layout Patterns
138
+
139
+ ### Flexbox Patterns
140
+
141
+ | Pattern | Classes |
142
+ |---------|---------|
143
+ | Center (both axes) | `flex items-center justify-center` |
144
+ | Vertical stack | `flex flex-col gap-4` |
145
+ | Horizontal row | `flex gap-4` |
146
+ | Space between | `flex justify-between items-center` |
147
+ | Wrap grid | `flex flex-wrap gap-4` |
148
+
149
+ ### Grid Patterns
150
+
151
+ | Pattern | Classes |
152
+ |---------|---------|
153
+ | Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |
154
+ | Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |
155
+ | Sidebar layout | `grid grid-cols-[auto_1fr]` |
156
+
157
+ > **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.
158
+
159
+ ---
160
+
161
+ ## 7. Modern Color System
162
+
163
+ ### OKLCH vs RGB/HSL
164
+
165
+ | Format | Advantage |
166
+ |--------|-----------|
167
+ | **OKLCH** | Perceptually uniform, better for design |
168
+ | **HSL** | Intuitive hue/saturation |
169
+ | **RGB** | Legacy compatibility |
170
+
171
+ ### Color Token Architecture
172
+
173
+ | Layer | Example | Purpose |
174
+ |-------|---------|---------|
175
+ | **Primitive** | `--blue-500` | Raw color values |
176
+ | **Semantic** | `--color-primary` | Purpose-based naming |
177
+ | **Component** | `--button-bg` | Component-specific |
178
+
179
+ ---
180
+
181
+ ## 8. Typography System
182
+
183
+ ### Font Stack Pattern
184
+
185
+ | Type | Recommended |
186
+ |------|-------------|
187
+ | Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |
188
+ | Mono | `'JetBrains Mono', 'Fira Code', monospace` |
189
+ | Display | `'Outfit', 'Poppins', sans-serif` |
190
+
191
+ ### Type Scale
192
+
193
+ | Class | Size | Use |
194
+ |-------|------|-----|
195
+ | `text-xs` | 0.75rem | Labels, captions |
196
+ | `text-sm` | 0.875rem | Secondary text |
197
+ | `text-base` | 1rem | Body text |
198
+ | `text-lg` | 1.125rem | Lead text |
199
+ | `text-xl`+ | 1.25rem+ | Headings |
200
+
201
+ ---
202
+
203
+ ## 9. Animation & Transitions
204
+
205
+ ### Built-in Animations
206
+
207
+ | Class | Effect |
208
+ |-------|--------|
209
+ | `animate-spin` | Continuous rotation |
210
+ | `animate-ping` | Attention pulse |
211
+ | `animate-pulse` | Subtle opacity pulse |
212
+ | `animate-bounce` | Bouncing effect |
213
+
214
+ ### Transition Patterns
215
+
216
+ | Pattern | Classes |
217
+ |---------|---------|
218
+ | All properties | `transition-all duration-200` |
219
+ | Specific | `transition-colors duration-150` |
220
+ | With easing | `ease-out` or `ease-in-out` |
221
+ | Hover effect | `hover:scale-105 transition-transform` |
222
+
223
+ ---
224
+
225
+ ## 10. Component Extraction
226
+
227
+ ### When to Extract
228
+
229
+ | Signal | Action |
230
+ |--------|--------|
231
+ | Same class combo 3+ times | Extract component |
232
+ | Complex state variants | Extract component |
233
+ | Design system element | Extract + document |
234
+
235
+ ### Extraction Methods
236
+
237
+ | Method | Use When |
238
+ |--------|----------|
239
+ | **React/Vue component** | Dynamic, JS needed |
240
+ | **@apply in CSS** | Static, no JS needed |
241
+ | **Design tokens** | Reusable values |
242
+
243
+ ---
244
+
245
+ ## 11. Anti-Patterns
246
+
247
+ | Don't | Do |
248
+ |-------|-----|
249
+ | Arbitrary values everywhere | Use design system scale |
250
+ | `!important` | Fix specificity properly |
251
+ | Inline `style=` | Use utilities |
252
+ | Duplicate long class lists | Extract component |
253
+ | Mix v3 config with v4 | Migrate fully to CSS-first |
254
+ | Use `@apply` heavily | Prefer components |
255
+
256
+ ---
257
+
258
+ ## 12. Performance Principles
259
+
260
+ | Principle | Implementation |
261
+ |-----------|----------------|
262
+ | **Purge unused** | Automatic in v4 |
263
+ | **Avoid dynamism** | No template string classes |
264
+ | **Use Oxide** | Default in v4, 10x faster |
265
+ | **Cache builds** | CI/CD caching |
266
+
267
+ ---
268
+
269
+ > **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
@@ -0,0 +1,149 @@
1
+ ---
2
+ name: tdd-workflow
3
+ description: Test-Driven Development workflow principles. RED-GREEN-REFACTOR cycle.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
5
+ ---
6
+
7
+ # TDD Workflow
8
+
9
+ > Write tests first, code second.
10
+
11
+ ---
12
+
13
+ ## 1. The TDD Cycle
14
+
15
+ ```
16
+ 🔴 RED → Write failing test
17
+
18
+ 🟢 GREEN → Write minimal code to pass
19
+
20
+ 🔵 REFACTOR → Improve code quality
21
+
22
+ Repeat...
23
+ ```
24
+
25
+ ---
26
+
27
+ ## 2. The Three Laws of TDD
28
+
29
+ 1. Write production code only to make a failing test pass
30
+ 2. Write only enough test to demonstrate failure
31
+ 3. Write only enough code to make the test pass
32
+
33
+ ---
34
+
35
+ ## 3. RED Phase Principles
36
+
37
+ ### What to Write
38
+
39
+ | Focus | Example |
40
+ |-------|---------|
41
+ | Behavior | "should add two numbers" |
42
+ | Edge cases | "should handle empty input" |
43
+ | Error states | "should throw for invalid data" |
44
+
45
+ ### RED Phase Rules
46
+
47
+ - Test must fail first
48
+ - Test name describes expected behavior
49
+ - One assertion per test (ideally)
50
+
51
+ ---
52
+
53
+ ## 4. GREEN Phase Principles
54
+
55
+ ### Minimum Code
56
+
57
+ | Principle | Meaning |
58
+ |-----------|---------|
59
+ | **YAGNI** | You Aren't Gonna Need It |
60
+ | **Simplest thing** | Write the minimum to pass |
61
+ | **No optimization** | Just make it work |
62
+
63
+ ### GREEN Phase Rules
64
+
65
+ - Don't write unneeded code
66
+ - Don't optimize yet
67
+ - Pass the test, nothing more
68
+
69
+ ---
70
+
71
+ ## 5. REFACTOR Phase Principles
72
+
73
+ ### What to Improve
74
+
75
+ | Area | Action |
76
+ |------|--------|
77
+ | Duplication | Extract common code |
78
+ | Naming | Make intent clear |
79
+ | Structure | Improve organization |
80
+ | Complexity | Simplify logic |
81
+
82
+ ### REFACTOR Rules
83
+
84
+ - All tests must stay green
85
+ - Small incremental changes
86
+ - Commit after each refactor
87
+
88
+ ---
89
+
90
+ ## 6. AAA Pattern
91
+
92
+ Every test follows:
93
+
94
+ | Step | Purpose |
95
+ |------|---------|
96
+ | **Arrange** | Set up test data |
97
+ | **Act** | Execute code under test |
98
+ | **Assert** | Verify expected outcome |
99
+
100
+ ---
101
+
102
+ ## 7. When to Use TDD
103
+
104
+ | Scenario | TDD Value |
105
+ |----------|-----------|
106
+ | New feature | High |
107
+ | Bug fix | High (write test first) |
108
+ | Complex logic | High |
109
+ | Exploratory | Low (spike, then TDD) |
110
+ | UI layout | Low |
111
+
112
+ ---
113
+
114
+ ## 8. Test Prioritization
115
+
116
+ | Priority | Test Type |
117
+ |----------|-----------|
118
+ | 1 | Happy path |
119
+ | 2 | Error cases |
120
+ | 3 | Edge cases |
121
+ | 4 | Performance |
122
+
123
+ ---
124
+
125
+ ## 9. Anti-Patterns
126
+
127
+ | ❌ Don't | ✅ Do |
128
+ |----------|-------|
129
+ | Skip the RED phase | Watch test fail first |
130
+ | Write tests after | Write tests before |
131
+ | Over-engineer initial | Keep it simple |
132
+ | Multiple asserts | One behavior per test |
133
+ | Test implementation | Test behavior |
134
+
135
+ ---
136
+
137
+ ## 10. AI-Augmented TDD
138
+
139
+ ### Multi-Agent Pattern
140
+
141
+ | Agent | Role |
142
+ |-------|------|
143
+ | Agent A | Write failing tests (RED) |
144
+ | Agent B | Implement to pass (GREEN) |
145
+ | Agent C | Optimize (REFACTOR) |
146
+
147
+ ---
148
+
149
+ > **Remember:** The test is the specification. If you can't write a test, you don't understand the requirement.
@@ -0,0 +1,178 @@
1
+ ---
2
+ name: testing-patterns
3
+ description: Testing patterns and principles. Unit, integration, mocking strategies.
4
+ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
5
+ ---
6
+
7
+ # Testing Patterns
8
+
9
+ > Principles for reliable test suites.
10
+
11
+ ---
12
+
13
+ ## 1. Testing Pyramid
14
+
15
+ ```
16
+ /\ E2E (Few)
17
+ / \ Critical flows
18
+ /----\
19
+ / \ Integration (Some)
20
+ /--------\ API, DB queries
21
+ / \
22
+ /------------\ Unit (Many)
23
+ Functions, classes
24
+ ```
25
+
26
+ ---
27
+
28
+ ## 2. AAA Pattern
29
+
30
+ | Step | Purpose |
31
+ |------|---------|
32
+ | **Arrange** | Set up test data |
33
+ | **Act** | Execute code under test |
34
+ | **Assert** | Verify outcome |
35
+
36
+ ---
37
+
38
+ ## 3. Test Type Selection
39
+
40
+ ### When to Use Each
41
+
42
+ | Type | Best For | Speed |
43
+ |------|----------|-------|
44
+ | **Unit** | Pure functions, logic | Fast (<50ms) |
45
+ | **Integration** | API, DB, services | Medium |
46
+ | **E2E** | Critical user flows | Slow |
47
+
48
+ ---
49
+
50
+ ## 4. Unit Test Principles
51
+
52
+ ### Good Unit Tests
53
+
54
+ | Principle | Meaning |
55
+ |-----------|---------|
56
+ | Fast | < 100ms each |
57
+ | Isolated | No external deps |
58
+ | Repeatable | Same result always |
59
+ | Self-checking | No manual verification |
60
+ | Timely | Written with code |
61
+
62
+ ### What to Unit Test
63
+
64
+ | Test | Don't Test |
65
+ |------|------------|
66
+ | Business logic | Framework code |
67
+ | Edge cases | Third-party libs |
68
+ | Error handling | Simple getters |
69
+
70
+ ---
71
+
72
+ ## 5. Integration Test Principles
73
+
74
+ ### What to Test
75
+
76
+ | Area | Focus |
77
+ |------|-------|
78
+ | API endpoints | Request/response |
79
+ | Database | Queries, transactions |
80
+ | External services | Contracts |
81
+
82
+ ### Setup/Teardown
83
+
84
+ | Phase | Action |
85
+ |-------|--------|
86
+ | Before All | Connect resources |
87
+ | Before Each | Reset state |
88
+ | After Each | Clean up |
89
+ | After All | Disconnect |
90
+
91
+ ---
92
+
93
+ ## 6. Mocking Principles
94
+
95
+ ### When to Mock
96
+
97
+ | Mock | Don't Mock |
98
+ |------|------------|
99
+ | External APIs | The code under test |
100
+ | Database (unit) | Simple dependencies |
101
+ | Time/random | Pure functions |
102
+ | Network | In-memory stores |
103
+
104
+ ### Mock Types
105
+
106
+ | Type | Use |
107
+ |------|-----|
108
+ | Stub | Return fixed values |
109
+ | Spy | Track calls |
110
+ | Mock | Set expectations |
111
+ | Fake | Simplified implementation |
112
+
113
+ ---
114
+
115
+ ## 7. Test Organization
116
+
117
+ ### Naming
118
+
119
+ | Pattern | Example |
120
+ |---------|---------|
121
+ | Should behavior | "should return error when..." |
122
+ | When condition | "when user not found..." |
123
+ | Given-when-then | "given X, when Y, then Z" |
124
+
125
+ ### Grouping
126
+
127
+ | Level | Use |
128
+ |-------|-----|
129
+ | describe | Group related tests |
130
+ | it/test | Individual case |
131
+ | beforeEach | Common setup |
132
+
133
+ ---
134
+
135
+ ## 8. Test Data
136
+
137
+ ### Strategies
138
+
139
+ | Approach | Use |
140
+ |----------|-----|
141
+ | Factories | Generate test data |
142
+ | Fixtures | Predefined datasets |
143
+ | Builders | Fluent object creation |
144
+
145
+ ### Principles
146
+
147
+ - Use realistic data
148
+ - Randomize non-essential values (faker)
149
+ - Share common fixtures
150
+ - Keep data minimal
151
+
152
+ ---
153
+
154
+ ## 9. Best Practices
155
+
156
+ | Practice | Why |
157
+ |----------|-----|
158
+ | One assert per test | Clear failure reason |
159
+ | Independent tests | No order dependency |
160
+ | Fast tests | Run frequently |
161
+ | Descriptive names | Self-documenting |
162
+ | Clean up | Avoid side effects |
163
+
164
+ ---
165
+
166
+ ## 10. Anti-Patterns
167
+
168
+ | ❌ Don't | ✅ Do |
169
+ |----------|-------|
170
+ | Test implementation | Test behavior |
171
+ | Duplicate test code | Use factories |
172
+ | Complex test setup | Simplify or split |
173
+ | Ignore flaky tests | Fix root cause |
174
+ | Skip cleanup | Reset state |
175
+
176
+ ---
177
+
178
+ > **Remember:** Tests are documentation. If someone can't understand what the code does from the tests, rewrite them.