@givolt/i3-composer-agent 0.0.0-stage → 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 (231) hide show
  1. package/.agents/plugins/marketplace.json +23 -0
  2. package/.claude/commands/build.md +44 -0
  3. package/.claude/commands/code-simplify.md +22 -0
  4. package/.claude/commands/constraints.md +32 -0
  5. package/.claude/commands/plan.md +18 -0
  6. package/.claude/commands/review.md +16 -0
  7. package/.claude/commands/ship.md +72 -0
  8. package/.claude/commands/spec.md +17 -0
  9. package/.claude/commands/test.md +19 -0
  10. package/.claude/commands/webperf.md +32 -0
  11. package/.claude-plugin/marketplace.json +27 -0
  12. package/.claude-plugin/plugin.json +19 -0
  13. package/.codex-plugin/plugin.json +28 -0
  14. package/.gemini/commands/build.toml +43 -0
  15. package/.gemini/commands/code-simplify.toml +22 -0
  16. package/.gemini/commands/constraints.toml +32 -0
  17. package/.gemini/commands/planning.toml +18 -0
  18. package/.gemini/commands/review.toml +16 -0
  19. package/.gemini/commands/ship.toml +72 -0
  20. package/.gemini/commands/spec.toml +17 -0
  21. package/.gemini/commands/test.toml +19 -0
  22. package/.gemini/commands/webperf.toml +32 -0
  23. package/CHANGELOG.md +23 -0
  24. package/LICENSE +21 -0
  25. package/NOTICE.md +9 -0
  26. package/README.md +117 -2
  27. package/agents/code-reviewer.md +102 -0
  28. package/agents/security-auditor.md +112 -0
  29. package/agents/test-engineer.md +95 -0
  30. package/agents/web-performance-auditor.md +184 -0
  31. package/bin/i3-composer-agent.cjs +122 -0
  32. package/commands/build.toml +43 -0
  33. package/commands/code-simplify.toml +22 -0
  34. package/commands/constraints.toml +32 -0
  35. package/commands/planning.toml +18 -0
  36. package/commands/review.toml +16 -0
  37. package/commands/ship.toml +72 -0
  38. package/commands/spec.toml +17 -0
  39. package/commands/test.toml +19 -0
  40. package/commands/webperf.toml +32 -0
  41. package/docs/adoption-guide.md +129 -0
  42. package/docs/advanced-per-agent-configuration.md +70 -0
  43. package/docs/agents.md +123 -0
  44. package/docs/antigravity-setup.md +128 -0
  45. package/docs/codebuddy-setup.md +41 -0
  46. package/docs/codex-setup.md +34 -0
  47. package/docs/commandcode-setup.md +69 -0
  48. package/docs/comparison.md +131 -0
  49. package/docs/copilot-cli-setup.md +64 -0
  50. package/docs/copilot-setup.md +162 -0
  51. package/docs/cursor-setup.md +225 -0
  52. package/docs/developer-onboarding.md +116 -0
  53. package/docs/gemini-cli-setup.md +133 -0
  54. package/docs/getting-started.md +208 -0
  55. package/docs/opencode-setup.md +259 -0
  56. package/docs/other-hosts.md +7 -0
  57. package/docs/skill-anatomy.md +203 -0
  58. package/docs/windsurf-setup.md +48 -0
  59. package/evals/README.md +101 -0
  60. package/evals/cases/api-and-interface-design.json +45 -0
  61. package/evals/cases/browser-testing-with-devtools.json +44 -0
  62. package/evals/cases/ci-cd-and-automation.json +45 -0
  63. package/evals/cases/code-review-and-quality.json +49 -0
  64. package/evals/cases/code-simplification.json +45 -0
  65. package/evals/cases/constraint-driven-development.json +79 -0
  66. package/evals/cases/context-engineering.json +44 -0
  67. package/evals/cases/debugging-and-error-recovery.json +58 -0
  68. package/evals/cases/deprecation-and-migration.json +52 -0
  69. package/evals/cases/documentation-and-adrs.json +44 -0
  70. package/evals/cases/doubt-driven-development.json +43 -0
  71. package/evals/cases/frontend-ui-engineering.json +52 -0
  72. package/evals/cases/git-workflow-and-versioning.json +47 -0
  73. package/evals/cases/idea-refine.json +43 -0
  74. package/evals/cases/incremental-implementation.json +57 -0
  75. package/evals/cases/interview-me.json +42 -0
  76. package/evals/cases/observability-and-instrumentation.json +44 -0
  77. package/evals/cases/performance-optimization.json +53 -0
  78. package/evals/cases/planning-and-task-breakdown.json +45 -0
  79. package/evals/cases/security-and-hardening.json +53 -0
  80. package/evals/cases/shipping-and-launch.json +56 -0
  81. package/evals/cases/source-driven-development.json +44 -0
  82. package/evals/cases/spec-driven-development.json +72 -0
  83. package/evals/cases/test-driven-development.json +73 -0
  84. package/evals/cases/using-agent-skills.json +44 -0
  85. package/evals/fixtures/api-and-interface-design/service-brief.md +19 -0
  86. package/evals/fixtures/browser-testing-with-devtools/README.md +5 -0
  87. package/evals/fixtures/browser-testing-with-devtools/index.html +24 -0
  88. package/evals/fixtures/browser-testing-with-devtools/server.js +15 -0
  89. package/evals/fixtures/ci-cd-and-automation/package.json +8 -0
  90. package/evals/fixtures/ci-cd-and-automation/src/slug.js +3 -0
  91. package/evals/fixtures/ci-cd-and-automation/test/slug.test.js +9 -0
  92. package/evals/fixtures/code-review-and-quality/user-search.diff +16 -0
  93. package/evals/fixtures/code-simplification/config-parser.js +46 -0
  94. package/evals/fixtures/code-simplification/config-parser.test.js +15 -0
  95. package/evals/fixtures/context-engineering/context-audit.md +15 -0
  96. package/evals/fixtures/debugging-and-error-recovery/pagination.js +8 -0
  97. package/evals/fixtures/debugging-and-error-recovery/pagination.test.js +9 -0
  98. package/evals/fixtures/debugging-and-error-recovery/time-pressure.md +6 -0
  99. package/evals/fixtures/deprecation-and-migration/api-inventory.md +9 -0
  100. package/evals/fixtures/documentation-and-adrs/decision-context.md +16 -0
  101. package/evals/fixtures/doubt-driven-development/migration-plan.md +19 -0
  102. package/evals/fixtures/frontend-ui-engineering/Button.tsx +7 -0
  103. package/evals/fixtures/frontend-ui-engineering/design-system.md +11 -0
  104. package/evals/fixtures/git-workflow-and-versioning/.eval/working-tree.patch +21 -0
  105. package/evals/fixtures/git-workflow-and-versioning/app.js +7 -0
  106. package/evals/fixtures/git-workflow-and-versioning/app.test.js +9 -0
  107. package/evals/fixtures/incremental-implementation/reports.js +7 -0
  108. package/evals/fixtures/incremental-implementation/reports.test.js +12 -0
  109. package/evals/fixtures/incremental-implementation/tasks/plan.md +8 -0
  110. package/evals/fixtures/incremental-implementation-pressure/draft-export.js +17 -0
  111. package/evals/fixtures/incremental-implementation-pressure/scenario.md +9 -0
  112. package/evals/fixtures/observability-and-instrumentation/operations.md +11 -0
  113. package/evals/fixtures/observability-and-instrumentation/payment-retry.js +14 -0
  114. package/evals/fixtures/performance-optimization/benchmark.js +15 -0
  115. package/evals/fixtures/performance-optimization/products.js +14 -0
  116. package/evals/fixtures/planning-and-task-breakdown/notifications-spec.md +18 -0
  117. package/evals/fixtures/security-and-hardening/webhook.js +11 -0
  118. package/evals/fixtures/security-and-hardening/webhook.test.js +13 -0
  119. package/evals/fixtures/shipping-and-launch/authority-pressure.md +6 -0
  120. package/evals/fixtures/shipping-and-launch/launch-status.md +11 -0
  121. package/evals/fixtures/source-driven-development/framework-task.md +10 -0
  122. package/evals/fixtures/spec-driven-development/billing-brief.md +16 -0
  123. package/evals/fixtures/spec-driven-development-decomposition/portal-brief.md +22 -0
  124. package/evals/fixtures/test-driven-development/BUG.md +10 -0
  125. package/evals/fixtures/test-driven-development/README.md +28 -0
  126. package/evals/fixtures/test-driven-development/package.json +9 -0
  127. package/evals/fixtures/test-driven-development/src/split.js +8 -0
  128. package/evals/fixtures/test-driven-development/test/split.test.js +13 -0
  129. package/evals/fixtures/test-driven-development-ecosystem/README.md +9 -0
  130. package/evals/fixtures/test-driven-development-ecosystem/ledger.py +15 -0
  131. package/evals/fixtures/test-driven-development-ecosystem/test_ledger.py +19 -0
  132. package/evals/fixtures/using-agent-skills/incident.md +6 -0
  133. package/evals/plugin/code-review-fires/graders/off-by-one.md +7 -0
  134. package/evals/plugin/code-review-fires/graders/severity-labels.md +4 -0
  135. package/evals/plugin/code-review-fires/graders/skill-fired.md +5 -0
  136. package/evals/plugin/code-review-fires/prompt.md +31 -0
  137. package/evals/plugin/code-review-stays-quiet/graders/not-fired.md +8 -0
  138. package/evals/plugin/code-review-stays-quiet/graders/tdd-fired.md +6 -0
  139. package/evals/plugin/code-review-stays-quiet/prompt.md +8 -0
  140. package/evals/plugin/code-review-stays-quiet-on-commit-message/graders/not-fired.md +8 -0
  141. package/evals/plugin/code-review-stays-quiet-on-commit-message/prompt.md +25 -0
  142. package/evals/skill-impact.md +6 -0
  143. package/hooks/SDD-CACHE.md +167 -0
  144. package/hooks/SIMPLIFY-IGNORE.md +91 -0
  145. package/hooks/sdd-cache-post.sh +135 -0
  146. package/hooks/sdd-cache-pre.sh +106 -0
  147. package/hooks/sdd-cache-test.sh +246 -0
  148. package/hooks/session-start-test.sh +47 -0
  149. package/hooks/session-start.sh +33 -0
  150. package/hooks/simplify-ignore-test.sh +476 -0
  151. package/hooks/simplify-ignore.sh +352 -0
  152. package/package.json +89 -4
  153. package/plugin.json +7 -0
  154. package/rebrand/MAINTENANCE.md +112 -0
  155. package/rebrand/NOTICE.md +9 -0
  156. package/rebrand/PR-WORKFLOW.md +34 -0
  157. package/rebrand/UNIFICATION-SPEC.md +33 -0
  158. package/rebrand/VALIDATION.md +28 -0
  159. package/rebrand/VERSIONING.md +32 -0
  160. package/rebrand/apply.cjs +194 -0
  161. package/rebrand/brand.json +13 -0
  162. package/rebrand/catalog.cjs +56 -0
  163. package/rebrand/fork-patches.json +12 -0
  164. package/rebrand/overlay/.github/workflows/test-plugin-install.yml +177 -0
  165. package/rebrand/overlay/CHANGELOG.md +23 -0
  166. package/rebrand/overlay/bin/i3-composer-agent.cjs +122 -0
  167. package/rebrand/overlay/scripts/validate-brand.cjs +44 -0
  168. package/rebrand/overlay/tests/bundle.test.cjs +85 -0
  169. package/rebrand/package.template.json +82 -0
  170. package/rebrand/rebrand.sh +4 -0
  171. package/rebrand/record-upstream.cjs +37 -0
  172. package/rebrand/templates/README.md +86 -0
  173. package/rebrand/templates/codebuddy-setup.md +41 -0
  174. package/rebrand/templates/codex-setup.md +34 -0
  175. package/rebrand/tests/pipeline.test.cjs +185 -0
  176. package/rebrand/upstream.json +171 -0
  177. package/references/accessibility-checklist.md +160 -0
  178. package/references/definition-of-done.md +67 -0
  179. package/references/observability-checklist.md +92 -0
  180. package/references/orchestration-patterns.md +370 -0
  181. package/references/performance-checklist.md +236 -0
  182. package/references/security-checklist.md +248 -0
  183. package/references/testing-patterns.md +235 -0
  184. package/scripts/floor-guard-reference-test.js +291 -0
  185. package/scripts/lib/skill-lint-test.js +650 -0
  186. package/scripts/lib/skill-lint.js +584 -0
  187. package/scripts/run-evals-test.js +623 -0
  188. package/scripts/run-evals.js +638 -0
  189. package/scripts/validate-artifact-paths-test.js +179 -0
  190. package/scripts/validate-artifact-paths.js +128 -0
  191. package/scripts/validate-brand.cjs +44 -0
  192. package/scripts/validate-commands-test.js +216 -0
  193. package/scripts/validate-commands.js +222 -0
  194. package/scripts/validate-reference-links-test.js +495 -0
  195. package/scripts/validate-reference-links.js +187 -0
  196. package/scripts/validate-skills.js +69 -0
  197. package/scripts/validate-versions-test.js +32 -0
  198. package/scripts/validate-versions.js +35 -0
  199. package/skills/api-and-interface-design/SKILL.md +367 -0
  200. package/skills/browser-testing-with-devtools/SKILL.md +317 -0
  201. package/skills/ci-cd-and-automation/SKILL.md +390 -0
  202. package/skills/code-review-and-quality/SKILL.md +398 -0
  203. package/skills/code-simplification/SKILL.md +331 -0
  204. package/skills/constraint-driven-development/SKILL.md +311 -0
  205. package/skills/constraint-driven-development/references/floor-guard.md +182 -0
  206. package/skills/context-engineering/SKILL.md +353 -0
  207. package/skills/debugging-and-error-recovery/SKILL.md +300 -0
  208. package/skills/deprecation-and-migration/SKILL.md +247 -0
  209. package/skills/documentation-and-adrs/SKILL.md +288 -0
  210. package/skills/doubt-driven-development/SKILL.md +243 -0
  211. package/skills/frontend-ui-engineering/SKILL.md +340 -0
  212. package/skills/git-workflow-and-versioning/SKILL.md +355 -0
  213. package/skills/idea-refine/SKILL.md +178 -0
  214. package/skills/idea-refine/examples.md +238 -0
  215. package/skills/idea-refine/frameworks.md +99 -0
  216. package/skills/idea-refine/refinement-criteria.md +113 -0
  217. package/skills/idea-refine/scripts/idea-refine.sh +15 -0
  218. package/skills/incremental-implementation/SKILL.md +249 -0
  219. package/skills/interview-me/SKILL.md +235 -0
  220. package/skills/observability-and-instrumentation/SKILL.md +238 -0
  221. package/skills/performance-optimization/SKILL.md +267 -0
  222. package/skills/performance-optimization/references/optimization-patterns.md +250 -0
  223. package/skills/planning-and-task-breakdown/SKILL.md +257 -0
  224. package/skills/security-and-hardening/SKILL.md +216 -0
  225. package/skills/security-and-hardening/references/hardening-patterns.md +324 -0
  226. package/skills/shipping-and-launch/SKILL.md +330 -0
  227. package/skills/source-driven-development/SKILL.md +216 -0
  228. package/skills/spec-driven-development/SKILL.md +259 -0
  229. package/skills/test-driven-development/SKILL.md +398 -0
  230. package/skills/using-agent-skills/SKILL.md +192 -0
  231. package/tests/bundle.test.cjs +85 -0
@@ -0,0 +1,340 @@
1
+ ---
2
+ name: frontend-ui-engineering
3
+ description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
4
+ ---
5
+
6
+ # Frontend UI Engineering
7
+
8
+ ## Overview
9
+
10
+ Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
11
+
12
+ ## When to Use
13
+
14
+ - Building new UI components or pages
15
+ - Modifying existing user-facing interfaces
16
+ - Implementing responsive layouts
17
+ - Adding interactivity or state management
18
+ - Fixing visual or UX issues
19
+
20
+ ## Component Architecture
21
+
22
+ ### File Structure
23
+
24
+ Colocate everything related to a component:
25
+
26
+ ```
27
+ src/components/
28
+ TaskList/
29
+ TaskList.tsx # Component implementation
30
+ TaskList.test.tsx # Tests
31
+ TaskList.stories.tsx # Storybook stories (if using)
32
+ use-task-list.ts # Custom hook (if complex state)
33
+ types.ts # Component-specific types (if needed)
34
+ ```
35
+
36
+ ### Component Patterns
37
+
38
+ **Prefer composition over configuration:**
39
+
40
+ ```tsx
41
+ // Good: Composable
42
+ <Card>
43
+ <CardHeader>
44
+ <CardTitle>Tasks</CardTitle>
45
+ </CardHeader>
46
+ <CardBody>
47
+ <TaskList tasks={tasks} />
48
+ </CardBody>
49
+ </Card>
50
+
51
+ // Avoid: Over-configured
52
+ <Card
53
+ title="Tasks"
54
+ headerVariant="large"
55
+ bodyPadding="md"
56
+ content={<TaskList tasks={tasks} />}
57
+ />
58
+ ```
59
+
60
+ **Keep components focused:**
61
+
62
+ ```tsx
63
+ // Good: Does one thing
64
+ export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
65
+ return (
66
+ <li className="flex items-center gap-3 p-3">
67
+ <Checkbox checked={task.done} onChange={() => onToggle(task.id)} />
68
+ <span className={task.done ? 'line-through text-muted' : ''}>{task.title}</span>
69
+ <Button variant="ghost" size="sm" onClick={() => onDelete(task.id)}>
70
+ <TrashIcon />
71
+ </Button>
72
+ </li>
73
+ );
74
+ }
75
+ ```
76
+
77
+ **Separate data fetching from presentation:**
78
+
79
+ ```tsx
80
+ // Container: handles data
81
+ export function TaskListContainer() {
82
+ const { tasks, isLoading, error } = useTasks();
83
+
84
+ if (isLoading) return <TaskListSkeleton />;
85
+ if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;
86
+ if (tasks.length === 0) return <EmptyState message="No tasks yet" />;
87
+
88
+ return <TaskList tasks={tasks} />;
89
+ }
90
+
91
+ // Presentation: handles rendering
92
+ export function TaskList({ tasks }: { tasks: Task[] }) {
93
+ return (
94
+ <ul role="list" className="divide-y">
95
+ {tasks.map(task => <TaskItem key={task.id} task={task} />)}
96
+ </ul>
97
+ );
98
+ }
99
+ ```
100
+
101
+ ## State Management
102
+
103
+ **Choose the simplest approach that works:**
104
+
105
+ ```
106
+ Local state (useState) → Component-specific UI state
107
+ Lifted state → Shared between 2-3 sibling components
108
+ Context → Theme, auth, locale (read-heavy, write-rare)
109
+ URL state (searchParams) → Filters, pagination, shareable UI state
110
+ Server state (React Query, SWR) → Remote data with caching
111
+ Global store (Zustand, Redux) → Complex client state shared app-wide
112
+ ```
113
+
114
+ **Avoid prop drilling deeper than 3 levels.** If you're passing props through components that don't use them, introduce context or restructure the component tree.
115
+
116
+ ## Design System Adherence
117
+
118
+ ### Reference-led UI quality
119
+
120
+ When the product needs a distinct visual direction, collect evidence before choosing a layout:
121
+
122
+ 1. Search a trusted reference catalogue or use references supplied by the product team.
123
+ 2. Study two or three relevant screens. Record decisions about hierarchy, density, navigation, controls, responsive behavior, and interaction states.
124
+ 3. Turn those decisions into a short design contract before implementation. Name the screen's job, primary action, required states, responsive rules, and patterns to reject.
125
+ 4. Rebuild the useful structure in the product's own components, tokens, content, and visual language. Never copy another product's branding, proprietary text, imagery, or exact layout.
126
+
127
+ Use references as evidence, not as templates. If references are unavailable, document the assumptions and verify the result against the product's existing design system.
128
+
129
+ ### Avoid the AI Aesthetic
130
+
131
+ AI-generated UI has recognizable patterns. Avoid all of them:
132
+
133
+ | AI Default | Why It Is a Problem | Production Quality |
134
+ |---|---|---|
135
+ | Purple/indigo everything | Models default to visually "safe" palettes, making every app look identical | Use the project's actual color palette |
136
+ | Excessive gradients | Gradients add visual noise and clash with most design systems | Flat or subtle gradients matching the design system |
137
+ | Rounded everything (rounded-2xl) | Maximum rounding signals "friendly" but ignores the hierarchy of corner radii in real designs | Consistent border-radius from the design system |
138
+ | Generic hero sections | Template-driven layout with no connection to the actual content or user need | Content-first layouts |
139
+ | Lorem ipsum-style copy | Placeholder text hides layout problems that real content reveals (length, wrapping, overflow) | Realistic placeholder content |
140
+ | Oversized padding everywhere | Equal generous padding destroys visual hierarchy and wastes screen space | Consistent spacing scale |
141
+ | Stock card grids | Uniform grids are a layout shortcut that ignores information priority and scanning patterns | Purpose-driven layouts |
142
+ | Shadow-heavy design | Layered shadows add depth that competes with content and slows rendering on low-end devices | Subtle or no shadows unless the design system specifies |
143
+
144
+ ### Spacing and Layout
145
+
146
+ Use a consistent spacing scale. Don't invent values:
147
+
148
+ ```css
149
+ /* Use the scale: 0.25rem increments (or whatever the project uses) */
150
+ /* Good */ padding: 1rem; /* 16px */
151
+ /* Good */ gap: 0.75rem; /* 12px */
152
+ /* Bad */ padding: 13px; /* Not on any scale */
153
+ /* Bad */ margin-top: 2.3rem; /* Not on any scale */
154
+ ```
155
+
156
+ ### Typography
157
+
158
+ Respect the type hierarchy:
159
+
160
+ ```
161
+ h1 → Page title (one per page)
162
+ h2 → Section title
163
+ h3 → Subsection title
164
+ body → Default text
165
+ small → Secondary/helper text
166
+ ```
167
+
168
+ Don't skip heading levels. Don't use heading styles for non-heading content.
169
+
170
+ ### Color
171
+
172
+ - Use semantic color tokens: `text-primary`, `bg-surface`, `border-default` — not raw hex values
173
+ - Ensure sufficient contrast (4.5:1 for normal text, 3:1 for large text)
174
+ - Don't rely solely on color to convey information (use icons, text, or patterns too)
175
+
176
+ ## Accessibility (WCAG 2.1 AA)
177
+
178
+ Every component must meet these standards:
179
+
180
+ ### Keyboard Navigation
181
+
182
+ ```tsx
183
+ // Every interactive element must be keyboard accessible
184
+ <button onClick={handleClick}>Click me</button> // ✓ Focusable by default
185
+ <div onClick={handleClick}>Click me</div> // ✗ Not focusable
186
+ <div role="button" tabIndex={0} onClick={handleClick} // ✓ But prefer <button>
187
+ onKeyDown={e => {
188
+ if (e.key === 'Enter') handleClick();
189
+ if (e.key === ' ') e.preventDefault();
190
+ }}
191
+ onKeyUp={e => {
192
+ if (e.key === ' ') handleClick();
193
+ }}>
194
+ Click me
195
+ </div>
196
+ ```
197
+
198
+ ### ARIA Labels
199
+
200
+ ```tsx
201
+ // Label interactive elements that lack visible text
202
+ <button aria-label="Close dialog"><XIcon /></button>
203
+
204
+ // Label form inputs
205
+ <label htmlFor="email">Email</label>
206
+ <input id="email" type="email" />
207
+
208
+ // Or use aria-label when no visible label exists
209
+ <input aria-label="Search tasks" type="search" />
210
+ ```
211
+
212
+ ### Focus Management
213
+
214
+ ```tsx
215
+ // Move focus when content changes
216
+ function Dialog({ isOpen, onClose }: DialogProps) {
217
+ const closeRef = useRef<HTMLButtonElement>(null);
218
+
219
+ useEffect(() => {
220
+ if (isOpen) closeRef.current?.focus();
221
+ }, [isOpen]);
222
+
223
+ // Trap focus inside dialog when open
224
+ return (
225
+ <dialog open={isOpen}>
226
+ <button ref={closeRef} onClick={onClose}>Close</button>
227
+ {/* dialog content */}
228
+ </dialog>
229
+ );
230
+ }
231
+ ```
232
+
233
+ ### Meaningful Empty and Error States
234
+
235
+ ```tsx
236
+ // Don't show blank screens
237
+ function TaskList({ tasks }: { tasks: Task[] }) {
238
+ if (tasks.length === 0) {
239
+ return (
240
+ <div role="status" className="text-center py-12">
241
+ <TasksEmptyIcon className="mx-auto h-12 w-12 text-muted" />
242
+ <h3 className="mt-2 text-sm font-medium">No tasks</h3>
243
+ <p className="mt-1 text-sm text-muted">Get started by creating a new task.</p>
244
+ <Button className="mt-4" onClick={onCreateTask}>Create Task</Button>
245
+ </div>
246
+ );
247
+ }
248
+
249
+ return <ul role="list">...</ul>;
250
+ }
251
+ ```
252
+
253
+ ## Responsive Design
254
+
255
+ Design for mobile first, then expand:
256
+
257
+ ```tsx
258
+ // Tailwind: mobile-first responsive
259
+ <div className="
260
+ grid grid-cols-1 /* Mobile: single column */
261
+ sm:grid-cols-2 /* Small: 2 columns */
262
+ lg:grid-cols-3 /* Large: 3 columns */
263
+ gap-4
264
+ ">
265
+ ```
266
+
267
+ Test at these breakpoints: 320px, 768px, 1024px, 1440px.
268
+
269
+ ## Loading and Transitions
270
+
271
+ ```tsx
272
+ // Skeleton loading (not spinners for content)
273
+ function TaskListSkeleton() {
274
+ return (
275
+ <div className="space-y-3" aria-busy="true" aria-label="Loading tasks">
276
+ {Array.from({ length: 3 }).map((_, i) => (
277
+ <div key={i} className="h-12 bg-muted animate-pulse rounded" />
278
+ ))}
279
+ </div>
280
+ );
281
+ }
282
+
283
+ // Optimistic updates for perceived speed
284
+ function useToggleTask() {
285
+ const queryClient = useQueryClient();
286
+
287
+ return useMutation({
288
+ mutationFn: toggleTask,
289
+ onMutate: async (taskId) => {
290
+ await queryClient.cancelQueries({ queryKey: ['tasks'] });
291
+ const previous = queryClient.getQueryData(['tasks']);
292
+
293
+ queryClient.setQueryData(['tasks'], (old: Task[]) =>
294
+ old.map(t => t.id === taskId ? { ...t, done: !t.done } : t)
295
+ );
296
+
297
+ return { previous };
298
+ },
299
+ onError: (_err, _taskId, context) => {
300
+ queryClient.setQueryData(['tasks'], context?.previous);
301
+ },
302
+ });
303
+ }
304
+ ```
305
+
306
+ ## See Also
307
+
308
+ For detailed accessibility requirements and testing tools, see `../../references/accessibility-checklist.md`.
309
+
310
+ ## Common Rationalizations
311
+
312
+ | Rationalization | Reality |
313
+ |---|---|
314
+ | "Accessibility is a nice-to-have" | It's a legal requirement in many jurisdictions and an engineering quality standard. |
315
+ | "We'll make it responsive later" | Retrofitting responsive design is 3x harder than building it from the start. |
316
+ | "The design isn't final, so I'll skip styling" | Use the design system defaults. Unstyled UI creates a broken first impression for reviewers. |
317
+ | "This is just a prototype" | Prototypes become production code. Build the foundation right. |
318
+ | "The AI aesthetic is fine for now" | It signals low quality. Use the project's actual design system from the start. |
319
+
320
+ ## Red Flags
321
+
322
+ - Components with more than 200 lines (split them)
323
+ - Inline styles or arbitrary pixel values
324
+ - Missing error states, loading states, or empty states
325
+ - No keyboard navigation testing
326
+ - Color as the sole indicator of state (red/green without text or icons)
327
+ - Generic "AI look" (purple gradients, oversized cards, stock layouts)
328
+
329
+ ## Verification
330
+
331
+ After building UI:
332
+
333
+ - [ ] Component renders without console errors
334
+ - [ ] All interactive elements are keyboard accessible (Tab through the page)
335
+ - [ ] Screen reader can convey the page's content and structure
336
+ - [ ] Responsive: works at 320px, 768px, 1024px, 1440px
337
+ - [ ] Loading, empty, error, success, and permission states handled when applicable
338
+ - [ ] Follows the project's design system (spacing, colors, typography)
339
+ - [ ] The rendered result passes a final UI-specific finish-gate review
340
+ - [ ] No accessibility warnings in dev tools or axe-core
@@ -0,0 +1,355 @@
1
+ ---
2
+ name: git-workflow-and-versioning
3
+ description: Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, splitting uncommitted work in a messy working tree into clean atomic commits, opening or reviewing a pull request (PR), pushing to a remote, or when you need to organize work across multiple parallel streams. Use when cutting a release, choosing a semantic version bump, tagging, or writing a changelog.
4
+ ---
5
+
6
+ # Git Workflow and Versioning
7
+
8
+ ## Overview
9
+
10
+ Git is your safety net. Treat commits as save points, branches as sandboxes, and history as documentation. With AI agents generating code at high speed, disciplined version control is the mechanism that keeps changes manageable, reviewable, and reversible.
11
+
12
+ ## When to Use
13
+
14
+ Always. Every code change flows through git.
15
+
16
+ ## Core Principles
17
+
18
+ ### Trunk-Based Development (Recommended)
19
+
20
+ Keep `main` always deployable. Work in short-lived feature branches that merge back within 1-3 days. Long-lived development branches are hidden costs — they diverge, create merge conflicts, and delay integration. DORA research consistently shows trunk-based development correlates with high-performing engineering teams.
21
+
22
+ ```
23
+ main ──●──●──●──●──●──●──●──●──●── (always deployable)
24
+ ╲ ╱ ╲ ╱
25
+ ●──●─╱ ●──╱ ← short-lived feature branches (1-3 days)
26
+ ```
27
+
28
+ This is the recommended default. Teams using gitflow or long-lived branches can adapt the principles (atomic commits, small changes, descriptive messages) to their branching model — the commit discipline matters more than the specific branching strategy.
29
+
30
+ - **Dev branches are costs.** Every day a branch lives, it accumulates merge risk.
31
+ - **Release branches are acceptable.** When you need to stabilize a release while main moves forward.
32
+ - **Feature flags > long branches.** Prefer deploying incomplete work behind flags rather than keeping it on a branch for weeks.
33
+
34
+ ### 1. Commit Early, Commit Often
35
+
36
+ Each successful increment gets its own commit. Don't accumulate large uncommitted changes.
37
+
38
+ ```
39
+ Work pattern:
40
+ Implement slice → Test → Verify → Commit → Next slice
41
+
42
+ Not this:
43
+ Implement everything → Hope it works → Giant commit
44
+ ```
45
+
46
+ Commits are save points. If the next change breaks something, you can revert to the last known-good state instantly.
47
+
48
+ ### 2. Atomic Commits
49
+
50
+ Each commit does one logical thing:
51
+
52
+ ```
53
+ # Good: Each commit is self-contained
54
+ git log --oneline
55
+ a1b2c3d Add task creation endpoint with validation
56
+ d4e5f6g Add task creation form component
57
+ h7i8j9k Connect form to API and add loading state
58
+ m1n2o3p Add task creation tests (unit + integration)
59
+
60
+ # Bad: Everything mixed together
61
+ git log --oneline
62
+ x1y2z3a Add task feature, fix sidebar, update deps, refactor utils
63
+ ```
64
+
65
+ ### 3. Descriptive Messages
66
+
67
+ Commit messages explain the *why*, not just the *what*:
68
+
69
+ ```
70
+ # Good: Explains intent
71
+ feat: add email validation to registration endpoint
72
+
73
+ Prevents invalid email formats from reaching the database.
74
+ Uses Zod schema validation at the route handler level,
75
+ consistent with existing validation patterns in auth.ts.
76
+
77
+ # Bad: Describes what's obvious from the diff
78
+ update auth.ts
79
+ ```
80
+
81
+ **Format:**
82
+ ```
83
+ <type>: <short description>
84
+
85
+ <optional body explaining why, not what>
86
+ ```
87
+
88
+ **Types:**
89
+ - `feat` — New feature
90
+ - `fix` — Bug fix
91
+ - `refactor` — Code change that neither fixes a bug nor adds a feature
92
+ - `test` — Adding or updating tests
93
+ - `docs` — Documentation only
94
+ - `chore` — Tooling, dependencies, config
95
+
96
+ ### 4. Keep Concerns Separate
97
+
98
+ Don't combine formatting changes with behavior changes. Don't combine refactors with features. Each type of change should be a separate commit — and ideally a separate PR:
99
+
100
+ ```
101
+ # Good: Separate concerns
102
+ git commit -m "refactor: extract validation logic to shared utility"
103
+ git commit -m "feat: add phone number validation to registration"
104
+
105
+ # Bad: Mixed concerns
106
+ git commit -m "refactor validation and add phone number field"
107
+ ```
108
+
109
+ **Separate refactoring from feature work.** A refactoring change and a feature change are two different changes — submit them separately. This makes each change easier to review, revert, and understand in history. Small cleanups (renaming a variable) can be included in a feature commit at reviewer discretion.
110
+
111
+ ### 5. Size Your Changes
112
+
113
+ Target ~100 lines per commit/PR. Changes over ~1000 lines should be split. See the splitting strategies in `code-review-and-quality` for how to break down large changes.
114
+
115
+ ```
116
+ ~100 lines → Easy to review, easy to revert
117
+ ~300 lines → Acceptable for a single logical change
118
+ ~1000 lines → Split into smaller changes
119
+ ```
120
+
121
+ ## Branching Strategy
122
+
123
+ ### Feature Branches
124
+
125
+ ```
126
+ main (always deployable)
127
+ │
128
+ ├── feature/task-creation ← One feature per branch
129
+ ├── feature/user-settings ← Parallel work
130
+ └── fix/duplicate-tasks ← Bug fixes
131
+ ```
132
+
133
+ - Branch from `main` (or the team's default branch)
134
+ - Keep branches short-lived (merge within 1-3 days) — long-lived branches are hidden costs
135
+ - Delete branches after merge
136
+ - Prefer feature flags over long-lived branches for incomplete features
137
+
138
+ ### Branch Naming
139
+
140
+ ```
141
+ feature/<short-description> → feature/task-creation
142
+ fix/<short-description> → fix/duplicate-tasks
143
+ chore/<short-description> → chore/update-deps
144
+ refactor/<short-description> → refactor/auth-module
145
+ ```
146
+
147
+ ## Working with Worktrees
148
+
149
+ For parallel AI agent work, use git worktrees to run multiple branches simultaneously:
150
+
151
+ ```bash
152
+ # Create a worktree for a feature branch
153
+ git worktree add ../project-feature-a feature/task-creation
154
+ git worktree add ../project-feature-b feature/user-settings
155
+
156
+ # Each worktree is a separate directory with its own branch
157
+ # Agents can work in parallel without interfering
158
+ ls ../
159
+ project/ ← main branch
160
+ project-feature-a/ ← task-creation branch
161
+ project-feature-b/ ← user-settings branch
162
+
163
+ # When done, merge and clean up
164
+ git worktree remove ../project-feature-a
165
+ ```
166
+
167
+ Benefits:
168
+ - Multiple agents can work on different features simultaneously
169
+ - No branch switching needed (each directory has its own branch)
170
+ - If one experiment fails, delete the worktree — nothing is lost
171
+ - Changes are isolated until explicitly merged
172
+
173
+ ## The Save Point Pattern
174
+
175
+ ```
176
+ Agent starts work
177
+ │
178
+ ├── Makes a change
179
+ │ ├── Test passes? → Commit → Continue
180
+ │ └── Test fails? → Revert to last commit → Investigate
181
+ │
182
+ ├── Makes another change
183
+ │ ├── Test passes? → Commit → Continue
184
+ │ └── Test fails? → Revert to last commit → Investigate
185
+ │
186
+ └── Feature complete → All commits form a clean history
187
+ ```
188
+
189
+ This pattern means you never lose more than one increment of work. If an agent goes off the rails, `git reset --hard HEAD` takes you back to the last successful state.
190
+
191
+ ## Change Summaries
192
+
193
+ After any modification, provide a structured summary. This makes review easier, documents scope discipline, and surfaces unintended changes:
194
+
195
+ ```
196
+ CHANGES MADE:
197
+ - src/routes/tasks.ts: Added validation middleware to POST endpoint
198
+ - src/lib/validation.ts: Added TaskCreateSchema using Zod
199
+
200
+ THINGS I DIDN'T TOUCH (intentionally):
201
+ - src/routes/auth.ts: Has similar validation gap but out of scope
202
+ - src/middleware/error.ts: Error format could be improved (separate task)
203
+
204
+ POTENTIAL CONCERNS:
205
+ - The Zod schema is strict — rejects extra fields. Confirm this is desired.
206
+ - Added zod as a dependency (72KB gzipped) — already in package.json
207
+ ```
208
+
209
+ This pattern catches wrong assumptions early and gives reviewers a clear map of the change. The "DIDN'T TOUCH" section is especially important — it shows you exercised scope discipline and didn't go on an unsolicited renovation.
210
+
211
+ ## Pre-Commit Hygiene
212
+
213
+ Before every commit:
214
+
215
+ ```bash
216
+ # 1. Check what you're about to commit
217
+ git diff --staged
218
+
219
+ # 2. Ensure no secrets
220
+ git diff --staged | grep -i "password\|secret\|api_key\|token"
221
+
222
+ # 3. Run tests
223
+ npm test
224
+
225
+ # 4. Run linting
226
+ npm run lint
227
+
228
+ # 5. Run type checking
229
+ npx tsc --noEmit
230
+ ```
231
+
232
+ Automate this with git hooks:
233
+
234
+ ```json
235
+ // package.json (using lint-staged + husky)
236
+ {
237
+ "lint-staged": {
238
+ "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
239
+ "*.{json,md}": ["prettier --write"]
240
+ }
241
+ }
242
+ ```
243
+
244
+ ## Handling Generated Files
245
+
246
+ - **Commit generated files** only if the project expects them (e.g., `package-lock.json`, Prisma migrations)
247
+ - **Don't commit** build output (`dist/`, `.next/`), environment files (`.env`), or IDE config (`.vscode/settings.json` unless shared)
248
+ - **Have a `.gitignore`** that covers: `node_modules/`, `dist/`, `.env`, `.env.local`, `*.pem`
249
+
250
+ ## Using Git for Debugging
251
+
252
+ ```bash
253
+ # Find which commit introduced a bug
254
+ git bisect start
255
+ git bisect bad HEAD
256
+ git bisect good <known-good-commit>
257
+ # Git checkouts midpoints; run your test at each to narrow down
258
+
259
+ # View what changed recently
260
+ git log --oneline -20
261
+ git diff HEAD~5..HEAD -- src/
262
+
263
+ # Find who last changed a specific line
264
+ git blame src/services/task.ts
265
+
266
+ # Search commit messages for a keyword
267
+ git log --grep="validation" --oneline
268
+ ```
269
+
270
+ ## Release & Versioning
271
+
272
+ Commits are how *you* track change; a **version** is how your *consumers* track it. The moment anything else depends on your code — another team, a published package, a deployed client — "latest on main" stops being a sufficient answer to "what am I running, and is it safe to upgrade?" A version number and a changelog are the contract that answers it.
273
+
274
+ ### Semantic Versioning
275
+
276
+ For anything with consumers, version `MAJOR.MINOR.PATCH` and let the number carry meaning:
277
+
278
+ ```
279
+ MAJOR breaking change — consumers must change their code to upgrade
280
+ MINOR new functionality, backward-compatible — safe to upgrade
281
+ PATCH bug fix, backward-compatible — safe to upgrade
282
+ ```
283
+
284
+ The number is a promise, so make the code match it. A "patch" that changes behavior consumers relied on is a major change wearing a disguise (Hyrum's Law — see the `api-and-interface-design` skill). When unsure whether a change is breaking, assume it is; a surprise major is far cheaper than a broken consumer.
285
+
286
+ ### Tag the release, and let the tag be the source of truth
287
+
288
+ A release is an immutable point in history, not a moving branch. Tag it so it can always be reproduced:
289
+
290
+ ```bash
291
+ git tag -a v1.4.0 -m "Release 1.4.0"
292
+ git push origin v1.4.0
293
+ ```
294
+
295
+ Derive the version from the tag rather than hand-editing it in scattered files, so the artifact, the tag, and the changelog can never disagree.
296
+
297
+ ### Keep a changelog written for humans
298
+
299
+ A changelog is not `git log`. It's the curated, consumer-facing answer to "what changed and do I care?" — grouped by `Added / Changed / Fixed / Deprecated / Removed / Security`, newest on top, every entry phrased around user impact, not internal mechanics.
300
+
301
+ ```markdown
302
+ ## [1.4.0] - 2025-06-12
303
+ ### Added
304
+ - Bulk task import via CSV
305
+ ### Fixed
306
+ - Timezone drift in recurring task due dates
307
+ ### Deprecated
308
+ - `GET /v1/tasks/all` — use the paginated `GET /v1/tasks` (removal in 2.0)
309
+ ```
310
+
311
+ Write the entry in the same change that makes the change, while the impact is fresh — not reconstructed from commit archaeology at release time. Breaking changes get a migration note and a deprecation window (follow the `deprecation-and-migration` skill); shipping the actual release is the `shipping-and-launch` skill's job — this section is the versioning contract that feeds it.
312
+
313
+ ## Common Rationalizations
314
+
315
+ | Rationalization | Reality |
316
+ |---|---|
317
+ | "I'll commit when the feature is done" | One giant commit is impossible to review, debug, or revert. Commit each slice. |
318
+ | "The message doesn't matter" | Messages are documentation. Future you (and future agents) will need to understand what changed and why. |
319
+ | "I'll squash it all later" | Squashing destroys the development narrative. Prefer clean incremental commits from the start. |
320
+ | "Branches add overhead" | Short-lived branches are free and prevent conflicting work from colliding. Long-lived branches are the problem — merge within 1-3 days. |
321
+ | "I'll split this change later" | Large changes are harder to review, riskier to deploy, and harder to revert. Split before submitting, not after. |
322
+ | "I don't need a .gitignore" | Until `.env` with production secrets gets committed. Set it up immediately. |
323
+ | "It's just a small fix, bump the patch" | Check what consumers can observe. A behavior change they relied on is a major, whatever the diff size. |
324
+ | "The changelog is just the commit log" | Commits are for you; the changelog is for consumers, curated by impact. Generating one from raw commits buries what matters. |
325
+ | "We'll write the changelog at release time" | By then the impact is reconstructed from memory and half of it is missing. Write the entry with the change. |
326
+
327
+ ## Red Flags
328
+
329
+ - Large uncommitted changes accumulating
330
+ - Commit messages like "fix", "update", "misc"
331
+ - Formatting changes mixed with behavior changes
332
+ - No `.gitignore` in the project
333
+ - Committing `node_modules/`, `.env`, or build artifacts
334
+ - Long-lived branches that diverge significantly from main
335
+ - Force-pushing to shared branches
336
+ - A breaking change shipped under a minor or patch version bump
337
+ - A release with no tag, or a version number hand-edited out of sync with the tag
338
+ - A user-facing release with no changelog entry, or a changelog that's just dumped commit messages
339
+
340
+ ## Verification
341
+
342
+ For every commit:
343
+
344
+ - [ ] Commit does one logical thing
345
+ - [ ] Message explains the why, follows type conventions
346
+ - [ ] Tests pass before committing
347
+ - [ ] No secrets in the diff
348
+ - [ ] No formatting-only changes mixed with behavior changes
349
+ - [ ] `.gitignore` covers standard exclusions
350
+
351
+ For every release (anything with consumers):
352
+
353
+ - [ ] The version bump matches the change: breaking → major, additive → minor, fix → patch
354
+ - [ ] The release is tagged, and the version is derived from the tag, not hand-edited out of sync
355
+ - [ ] The changelog has a curated, human-readable entry grouped by impact for this version