opencode-wait-a-minute 0.0.0-stage → 1.1.0-rc.8

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 (207) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +318 -2
  3. package/index.js +1836 -0
  4. package/package.json +70 -4
  5. package/skills/codebase-design/SKILL.md +114 -0
  6. package/skills/design-contract/SKILL.md +27 -0
  7. package/skills/design-critique/SKILL.md +19 -0
  8. package/skills/design-system/SKILL.md +17 -0
  9. package/skills/design-system/references/image-analysis.md +14 -0
  10. package/skills/design-system/references/tokens.md +32 -0
  11. package/skills/design-system/references/ui-rules.md +14 -0
  12. package/skills/diagnosing-bugs/SKILL.md +138 -0
  13. package/skills/frontend-design/SKILL.md +36 -0
  14. package/skills/handoff/SKILL.md +16 -0
  15. package/skills/improve-codebase-architecture/SKILL.md +71 -0
  16. package/skills/linter-negative/SKILL.md +74 -0
  17. package/skills/no-slop-ui/SKILL.md +26 -0
  18. package/skills/prototype/SKILL.md +26 -0
  19. package/skills/registry.json +44087 -0
  20. package/skills/tastemaker/SKILL.md +8 -0
  21. package/skills/tastemaker/references/tastemaker.md +14 -0
  22. package/skills/tdd/SKILL.md +38 -0
  23. package/skills/visual-review/SKILL.md +103 -0
  24. package/skills/visual-review/references/review-gates.md +42 -0
  25. package/skills/visual-review/references/surface-archetypes.md +37 -0
  26. package/skills/wizard/SKILL.md +44 -0
  27. package/skills/writing-for-agents/SKILL.md +81 -0
  28. package/src/cognition/cognition-store.js +251 -0
  29. package/src/cognition/cognitive-state.js +126 -0
  30. package/src/cognition/hypothesis-manager.js +113 -0
  31. package/src/cognition/observation-engine.js +112 -0
  32. package/src/cognition/observation-provenance.js +268 -0
  33. package/src/context/active-context-boundary.js +68 -0
  34. package/src/context/assembly.js +494 -0
  35. package/src/context/assessment-rules.js +55 -0
  36. package/src/context/capsule-staleness.js +267 -0
  37. package/src/context/capsules.js +2 -0
  38. package/src/context/compare-array.js +98 -0
  39. package/src/context/compare-object.js +89 -0
  40. package/src/context/compare-values.js +42 -0
  41. package/src/context/context-assembly-contract.js +71 -0
  42. package/src/context/context-budget-manager.js +232 -0
  43. package/src/context/context-builder.js +49 -0
  44. package/src/context/context-cache.js +55 -0
  45. package/src/context/context-capture.js +243 -0
  46. package/src/context/context-classification.js +199 -0
  47. package/src/context/context-compaction.js +179 -0
  48. package/src/context/context-decision-audit.js +267 -0
  49. package/src/context/context-demotion.js +173 -0
  50. package/src/context/context-dictionary.js +106 -0
  51. package/src/context/context-drift-detection.js +225 -0
  52. package/src/context/context-evaluation.js +374 -0
  53. package/src/context/context-event-ingress.js +100 -0
  54. package/src/context/context-event-normalization.js +224 -0
  55. package/src/context/context-feedback-loop.js +216 -0
  56. package/src/context/context-freshness.js +21 -0
  57. package/src/context/context-graph-builder.js +71 -0
  58. package/src/context/context-graph.js +451 -0
  59. package/src/context/context-history-relevance.js +321 -0
  60. package/src/context/context-interception.js +145 -0
  61. package/src/context/context-invalidation-events.js +154 -0
  62. package/src/context/context-lifecycle.js +170 -0
  63. package/src/context/context-loop-prevention.js +347 -0
  64. package/src/context/context-manager.js +340 -0
  65. package/src/context/context-memory-layers.js +265 -0
  66. package/src/context/context-minimality.js +166 -0
  67. package/src/context/context-normalization.js +130 -0
  68. package/src/context/context-optimization-metrics.js +434 -0
  69. package/src/context/context-output-policy.js +135 -0
  70. package/src/context/context-pack-authority.js +157 -0
  71. package/src/context/context-promotion.js +172 -0
  72. package/src/context/context-query-contract.js +101 -0
  73. package/src/context/context-ranking.js +164 -0
  74. package/src/context/context-rate-distortion.js +261 -0
  75. package/src/context/context-recovery.js +209 -0
  76. package/src/context/context-retrieval-integration.js +60 -0
  77. package/src/context/context-retrieval.js +93 -0
  78. package/src/context/context-router.js +457 -0
  79. package/src/context/context-routing-evaluation.js +331 -0
  80. package/src/context/context-routing-observability.js +296 -0
  81. package/src/context/context-routing-shadow.js +237 -0
  82. package/src/context/context-scope.js +181 -0
  83. package/src/context/context-snapshot.js +226 -0
  84. package/src/context/context-source-registry.js +95 -0
  85. package/src/context/context-sufficiency-gate.js +120 -0
  86. package/src/context/context-sufficiency-oracle.js +167 -0
  87. package/src/context/context-telemetry.js +176 -0
  88. package/src/context/context.js +633 -0
  89. package/src/context/dependency-closure.js +246 -0
  90. package/src/context/page-fault-tracker.js +275 -0
  91. package/src/context/prompt-engine.js +74 -0
  92. package/src/context/runtime-context-graph.js +260 -0
  93. package/src/context/selection.js +2 -0
  94. package/src/context/session.js +2 -0
  95. package/src/context/sufficiency-contract.js +300 -0
  96. package/src/context/tokenizer.js +17 -0
  97. package/src/context-benchmark-router.mjs +125 -0
  98. package/src/evidence/evidence-engine.js +161 -0
  99. package/src/evidence/evidence-factory.js +3 -0
  100. package/src/evidence/evidence-freshness.js +463 -0
  101. package/src/evidence/evidence-gap.js +76 -0
  102. package/src/evidence/evidence-lineage.js +525 -0
  103. package/src/evidence/evidence.js +136 -0
  104. package/src/evidence/freshness-validation.js +187 -0
  105. package/src/evidence/lineage.js +4 -0
  106. package/src/execution/action-evaluation.js +179 -0
  107. package/src/execution/circuit-breaker.js +70 -0
  108. package/src/execution/claim-interception.js +63 -0
  109. package/src/execution/execution-engine.js +258 -0
  110. package/src/execution/execution-intent.js +69 -0
  111. package/src/execution/execution-state.js +89 -0
  112. package/src/execution/formatting.js +60 -0
  113. package/src/execution/l1-sanitize.js +16 -0
  114. package/src/execution/l2-resource-guards.js +19 -0
  115. package/src/execution/l3-invariant-checker.js +5 -0
  116. package/src/execution/l4-containment.js +6 -0
  117. package/src/execution/runtime-guards.js +106 -0
  118. package/src/execution/strategy-identity.js +162 -0
  119. package/src/execution/tool-interceptor.js +7 -0
  120. package/src/execution/tool-result-classifier.js +63 -0
  121. package/src/integration/canary-deploy.js +143 -0
  122. package/src/integration/collector.js +59 -0
  123. package/src/integration/error-recovery.js +6 -0
  124. package/src/integration/event-bus.js +66 -0
  125. package/src/integration/health-checker.js +57 -0
  126. package/src/integration/logger.js +39 -0
  127. package/src/integration/message-handler.js +611 -0
  128. package/src/integration/opencode-db.js +153 -0
  129. package/src/integration/orchestration.js +419 -0
  130. package/src/integration/part-provenance.js +65 -0
  131. package/src/integration/rate-limiter.js +55 -0
  132. package/src/integration/release-gate.js +336 -0
  133. package/src/integration/rollback-manager.js +164 -0
  134. package/src/integration/router-adapter.js +269 -0
  135. package/src/integration/telemetry.js +45 -0
  136. package/src/integration/update-checker.js +10 -0
  137. package/src/persistence/event-sourcing.js +75 -0
  138. package/src/persistence/memory.js +501 -0
  139. package/src/persistence/migration-runner.js +16 -0
  140. package/src/persistence/persistence-manager.js +39 -0
  141. package/src/persistence/transaction-log.js +157 -0
  142. package/src/policy/action-capabilities.js +116 -0
  143. package/src/policy/action-policy.js +4 -0
  144. package/src/policy/assessment-engine.js +104 -0
  145. package/src/policy/assumption-tracking.js +66 -0
  146. package/src/policy/budget-enforcer.js +7 -0
  147. package/src/policy/config-validator.js +102 -0
  148. package/src/policy/execution-assessment.js +142 -0
  149. package/src/policy/failure-classification.js +5 -0
  150. package/src/policy/feature-flags.js +65 -0
  151. package/src/policy/governance-enforcement.js +118 -0
  152. package/src/policy/locale.js +15 -0
  153. package/src/policy/multi-signer.js +151 -0
  154. package/src/policy/policy-state-machine.js +97 -0
  155. package/src/policy/ponytail-constraint.js +38 -0
  156. package/src/policy/project-inspector.js +93 -0
  157. package/src/policy/query-builder.js +14 -0
  158. package/src/policy/request-classifier.js +79 -0
  159. package/src/policy/risk-engine.js +266 -0
  160. package/src/policy/scope-enforcement.js +140 -0
  161. package/src/policy/secret-scanner.js +68 -0
  162. package/src/policy/skill-routing.js +104 -0
  163. package/src/policy/strategy-capabilities.js +211 -0
  164. package/src/policy/strategy.js +6 -0
  165. package/src/policy/uncertainty.js +117 -0
  166. package/src/shared/container.js +44 -0
  167. package/src/shared/decision-types.js +24 -0
  168. package/src/shared/simple-test.js +160 -0
  169. package/src/shared/wam-events.js +52 -0
  170. package/src/skills/engine.js +1705 -0
  171. package/src/skills/skill-registry.js +19 -0
  172. package/src/skills/skill-routing.js +340 -0
  173. package/src/state/lifecycle-manager.js +113 -0
  174. package/src/state/operational-state.js +198 -0
  175. package/src/state/projections.js +47 -0
  176. package/src/state/replay-engine.js +5 -0
  177. package/src/state/requirement-ownership.js +20 -0
  178. package/src/state/requirement-state.js +152 -0
  179. package/src/state/run-event-identity.js +172 -0
  180. package/src/state/state-engine.js +19 -0
  181. package/src/state/state-machine.js +119 -0
  182. package/src/state/state-schema.js +318 -0
  183. package/src/state/state-store.js +335 -0
  184. package/src/state/state-transition.js +84 -0
  185. package/src/state/task-dependencies.js +287 -0
  186. package/src/state/task-execution.js +217 -0
  187. package/src/state/task-lifecycle.js +59 -0
  188. package/src/state/task-runs.js +361 -0
  189. package/src/state/task-state-file.js +86 -0
  190. package/src/state/task-state.js +41 -0
  191. package/src/state/task-status.js +54 -0
  192. package/src/state/task-store.js +48 -0
  193. package/src/state/wam-state.js +148 -0
  194. package/src/verification/completion-gate-simple.js +8 -0
  195. package/src/verification/completion-gate.js +183 -0
  196. package/src/verification/contract.js +9 -0
  197. package/src/verification/contradiction-resolution.js +255 -0
  198. package/src/verification/diagnostic-engine.js +659 -0
  199. package/src/verification/false-completion-prevention.js +100 -0
  200. package/src/verification/hook-validator.js +6 -0
  201. package/src/verification/requirements.js +6 -0
  202. package/src/verification/verification-context.js +162 -0
  203. package/src/verification/verification-lifecycle.js +66 -0
  204. package/src/verification/verification-model.js +89 -0
  205. package/src/verification/verification-persistence.js +129 -0
  206. package/src/verification/verification-policy.js +127 -0
  207. package/src/verification/verification.js +415 -0
package/package.json CHANGED
@@ -1,6 +1,72 @@
1
1
  {
2
2
  "name": "opencode-wait-a-minute",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "description": "WAM keeps more state than it sends: deterministic task-state, context reconstruction, and evidence-backed completion for OpenCode agents.",
4
+ "version": "1.1.0-rc.8",
5
+ "main": "index.js",
6
+ "engines": {
7
+ "node": ">=20"
8
+ },
9
+ "files": [
10
+ "*.js",
11
+ "src/",
12
+ "skills/",
13
+ "README.md",
14
+ "LICENSE",
15
+ "!**/*.test.js",
16
+ "!**/*.test.mjs",
17
+ "!**/bench-*.mjs"
18
+ ],
19
+ "scripts": {
20
+ "gate": "node scripts/release-gate.mjs",
21
+ "rc1": "WAM_RC1_EVIDENCE=1 node scripts/release-gate.mjs",
22
+ "docs:check": "node scripts/docs-check.mjs",
23
+ "validate": "node scripts/release-gate.mjs",
24
+ "production:gate": "node scripts/release-gate.mjs",
25
+ "release:check": "node scripts/release-gate.mjs",
26
+ "bench:validation": "node benchmarks/run-validation.mjs",
27
+ "bench:audit": "node benchmarks/validation/audit-results.mjs --build",
28
+ "bench:validate": "node benchmarks/validation/audit-results.mjs",
29
+ "benchmark": "node benchmarks/run.mjs",
30
+ "benchmark:real": "node benchmarks/run-real.mjs",
31
+ "benchmark:suite": "node benchmarks/cli.mjs",
32
+ "report:rc1": "node benchmarks/reports/generate-rc1.mjs",
33
+ "pack:test": "node scripts/verify-package.mjs",
34
+ "verify:package": "node scripts/verify-package.mjs",
35
+ "verify:version": "node scripts/verify-version-parity.mjs",
36
+ "verify:security": "node scripts/verify-security.mjs",
37
+ "verify:compat": "node scripts/check-compatibility.mjs",
38
+ "verify:published": "node scripts/verify-published-package.mjs",
39
+ "smoke": "node -e \"import('./index.js').then(m => console.log('WAM plugin loaded successfully'))\"",
40
+ "test": "node scripts/run-tests.mjs",
41
+ "test:legacy": "node --test --test-concurrency=1 tests/legacy/wait-a-minute-test.mjs",
42
+ "test:validation": "node --test benchmarks/validation/*.test.mjs",
43
+ "test:e2e:opencode": "node tests/e2e/opencode/smoke.mjs",
44
+ "test:e2e:package": "node scripts/package-e2e.mjs",
45
+ "test:e2e:migration": "node tests/e2e/migration/run.mjs",
46
+ "test:isolation": "node tests/isolation/run.mjs",
47
+ "perf:sanity": "node scripts/performance-sanity.mjs",
48
+ "wam:next": "node scripts/autonomous-task-runner.mjs --all"
49
+ },
50
+ "repository": {
51
+ "type": "git",
52
+ "url": "https://github.com/khnker/opencode-wait-a-minute.git"
53
+ },
54
+ "homepage": "https://github.com/khnker/opencode-wait-a-minute#readme",
55
+ "bugs": {
56
+ "url": "https://github.com/khnker/opencode-wait-a-minute/issues"
57
+ },
58
+ "publishConfig": {
59
+ "provenance": true,
60
+ "access": "public"
61
+ },
62
+ "keywords": [
63
+ "opencode",
64
+ "plugin",
65
+ "coding-agent",
66
+ "task-management",
67
+ "verification",
68
+ "context-management"
69
+ ],
70
+ "license": "MIT",
71
+ "type": "module"
72
+ }
@@ -0,0 +1,114 @@
1
+ ---
2
+ name: codebase-design
3
+ description: Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
4
+ ---
5
+
6
+ # Codebase Design
7
+
8
+ Design **deep modules**: a lot of behaviour behind a small interface, placed at a clean seam, testable through that interface. Use this language and these principles wherever code is being designed or restructured. The aim is leverage for callers, locality for maintainers, and testability for everyone.
9
+
10
+ ## Glossary
11
+
12
+ Use these terms exactly: don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.
13
+
14
+ **Module**: anything with an interface and an implementation. Deliberately scale-agnostic: a function, class, package, or tier-spanning slice. _Avoid_: unit, component, service.
15
+
16
+ **Interface**: everything a caller must know to use the module correctly: the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics. _Avoid_: API, signature (too narrow, they refer only to the type-level surface).
17
+
18
+ **Implementation**: what's inside a module, its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.
19
+
20
+ **Depth**: leverage at the interface. The amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface, **shallow** when the interface is nearly as complex as the implementation.
21
+
22
+ **Seam** _(Michael Feathers)_: a place where you can alter behaviour without editing in that place; the *location* at which a module's interface lives. Where to put the seam is its own design decision, distinct from what goes behind it. _Avoid_: boundary (overloaded with DDD's bounded context).
23
+
24
+ **Adapter**: a concrete thing that satisfies an interface at a seam. Describes *role* (what slot it fills), not substance (what's inside).
25
+
26
+ **Leverage**: what callers get from depth. More capability per unit of interface they learn. One implementation pays back across N call sites and M tests.
27
+
28
+ **Locality**: what maintainers get from depth. Change, bugs, knowledge, and verification concentrate in one place rather than spreading across callers. Fix once, fixed everywhere.
29
+
30
+ ## Deep vs shallow
31
+
32
+ **Deep module** = small interface + lots of implementation:
33
+
34
+ ```
35
+ ┌─────────────────────┐
36
+ │ Small Interface │ ← Few methods, simple params
37
+ ├─────────────────────┤
38
+ │ │
39
+ │ Deep Implementation│ ← Complex logic hidden
40
+ │ │
41
+ └─────────────────────┘
42
+ ```
43
+
44
+ **Shallow module** = large interface + little implementation (avoid):
45
+
46
+ ```
47
+ ┌─────────────────────────────────┐
48
+ │ Large Interface │ ← Many methods, complex params
49
+ ├─────────────────────────────────┤
50
+ │ Thin Implementation │ ← Just passes through
51
+ └─────────────────────────────────┘
52
+ ```
53
+
54
+ When designing an interface, ask:
55
+
56
+ - Can I reduce the number of methods?
57
+ - Can I simplify the parameters?
58
+ - Can I hide more complexity inside?
59
+
60
+ ## Principles
61
+
62
+ - **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts; they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface.
63
+ - **The deletion test.** Imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
64
+ - **The interface is the test surface.** Callers and tests cross the same seam. If you want to test *past* the interface, the module is probably the wrong shape.
65
+ - **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it.
66
+
67
+ ## Designing for testability
68
+
69
+ Good interfaces make testing natural:
70
+
71
+ 1. **Accept dependencies, don't create them.**
72
+
73
+ ```typescript
74
+ // Testable
75
+ function processOrder(order, paymentGateway) {}
76
+
77
+ // Hard to test
78
+ function processOrder(order) {
79
+ const gateway = new StripeGateway();
80
+ }
81
+ ```
82
+
83
+ 2. **Return results, don't produce side effects.**
84
+
85
+ ```typescript
86
+ // Testable
87
+ function calculateDiscount(cart): Discount {}
88
+
89
+ // Hard to test
90
+ function applyDiscount(cart): void {
91
+ cart.total -= discount;
92
+ }
93
+ ```
94
+
95
+ 3. **Small surface area.** Fewer methods = fewer tests needed. Fewer params = simpler test setup.
96
+
97
+ ## Relationships
98
+
99
+ - A **Module** has exactly one **Interface** (the surface it presents to callers and tests).
100
+ - **Depth** is a property of a **Module**, measured against its **Interface**.
101
+ - A **Seam** is where a **Module**'s **Interface** lives.
102
+ - An **Adapter** sits at a **Seam** and satisfies the **Interface**.
103
+ - **Depth** produces **Leverage** for callers and **Locality** for maintainers.
104
+
105
+ ## Rejected framings
106
+
107
+ - **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead.
108
+ - **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow: interface here includes every fact a caller must know.
109
+ - **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**.
110
+
111
+ ## Going deeper
112
+
113
+ - **Deepening a cluster given its dependencies**, see [DEEPENING.md](DEEPENING.md): dependency categories, seam discipline, and replace-don't-layer testing.
114
+ - **Exploring alternative interfaces**, see [DESIGN-IT-TWICE.md](DESIGN-IT-TWICE.md): spin up parallel sub-agents to design the interface several radically different ways, then compare on depth, locality, and seam placement.
@@ -0,0 +1,27 @@
1
+ ---
2
+ name: design-contract
3
+ description: design system contracts, token plans, anti-slop rules, state definitions, and critique loops
4
+ license: MIT
5
+ compatibility: opencode, claude-code
6
+ ---
7
+
8
+ # Design Contract & System Governance
9
+
10
+ Enforce design system integrity and UI/UX predictability.
11
+
12
+ ## Core Pillars
13
+
14
+ 1. **Design Contracts**: Every component or view requires a documented contract in `.opencode/contracts/design.json` (or similar) BEFORE implementation. Defines intended layout, interactions, and constraints.
15
+ 2. **Token Plans**: Mandatory use of design tokens (e.g., Tailwind config, CSS variables). NO magic values.
16
+ 3. **Anti-Slop Rules**: No nested CSS overrides. No "just quick fix" styles. All components must adhere to established layout patterns.
17
+ 4. **State Definitions**: Explicit definitions of component states (loading, error, success, hover, active).
18
+ 5. **Critique Loops**: Post-implementation check against the initial design contract. If implementation drifts, it must be refactored before approval.
19
+
20
+ ## Critique Loop Process
21
+
22
+ Before finalizing any UI task:
23
+
24
+ 1. **Self-Audit**: Compare implementation against design contract.
25
+ 2. **Drift Detection**: Identify layout, spacing, or styling inconsistencies.
26
+ 3. **Refactor**: Fix identified drift immediately.
27
+ 4. **Validation**: Mark as "Contract Compliant" only when drift is zero.
@@ -0,0 +1,19 @@
1
+ # Design Critique
2
+
3
+ Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring and actionable feedback.
4
+
5
+ ## MANDATORY PREPARATION
6
+
7
+ Users start this workflow with `/critique`. Gather: what the interface is trying to accomplish.
8
+
9
+ ---
10
+
11
+ Conduct a holistic design critique, evaluating whether the interface actually works — not just technically, but as a designed experience. Think like a design director giving feedback.
12
+
13
+ ## Reference Checklist
14
+
15
+ - Hierarchy & Action Prioritization
16
+ - Text Hierarchy & Readability (line length, baseline, alignment)
17
+ - Cognitive Load (working-memory limits)
18
+ - Interaction Design (target sizing, focus, overlay behavior)
19
+ - Search & Findability
@@ -0,0 +1,17 @@
1
+ ---
2
+ name: design-system
3
+ description: Manages UI rules, design tokens, and reference-image analysis for consistent frontend development.
4
+ ---
5
+
6
+ # Design System
7
+
8
+ Covers Req-24 (UI Rules), Req-25 (Tokens), Req-26 (Reference-image analysis).
9
+
10
+ ## UI Rules (Req-24)
11
+ Follow the principles in `references/ui-rules.md`.
12
+
13
+ ## Tokens (Req-25)
14
+ Use `references/tokens.md` for spacing, typography, colors, and shadows.
15
+
16
+ ## Reference-image Analysis (Req-26)
17
+ Use `references/image-analysis.md` for analyzing and mapping reference images to UI implementation.
@@ -0,0 +1,14 @@
1
+ # Reference-image Analysis (Req-26)
2
+
3
+ Based on PGraeff/frontend-design-pro-agent-skill.
4
+
5
+ ## Analysis Pipeline
6
+ 1. **Deconstruct Composition**: Identify grid, layout structure, and element positioning.
7
+ 2. **Extract Visual Tokens**: Map colors, typography, and spacing to current design tokens.
8
+ 3. **Identify "Craft" Details**: Notice shadows, border-radii, micro-interactions, and subtle gradients.
9
+ 4. **Map to Component Logic**: Translate visual patterns into reusable UI components.
10
+
11
+ ## Implementation Strategy
12
+ - **Direct Map**: Use exact values if consistency is required.
13
+ - **Abstract**: Map to nearest available token if conforming to existing system.
14
+ - **Extend**: Propose new tokens if the reference image introduces a superior pattern.
@@ -0,0 +1,32 @@
1
+ # Design Tokens (Req-25)
2
+
3
+ ## Spacing Scale
4
+ - `0`: 0px
5
+ - `1`: 4px
6
+ - `2`: 8px
7
+ - `3`: 12px
8
+ - `4`: 16px
9
+ - `6`: 24px
10
+ - `8`: 32px
11
+ - `12`: 48px
12
+ - `16`: 64px
13
+
14
+ ## Typography Scale
15
+ - `xs`: 12px / Line height: 16px
16
+ - `sm`: 14px / Line height: 20px
17
+ - `base`: 16px / Line height: 24px
18
+ - `lg`: 18px / Line height: 28px
19
+ - `xl`: 20px / Line height: 28px
20
+ - `2xl`: 24px / Line height: 32px
21
+ - `3xl`: 30px / Line height: 36px
22
+
23
+ ## Semantic Colors
24
+ - `primary`: Main brand/action color.
25
+ - `secondary`: Supporting interface color.
26
+ - `background`: Page base.
27
+ - `surface`: Card/elevated elements.
28
+ - `text-primary`: High-contrast body text.
29
+ - `text-secondary`: Low-contrast auxiliary text.
30
+ - `danger`: Error states.
31
+ - `warning`: Cautionary alerts.
32
+ - `success`: Positive outcomes.
@@ -0,0 +1,14 @@
1
+ # UI Rules (Req-24)
2
+
3
+ ## 1. Layout & Composition
4
+ - **Rhythm**: Use an 8pt grid for layout and 4pt for components.
5
+ - **Hierarchy**: Distinct visual weight for Primary vs Secondary actions.
6
+ - **Density**: Prefer generous whitespace unless for data-heavy dashboards.
7
+
8
+ ## 2. Interaction
9
+ - **Feedback**: Immediate visual state change on interaction (hover, active, focus).
10
+ - **Affordance**: Elements must look like they can be interacted with.
11
+
12
+ ## 3. Accessibility
13
+ - **Contrast**: Minimum WCAG AA compliance (4.5:1 for normal text).
14
+ - **Focus**: Visible focus indicators for keyboard navigation.
@@ -0,0 +1,138 @@
1
+ ---
2
+ name: diagnosing-bugs
3
+ description: Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.
4
+ ---
5
+
6
+ # Diagnosing Bugs
7
+
8
+ A discipline for hard bugs. Skip phases only when explicitly justified.
9
+
10
+ When exploring the codebase, read `GLOSSARY.md` (if it exists) to get a clear mental model of the relevant modules, and check ADRs in the area you're touching.
11
+
12
+ ## Redact
13
+
14
+ This skill has you show commands, outputs and captured artifacts. **Redact every secret first**: write `<REDACTED>` in its place. Build loops against env vars, so the credential stays in the environment rather than in what you show. Captured artifacts carry auth headers: quote only the lines that carry the signal.
15
+
16
+ If the redacted output is not enough to diagnose the bug, say so and ask the user.
17
+
18
+ ## Phase 1: Build a feedback loop
19
+
20
+ **This is the skill.** Everything else is mechanical. If you have a **tight** pass/fail signal for the bug (one that goes red on _this_ bug), you will find the cause; bisection, hypothesis-testing, and instrumentation all just consume it. If you don't have one, no amount of staring at code will save you.
21
+
22
+ Spend disproportionate effort here. **Be aggressive. Be creative. Refuse to give up.**
23
+
24
+ ### Ways to construct one, in roughly this order
25
+
26
+ 1. **Failing test** at whatever seam reaches the bug: unit, integration, e2e.
27
+ 2. **Curl / HTTP script** against a running dev server.
28
+ 3. **CLI invocation** with a fixture input, diffing stdout against a known-good snapshot.
29
+ 4. **Headless browser script** (Playwright / Puppeteer) that drives the UI and asserts on DOM/console/network.
30
+ 5. **Replay a captured trace.** Save a real network request / payload / event log to disk; replay it through the code path in isolation.
31
+ 6. **Throwaway harness.** Spin up a minimal subset of the system (one service, mocked deps) that exercises the bug code path with a single function call.
32
+ 7. **Property / fuzz loop.** If the bug is "sometimes wrong output", run 1000 random inputs and look for the failure mode.
33
+ 8. **Bisection harness.** If the bug appeared between two known states (commit, dataset, version), automate "boot at state X, check, repeat" so you can `git bisect run` it.
34
+ 9. **Differential loop.** Run the same input through old-version vs new-version (or two configs) and diff outputs.
35
+ 10. **HITL bash script.** Last resort. If a human must click, drive _them_ with `scripts/hitl-loop.template.sh` so the loop is still structured. Captured output feeds back to you.
36
+
37
+ Build the right feedback loop, and the bug is 90% fixed.
38
+
39
+ ### Tighten the loop
40
+
41
+ Treat the loop as a product. Once you have _a_ loop, **tighten** it:
42
+
43
+ - Can I make it faster? (Cache setup, skip unrelated init, narrow the test scope.)
44
+ - Can I make the signal sharper? (Assert on the specific symptom, not "didn't crash".)
45
+ - Can I make it more deterministic? (Pin time, seed RNG, isolate filesystem, freeze network.)
46
+
47
+ A 30-second flaky loop is barely better than no loop; a 2-second deterministic one is tight, a debugging superpower.
48
+
49
+ ### Non-deterministic bugs
50
+
51
+ The goal is not a clean repro but a **higher reproduction rate**. Loop the trigger 100×, parallelise, add stress, narrow timing windows, inject sleeps. A 50%-flake bug is debuggable; 1% is not, so keep raising the rate until it's debuggable.
52
+
53
+ ### When you genuinely cannot build a loop
54
+
55
+ Stop and say so explicitly. List what you tried. Ask the user for: (a) access to whatever environment reproduces it, (b) a redacted captured artifact (HAR file, log dump, core dump, screen recording with timestamps), or (c) permission to add temporary production instrumentation. Do **not** proceed to hypothesise without a loop.
56
+
57
+ ### Completion criterion: a tight loop that goes red
58
+
59
+ Phase 1 is done when the loop is **tight** and **red-capable**: you can name **one command** (a script path, a test invocation, a curl) that you have **already run at least once** (show the invocation and its output, redacted), and that is:
60
+
61
+ - [ ] **Red-capable**: it drives the actual bug code path and asserts the **user's exact symptom**, so it can go red on this bug and green once fixed. Not "runs without erroring"; it must be able to _catch this specific bug_.
62
+ - [ ] **Deterministic**: same verdict every run (flaky bugs: a pinned, high reproduction rate, per above).
63
+ - [ ] **Fast**: seconds, not minutes.
64
+ - [ ] **Agent-runnable**: you can run it unattended; a human in the loop only via `scripts/hitl-loop.template.sh`.
65
+
66
+ If you catch yourself reading code to build a theory before this command exists, **stop: jumping straight to a hypothesis is the exact failure this skill prevents.** No red-capable command, no Phase 2.
67
+
68
+ ## Phase 2: Reproduce + minimise
69
+
70
+ Run the loop. Watch it go red as the bug appears.
71
+
72
+ Confirm:
73
+
74
+ - [ ] The loop produces the failure mode the **user** described, not a different failure that happens to be nearby. Wrong bug = wrong fix.
75
+ - [ ] The failure is reproducible across multiple runs (or, for non-deterministic bugs, reproducible at a high enough rate to debug against).
76
+ - [ ] You have captured the exact symptom (error message, wrong output, slow timing) so later phases can verify the fix actually addresses it.
77
+
78
+ ### Minimise
79
+
80
+ Once it's red, shrink the repro to the **smallest scenario that still goes red**. Cut inputs, callers, config, data, and steps **one at a time**, re-running the loop after each cut, and keep only what's load-bearing for the failure.
81
+
82
+ Why bother: a minimal repro shrinks the hypothesis space in Phase 3 (fewer moving parts left to suspect) and becomes the clean regression test in Phase 5.
83
+
84
+ Done when **every remaining element is load-bearing**: removing any one of them makes the loop go green.
85
+
86
+ Do not proceed until you have reproduced **and** minimised.
87
+
88
+ ## Phase 3: Hypothesise
89
+
90
+ Generate **3–5 ranked hypotheses** before testing any of them. Single-hypothesis generation anchors on the first plausible idea.
91
+
92
+ Each hypothesis must be **falsifiable**: state the prediction it makes.
93
+
94
+ > Format: "If <X> is the cause, then <changing Y> will make the bug disappear / <changing Z> will make it worse."
95
+
96
+ If you cannot state the prediction, the hypothesis is a vibe: discard or sharpen it.
97
+
98
+ **Show the ranked list to the user before testing.** They often have domain knowledge that re-ranks instantly ("we just deployed a change to #3"), or know hypotheses they've already ruled out. Cheap checkpoint, big time saver. Don't block on it; proceed with your ranking if the user is AFK.
99
+
100
+ ## Phase 4: Instrument
101
+
102
+ Each probe must map to a specific prediction from Phase 3. **Change one variable at a time.**
103
+
104
+ Tool preference:
105
+
106
+ 1. **Debugger / REPL inspection** if the env supports it. One breakpoint beats ten logs.
107
+ 2. **Targeted logs** at the boundaries that distinguish hypotheses.
108
+ 3. Never "log everything and grep".
109
+
110
+ **Tag every debug log** with a unique prefix, e.g. `[DEBUG-a4f2]`. Cleanup at the end becomes a single grep. Untagged logs survive; tagged logs die.
111
+
112
+ **Perf branch.** For performance regressions, logs are usually wrong. Instead: establish a baseline measurement (timing harness, `performance.now()`, profiler, query plan), then bisect. Measure first, fix second.
113
+
114
+ ## Phase 5: Fix + regression test
115
+
116
+ Write the regression test **before the fix**, but only if there is a **correct seam** for it.
117
+
118
+ A correct seam is one where the test exercises the **real bug pattern** as it occurs at the call site. If the only available seam is too shallow (single-caller test when the bug needs multiple callers, unit test that can't replicate the chain that triggered the bug), a regression test there gives false confidence.
119
+
120
+ **If no correct seam exists, that itself is the finding.** Note it. The codebase architecture is preventing the bug from being locked down. Flag this for the next phase.
121
+
122
+ If a correct seam exists:
123
+
124
+ 1. Turn the minimised repro into a failing test at that seam.
125
+ 2. Watch it fail. If you forced the red by mutating code or a fixture, `diff` against a pristine copy to prove the mutation landed before you trust it.
126
+ 3. Apply the fix.
127
+ 4. Watch it pass.
128
+ 5. Re-run the Phase 1 feedback loop against the original (un-minimised) scenario.
129
+
130
+ ## Phase 6: Cleanup
131
+
132
+ Required before declaring done:
133
+
134
+ - [ ] Original repro no longer reproduces (re-run the Phase 1 loop)
135
+ - [ ] Regression test passes (or absence of seam is documented)
136
+ - [ ] All `[DEBUG-...]` instrumentation removed (`grep` the prefix)
137
+ - [ ] Throwaway prototypes deleted (or moved to a clearly-marked debug location)
138
+ - [ ] The hypothesis that turned out correct is stated in the commit / PR message, so the next debugger learns
@@ -0,0 +1,36 @@
1
+ # Frontend Design Skills
2
+
3
+ Modern UI/UX design patterns, guidelines, and frontend implementation rules to build production-grade user interfaces.
4
+
5
+ ## When to Activate
6
+
7
+ - Designing or implementing user interfaces, pages, or components
8
+ - Structuring layout, typography, colors, and responsive design
9
+ - Refining visual hierarchy and interaction models
10
+
11
+ ## Core Principles
12
+
13
+ 1. **Visual Hierarchy & Flow**
14
+ - Establish clear page anchors and reading order (Z-pattern or F-pattern).
15
+ - Use proportional spacing: items related to each other should be closer together than unrelated items (Law of Proximity).
16
+ - Differentiate levels of information using font size, weight, and color contrast.
17
+
18
+ 2. **Typography System**
19
+ - Limit font families to a maximum of 2 (one for headings, one for body/UI).
20
+ - Enforce a strict typographic scale (e.g., 12px, 14px, 16px, 20px, 24px, 32px, 48px).
21
+ - Maintain line heights between 1.4 and 1.6 for body text, and 1.1 to 1.25 for large headings.
22
+
23
+ 3. **Color & Contrast**
24
+ - Define a single primary brand color, a clear accent, and a solid neutral scale (grays).
25
+ - Follow WCAG 2.1 AA requirements: minimum 4.5:1 for normal text, 3:1 for large text and UI components.
26
+ - Use semantic colors consistently: green for success, red for destructive/error, yellow for warnings.
27
+
28
+ 4. **Layout & Spacing**
29
+ - Rely on a 4px or 8px grid system for all padding, margins, and gaps.
30
+ - Avoid hardcoded component widths; prefer flexbox, grid, and fluid percentage/auto sizing.
31
+ - Maintain consistent padding inside cards, containers, and modals.
32
+
33
+ 5. **Interactions & Feedback**
34
+ - Provide clear hover, focus-visible, and active states for all interactive elements.
35
+ - Design skeleton loaders or spinners for asynchronous states to avoid layout shifts (CLS).
36
+ - Ensure touch targets are at least 44x44px for mobile/touch devices.
@@ -0,0 +1,16 @@
1
+ ---
2
+ name: handoff
3
+ description: Compact the current conversation into a handoff document for another agent to pick up.
4
+ argument-hint: "What will the next session be used for?"
5
+ disable-model-invocation: true
6
+ ---
7
+
8
+ Write a handoff document summarising the current conversation so a fresh agent can continue the work. Save to the temporary directory of the user's OS (`$TMPDIR`, else `/tmp`; `%TEMP%` on Windows) - not the current workspace.
9
+
10
+ Include a "suggested skills" section in the document, naming which skills the next agent should call the Skill tool for.
11
+
12
+ Do not duplicate content already captured in other artifacts (specs, plans, ADRs, issues, commits, diffs). Reference them by path or URL instead.
13
+
14
+ Redact any sensitive information, such as API keys, passwords, or personally identifiable information.
15
+
16
+ If the user passed arguments, treat them as a description of what the next session will focus on and tailor the doc accordingly.
@@ -0,0 +1,71 @@
1
+ ---
2
+ name: improve-codebase-architecture
3
+ description: Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
4
+ disable-model-invocation: true
5
+ ---
6
+
7
+ # Improve Codebase Architecture
8
+
9
+ Surface architectural friction and propose **deepening opportunities**: refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
10
+
11
+ This command is _informed_ by the project's domain model and built on a shared design vocabulary:
12
+
13
+ - Call the Skill tool with "codebase-design" for the architecture vocabulary (**module**, **interface**, **depth**, **seam**, **adapter**, **leverage**, **locality**) and its principles (the deletion test, "the interface is the test surface", "one adapter = hypothetical seam, two = real"). Use these terms exactly in every suggestion, and don't drift into "component," "service," "API," or "boundary."
14
+ - The domain language in `GLOSSARY.md` gives names to good seams; ADRs in `docs/adr/` record decisions this command should not re-litigate.
15
+
16
+ ## Process
17
+
18
+ ### 1. Explore
19
+
20
+ **Scope before you scan: YAGNI.** Deepening a module pays off by making future changes to it easier, so put extra weight on the parts of the codebase that have recently changed. Decide *where* to look before you look:
21
+
22
+ - If the user named a direction (a module, a subsystem, a pain point), take it, and skip the inference below.
23
+ - Otherwise, walk back a good stretch of the commit history (`git log --oneline`) to find the codebase's hot spots, the files and areas that keep coming up, and let those paths pull your attention first. If the changes are scattered with no clear hot spot, widen the net.
24
+
25
+ Read the project's domain glossary (`GLOSSARY.md`) and any ADRs in the area you're touching first.
26
+
27
+ Then spawn a sub-agent to walk the codebase. Don't follow rigid heuristics; explore organically and note where you experience friction:
28
+
29
+ - Where does understanding one concept require bouncing between many small modules?
30
+ - Where are modules **shallow**, with an interface nearly as complex as the implementation?
31
+ - Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)?
32
+ - Where do tightly-coupled modules leak across their seams?
33
+ - Which parts of the codebase are untested, or hard to test through their current interface?
34
+
35
+ Apply the **deletion test** to anything you suspect is shallow: would deleting it concentrate complexity, or just move it? A "yes, concentrates" is the signal you want.
36
+
37
+ ### 2. Present candidates as an HTML report
38
+
39
+ Write a self-contained HTML file to the OS temp directory so nothing lands in the repo. Resolve the temp dir from `$TMPDIR`, falling back to `/tmp` (or `%TEMP%` on Windows), and write to `<tmpdir>/architecture-review-<timestamp>.html` so each run gets a fresh file. Open it for the user (`xdg-open <path>` on Linux, `open <path>` on macOS, `start <path>` on Windows) and tell them the absolute path.
40
+
41
+ The report uses **Tailwind via CDN** for layout and styling, and **Mermaid via CDN** for diagrams where a graph/flow/sequence reliably communicates the structure. Mix Mermaid with hand-crafted CSS/SVG visuals: use Mermaid when relationships are graph-shaped (call graphs, dependencies, sequences), and hand-built divs/SVG when you want something more editorial (mass diagrams, cross-sections, collapse animations). Each candidate gets a **before/after visualisation**. Be visual.
42
+
43
+ For each candidate, render a card with:
44
+
45
+ - **Files**: which files/modules are involved
46
+ - **Problem**: why the current architecture is causing friction
47
+ - **Solution**: plain English description of what would change
48
+ - **Benefits**: explained in terms of locality and leverage, and how tests would improve
49
+ - **Before / After diagram**: side-by-side, custom-drawn, illustrating the shallowness and the deepening
50
+ - **Recommendation strength**: one of `Strong`, `Worth exploring`, `Speculative`, rendered as a badge
51
+
52
+ End the report with a **Top recommendation** section: which candidate you'd tackle first and why.
53
+
54
+ **Use GLOSSARY.md vocabulary for the domain, and the `/codebase-design` vocabulary for the architecture.** If `GLOSSARY.md` defines "Order," talk about "the Order intake module," not "the FooBarHandler," and not "the Order service."
55
+
56
+ **ADR conflicts**: if a candidate contradicts an existing ADR, only surface it when the friction is real enough to warrant revisiting the ADR. Mark it clearly in the card (e.g. a warning callout: _"contradicts ADR-0007, but worth reopening because…"_). Don't list every theoretical refactor an ADR forbids.
57
+
58
+ See [HTML-REPORT.md](HTML-REPORT.md) for the full HTML scaffold, diagram patterns, and styling guidance.
59
+
60
+ Do NOT propose interfaces yet. After the file is written, ask the user: "Which of these would you like to explore?"
61
+
62
+ ### 3. Grilling loop
63
+
64
+ Once the user picks a candidate, call the Skill tool with "grilling" to walk the decision tree with them: constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive.
65
+
66
+ Side effects happen inline as decisions crystallize; call the Skill tool with "domain-modeling" to keep the domain model current as you go:
67
+
68
+ - **Naming a deepened module after a concept not in `GLOSSARY.md`?** Add the term to `GLOSSARY.md`. Create the file lazily if it doesn't exist.
69
+ - **Sharpening a fuzzy term during the conversation?** Update `GLOSSARY.md` right there.
70
+ - **User rejects the candidate with a load-bearing reason?** Offer an ADR, framed as: _"Want me to record this as an ADR so future architecture reviews don't re-suggest it?"_ Only offer when the reason would actually be needed by a future explorer to avoid re-suggesting the same thing; skip ephemeral reasons ("not worth it right now") and self-evident ones.
71
+ - **Want to explore alternative interfaces for the deepened module?** Call the Skill tool with "codebase-design" and use its design-it-twice parallel sub-agent pattern.