forge-orkes 0.1.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 (38) hide show
  1. package/bin/create-forge.js +103 -0
  2. package/package.json +28 -0
  3. package/template/.claude/agents/executor.md +177 -0
  4. package/template/.claude/agents/planner.md +148 -0
  5. package/template/.claude/agents/researcher.md +111 -0
  6. package/template/.claude/agents/reviewer.md +211 -0
  7. package/template/.claude/agents/verifier.md +210 -0
  8. package/template/.claude/settings.json +40 -0
  9. package/template/.claude/skills/architecting/SKILL.md +121 -0
  10. package/template/.claude/skills/auditing/SKILL.md +302 -0
  11. package/template/.claude/skills/beads-integration/SKILL.md +125 -0
  12. package/template/.claude/skills/debugging/SKILL.md +130 -0
  13. package/template/.claude/skills/designing/SKILL.md +134 -0
  14. package/template/.claude/skills/discussing/SKILL.md +229 -0
  15. package/template/.claude/skills/executing/SKILL.md +154 -0
  16. package/template/.claude/skills/forge/SKILL.md +524 -0
  17. package/template/.claude/skills/planning/SKILL.md +225 -0
  18. package/template/.claude/skills/quick-tasking/SKILL.md +74 -0
  19. package/template/.claude/skills/refactoring/SKILL.md +168 -0
  20. package/template/.claude/skills/researching/SKILL.md +117 -0
  21. package/template/.claude/skills/securing/SKILL.md +104 -0
  22. package/template/.claude/skills/verifying/SKILL.md +201 -0
  23. package/template/.forge/templates/constitution.md +123 -0
  24. package/template/.forge/templates/context.md +53 -0
  25. package/template/.forge/templates/design-systems/material-ui.md +44 -0
  26. package/template/.forge/templates/design-systems/primereact.md +46 -0
  27. package/template/.forge/templates/design-systems/shadcn-ui.md +47 -0
  28. package/template/.forge/templates/framework-absorption/generic.md +52 -0
  29. package/template/.forge/templates/framework-absorption/gsd.md +174 -0
  30. package/template/.forge/templates/framework-absorption/spec-kit.md +52 -0
  31. package/template/.forge/templates/plan.md +84 -0
  32. package/template/.forge/templates/project.yml +40 -0
  33. package/template/.forge/templates/refactor-backlog.yml +16 -0
  34. package/template/.forge/templates/requirements.yml +49 -0
  35. package/template/.forge/templates/roadmap.yml +44 -0
  36. package/template/.forge/templates/state/index.yml +51 -0
  37. package/template/.forge/templates/state/milestone.yml +42 -0
  38. package/template/CLAUDE.md +150 -0
@@ -0,0 +1,302 @@
1
+ ---
2
+ name: auditing
3
+ description: "Use after verifying passes to assess overall application health before milestone completion. Runs security audit (10 categories) and architecture audit (scaling, maintainability, code health). This is the pre-release gate — it answers 'is this codebase healthy enough to ship?'"
4
+ ---
5
+
6
+ # Auditing: Health Audit Before Milestone Completion
7
+
8
+ You are the pre-release gate. After `verifying` confirms the work delivers what was promised, you assess whether the codebase is healthy enough to ship. Two parallel audits — security and architecture — produce a structured health report that determines whether the milestone can complete.
9
+
10
+ ## When to Trigger
11
+
12
+ - **Automatically** after `verifying` returns a PASSED verdict (Standard and Full tiers)
13
+ - **On-demand** at any time via user request
14
+
15
+ ## Process Overview
16
+
17
+ 1. Read project context (`.forge/project.yml`) to determine tech stack
18
+ 2. Scope the audit — glob all source files, summarize what will be scanned
19
+ 3. Spawn two parallel subagents: Security Audit + Architecture Audit
20
+ 4. Collect results, score per-category, determine overall status
21
+ 5. Write health report to `.forge/audits/milestone-{id}-health-report.md`
22
+ 6. Route based on results: healthy → complete, issues → user decides
23
+
24
+ ## Step 1: Read Context
25
+
26
+ ```
27
+ Read: .forge/project.yml → tech stack, framework, database, dependencies
28
+ Read: .forge/state/milestone-{id}.yml → milestone ID and name
29
+ Read: .forge/constitution.md → active architectural gates (if exists)
30
+ ```
31
+
32
+ Determine which security categories apply based on the tech stack. For example:
33
+ - No database → SQL/NoSQL Injection is N/A
34
+ - No frontend → XSS Prevention is N/A
35
+ - No CI/CD config → Pipeline Security is N/A
36
+
37
+ ## Step 2: Scope the Audit
38
+
39
+ ```
40
+ Glob: src/**/*.{ts,tsx,js,jsx,py,go,rs,java} (adapt to project language)
41
+ Glob: **/*.env*, **/docker-compose*, **/.github/workflows/*
42
+ Glob: **/next.config*, **/vite.config*, **/webpack.config*
43
+ ```
44
+
45
+ Present scope summary to user:
46
+ *"Health audit scope: {N} source files, {N} config files. Scanning for security vulnerabilities (10 categories) and architectural health (4 dimensions). This will take a moment."*
47
+
48
+ Build explicit file lists for each subagent — pass file paths, not globs, so nothing is missed.
49
+
50
+ ## Step 3: Spawn Parallel Audits
51
+
52
+ Spawn both audits as fresh-context subagents. Each receives:
53
+ - The explicit file list for their scope
54
+ - The tech stack from `project.yml`
55
+ - Their specific audit instructions (below)
56
+
57
+ ### Part 1: Security Audit (subagent)
58
+
59
+ Spawn a security auditor agent with a fresh context window.
60
+
61
+ **10 Security Categories:**
62
+
63
+ | # | Category | What It Checks |
64
+ |---|----------|---------------|
65
+ | 1 | Authentication & Authorization | Every endpoint has auth middleware; role checks before data access |
66
+ | 2 | Data Scoping / Tenant Isolation | Queries scoped to correct user/tenant; no cross-tenant data leaks |
67
+ | 3 | Input Validation | Request bodies/params validated before use in queries or logic |
68
+ | 4 | Error Information Leakage | No stack traces, DB schemas, or internal details in API responses |
69
+ | 5 | XSS Prevention | No unsanitized user content injected into DOM |
70
+ | 6 | SQL/NoSQL Injection | All queries use parameterized placeholders, no string interpolation |
71
+ | 7 | Secrets Management | No hardcoded keys/tokens; `.env` in `.gitignore`; `process.env` usage |
72
+ | 8 | CORS Policy | No wildcard `*` origins in production; appropriate method restrictions |
73
+ | 9 | HTTP Security Headers | CSP, X-Frame-Options, HSTS, X-Content-Type-Options, Referrer-Policy |
74
+ | 10 | CI/CD Pipeline Security | Secrets via secrets context, not hardcoded in workflow files |
75
+
76
+ **Agent behavior rules:**
77
+ - Read every file in the provided list. No sampling or skipping.
78
+ - Every finding must have: file path, line number, what's wrong, severity, remediation.
79
+ - Understand context before flagging — read surrounding code, check for middleware, wrappers, and higher-order protections.
80
+ - Document intentionally public endpoints; don't flag them as vulnerabilities.
81
+ - Severity is firm: `critical` = exploitable vulnerability, `warning` = defense-in-depth gap, `info` = observation.
82
+ - Prefer false negatives over false positives — only flag what you're confident about.
83
+ - Categories that don't apply to this project's stack → mark as N/A with brief explanation.
84
+
85
+ **Project adaptation:** Adapt checks to the detected stack:
86
+ - Express vs Next.js vs Fastify endpoint patterns
87
+ - PostgreSQL vs MongoDB vs SQLite query patterns
88
+ - GitHub Actions vs GitLab CI vs other CI systems
89
+ - React vs Vue vs Svelte frontend patterns
90
+
91
+ **Output format** (return to orchestrator):
92
+
93
+ ```yaml
94
+ security_audit:
95
+ files_scanned: N
96
+ categories:
97
+ - id: 1
98
+ name: "Authentication & Authorization"
99
+ status: passed | warning | critical | na
100
+ findings:
101
+ - file: "src/api/users.ts"
102
+ line: 42
103
+ severity: critical | warning | info
104
+ issue: "Description of what's wrong"
105
+ remediation: "How to fix it"
106
+ notes: "Optional context about intentional decisions"
107
+ ```
108
+
109
+ ### Part 2: Architecture Audit (subagent)
110
+
111
+ Spawn an architecture auditor agent with a fresh context window.
112
+
113
+ **4 Architecture Dimensions:**
114
+
115
+ | Dimension | What It Checks |
116
+ |-----------|---------------|
117
+ | **Scalability** | Synchronous blocking calls, missing pagination, unbounded queries, N+1 query patterns, missing caching opportunities, single points of failure, hardcoded limits |
118
+ | **Maintainability** | Code complexity hotspots (files >300 lines, deeply nested logic >4 levels, god components/classes), circular dependencies, duplicated logic that warrants abstraction |
119
+ | **Code Health** | Dead code / unused exports, TODO/FIXME inventory with age, test coverage gaps (untested critical paths), stale/vulnerable dependencies |
120
+ | **Structural Quality** | Separation of concerns violations (business logic in UI layer), inconsistent patterns across similar features, missing error boundaries, API contract consistency |
121
+
122
+ **Agent behavior rules:**
123
+ - Check actual code, not theoretical concerns.
124
+ - Every finding references specific files with evidence.
125
+ - Severity: `critical` = architectural debt that will cause production issues or block future work, `warning` = quality concern worth addressing, `info` = improvement opportunity.
126
+ - Respect existing ADRs in `.forge/decisions/` — don't flag intentional architectural choices as issues.
127
+ - Respect constitutional articles in `.forge/constitution.md` — if the constitution permits a pattern, don't flag it.
128
+
129
+ **Output format** (return to orchestrator):
130
+
131
+ ```yaml
132
+ architecture_audit:
133
+ files_scanned: N
134
+ dimensions:
135
+ - name: "Scalability"
136
+ status: passed | warning | critical
137
+ findings:
138
+ - file: "src/api/products.ts"
139
+ line: 87
140
+ severity: critical | warning | info
141
+ issue: "Unbounded query with no pagination"
142
+ remediation: "Add limit/offset parameters"
143
+ - name: "Maintainability"
144
+ status: passed | warning | critical
145
+ findings: []
146
+ - name: "Code Health"
147
+ status: passed | warning | critical
148
+ findings: []
149
+ - name: "Structural Quality"
150
+ status: passed | warning | critical
151
+ findings: []
152
+ ```
153
+
154
+ ## Step 4: Score Results
155
+
156
+ After both subagents return, compute scores.
157
+
158
+ **Per-category scoring:**
159
+
160
+ | Status | Meaning |
161
+ |--------|---------|
162
+ | `passed` | No issues found |
163
+ | `warning` | Non-critical issues (info-level also maps here) |
164
+ | `critical` | Real vulnerabilities or architectural blockers |
165
+ | `na` | Category doesn't apply to this project |
166
+
167
+ **Overall status:**
168
+
169
+ | Overall | Condition |
170
+ |---------|-----------|
171
+ | `passed` | ALL categories and dimensions passed or N/A |
172
+ | `warnings_only` | One or more warnings, zero critical |
173
+ | `issues_found` | One or more critical findings |
174
+
175
+ ## Step 5: Write Health Report
176
+
177
+ Create `.forge/audits/` directory if needed. Write to `.forge/audits/milestone-{id}-health-report.md`.
178
+
179
+ **YAML frontmatter:**
180
+
181
+ ```yaml
182
+ ---
183
+ milestone_id: {id}
184
+ milestone_name: "{name}"
185
+ audited: "{ISO 8601 timestamp}"
186
+ status: passed | warnings_only | issues_found
187
+ security:
188
+ status: passed | warnings_only | issues_found
189
+ categories_passed: N
190
+ categories_warning: N
191
+ categories_critical: N
192
+ categories_na: N
193
+ architecture:
194
+ status: passed | warnings_only | issues_found
195
+ scalability: passed | warning | critical
196
+ maintainability: passed | warning | critical
197
+ code_health: passed | warning | critical
198
+ structural_quality: passed | warning | critical
199
+ total_files_scanned: N
200
+ ---
201
+ ```
202
+
203
+ **Body structure:**
204
+
205
+ ```markdown
206
+ # Health Audit Report: {milestone name}
207
+
208
+ ## Executive Summary
209
+ {1-3 sentences: overall health assessment, key findings, recommendation}
210
+
211
+ ## Security Findings
212
+
213
+ ### Category 1: Authentication & Authorization — {STATUS}
214
+ | File | Line | Severity | Issue | Remediation |
215
+ |------|------|----------|-------|-------------|
216
+ | ... | ... | ... | ... | ... |
217
+
218
+ {Repeat for each category. N/A categories get a single line: "N/A — {reason}"}
219
+
220
+ ## Architecture Findings
221
+
222
+ ### Scalability — {STATUS}
223
+ | File | Line | Severity | Issue | Remediation |
224
+ |------|------|----------|-------|-------------|
225
+ | ... | ... | ... | ... | ... |
226
+
227
+ {Repeat for each dimension}
228
+
229
+ ## Public Endpoints
230
+ {List of intentionally public endpoints documented during security audit}
231
+
232
+ ## Files Scanned
233
+ {Count and list of all files scanned across both audits}
234
+ ```
235
+
236
+ **Health trend tracking:** If a previous audit exists for an earlier milestone (check `.forge/audits/` for prior reports), compare results and note improvements or regressions in the executive summary.
237
+
238
+ ## Step 6: Route Based on Results
239
+
240
+ ### HEALTHY (all passed)
241
+
242
+ Update `.forge/state/milestone-{id}.yml`:
243
+ - Set `current.status` to `refactoring`
244
+
245
+ Present to user:
246
+ *"Health audit passed. No security vulnerabilities or architectural concerns found. Moving to refactoring review."*
247
+
248
+ → Route to `refactoring` skill.
249
+
250
+ ### NEEDS ATTENTION (critical issues found)
251
+
252
+ Do NOT mark milestone complete. Present to user:
253
+
254
+ *"Health audit found critical issues that should be addressed before shipping:"*
255
+
256
+ Inline the top 3 findings per critical category so the user sees them immediately (don't make them open the report).
257
+
258
+ Then offer choices:
259
+
260
+ *"Options:"*
261
+ - **A. Fix critical issues** — return to `planning` in fix mode with findings as requirements
262
+ - **B. Accept risk and continue** — document accepted risks in report, proceed to refactoring review
263
+
264
+ If user chooses A:
265
+ - Create fix requirements from critical findings
266
+ - Route to `planning` skill in fix mode
267
+ - After fix execution, re-run `auditing` (not full `verifying` — just the audit)
268
+
269
+ If user chooses B:
270
+ - Append "Accepted Risks" section to the health report with user's acknowledgment
271
+ - Update `.forge/state/milestone-{id}.yml`: set `current.status` to `refactoring`
272
+ - → Route to `refactoring` skill.
273
+
274
+ ### ACCEPTABLE WITH CAVEATS (warnings only)
275
+
276
+ Present to user:
277
+
278
+ *"Health audit passed with warnings — no critical issues, but {N} items worth noting. See the full report at `.forge/audits/milestone-{id}-health-report.md`."*
279
+
280
+ Then offer choices:
281
+ - **A. Continue to refactoring review** — accept warnings as known items
282
+ - **B. Fix warnings** — address before continuing
283
+
284
+ If user chooses A:
285
+ - Document accepted warnings in report
286
+ - Update `.forge/state/milestone-{id}.yml`: set `current.status` to `refactoring`
287
+ - → Route to `refactoring` skill.
288
+
289
+ If user chooses B:
290
+ - Create fix requirements from warning findings
291
+ - Route to `planning` in fix mode
292
+ - After fix execution, re-run `auditing`
293
+
294
+ ## Gate Type: Soft Gate
295
+
296
+ This is a soft gate — critical issues strongly recommend fixing before completion, but the user can accept risk and proceed. Rationale:
297
+ - Some issues may be acceptable known risks for the deployment context
298
+ - Some findings may be false positives despite the conservative flagging approach
299
+ - Non-production or internal tools may have different risk tolerances
300
+ - The user always has final authority over ship decisions
301
+
302
+ The report documents the decision either way, creating an audit trail.
@@ -0,0 +1,125 @@
1
+ ---
2
+ name: beads-integration
3
+ description: "Use when Beads is installed and you want persistent memory across sessions. Trigger when: starting a session on an existing project (bd prime for context), need to find unblocked work (bd ready), completing tasks (bd complete), or managing long-horizon multi-session projects. Requires Beads CLI to be installed."
4
+ ---
5
+
6
+ # Beads Integration (Optional)
7
+
8
+ Persistent cross-session memory. Only available when Beads is installed.
9
+
10
+ ## Prerequisites
11
+
12
+ Before using this skill, verify:
13
+ 1. Beads CLI installed: `bd --version` (should return version)
14
+ 2. Beads initialized in project: `.beads/` directory exists
15
+ 3. Forge integration enabled: `settings.json → forge.beads_integration: true`
16
+
17
+ If not installed, Forge works fine without it using `.forge/state/` + Session Memory.
18
+
19
+ ## Integration Points
20
+
21
+ ### On Session Start: `bd prime`
22
+
23
+ Run at the beginning of every session:
24
+
25
+ ```bash
26
+ bd prime
27
+ ```
28
+
29
+ This injects ~1-2K tokens of context:
30
+ - Open tasks with zero open blockers
31
+ - Recently closed tasks (last 3)
32
+ - Active blockers and their status
33
+
34
+ Combine with Forge state: read `.forge/state/milestone-{id}.yml` for workflow position (where `{id}` is the selected milestone), `bd prime` for project-wide context.
35
+
36
+ ### Finding Work: `bd ready`
37
+
38
+ Instead of manually triaging, query what's available:
39
+
40
+ ```bash
41
+ bd ready # All unblocked tasks, sorted by priority
42
+ bd ready --priority 3 # Only priority 3+ tasks
43
+ bd ready --json # Machine-readable output
44
+ ```
45
+
46
+ Use `bd ready` output to inform which Forge phase/plan to work on next.
47
+
48
+ ### During Work: `bd update`
49
+
50
+ As you complete Forge tasks, update Beads:
51
+
52
+ ```bash
53
+ bd complete {task-id} # Mark task done
54
+ bd block {task-id} --by {blocker-id} # Record a blocker
55
+ bd unblock {task-id} # Remove a blocker
56
+ ```
57
+
58
+ ### Memory Hygiene: `bd compact`
59
+
60
+ Periodically clean up old completed tasks:
61
+
62
+ ```bash
63
+ bd compact --analyze --json # See what would be compacted
64
+ bd compact --apply # Summarize old tasks (30+ days closed)
65
+ ```
66
+
67
+ Compaction replaces detailed task content with LLM-generated summaries, preserving essential context while reducing token cost.
68
+
69
+ ## Forge + Beads Workflow
70
+
71
+ ### Quick Tier
72
+ ```
73
+ bd prime → quick-tasking → bd complete → done
74
+ ```
75
+
76
+ ### Standard Tier
77
+ ```
78
+ bd prime → bd ready (pick task) → researching → discussing → planning → executing → bd complete → verifying → done
79
+ ```
80
+
81
+ ### Full Tier
82
+ ```
83
+ bd prime → bd ready (pick phase) → researching → discussing → architecting → planning → executing → bd complete → verifying → done
84
+ ```
85
+
86
+ ## Syncing State
87
+
88
+ Forge's `.forge/state/` and Beads' `.beads/` serve different purposes:
89
+
90
+ | Concern | Forge (state/) | Beads (.beads/) |
91
+ |---------|----------------|-----------------|
92
+ | Current workflow position | ✓ (milestone-{id}.yml: phase, plan, task) | |
93
+ | Global framework patterns | ✓ (index.yml: desire_paths, metrics) | |
94
+ | Locked decisions | ✓ (context.md) | |
95
+ | Project-wide task graph | | ✓ (DAG with dependencies) |
96
+ | Cross-session memory | | ✓ (persists in git) |
97
+ | Task prioritization | | ✓ (5-level priority) |
98
+ | Memory compaction | | ✓ (semantic summarization) |
99
+
100
+ Both are git-tracked. Both survive session boundaries. They complement each other.
101
+
102
+ ## Creating Beads from Forge Plans
103
+
104
+ When Forge creates plans with tasks, optionally create corresponding Beads:
105
+
106
+ ```bash
107
+ bd create "Implement login form" --priority 3
108
+ bd create "Add auth API endpoint" --priority 3 --blocked-by {login-form-id}
109
+ ```
110
+
111
+ This gives you the DAG dependency tracking that Forge's flat plan files don't provide.
112
+
113
+ ## Disabling Beads Integration
114
+
115
+ If you want Forge without Beads:
116
+
117
+ ```json
118
+ {
119
+ "forge": {
120
+ "beads_integration": false
121
+ }
122
+ }
123
+ ```
124
+
125
+ Beads continues working independently. Forge just won't query or update it.
@@ -0,0 +1,130 @@
1
+ ---
2
+ name: debugging
3
+ description: "Use when code isn't working and you need to investigate systematically. Trigger when: tests fail unexpectedly, features don't work as expected, errors are cryptic or intermittent, or you've been stuck for more than 10 minutes. This skill prevents thrashing by enforcing scientific debugging."
4
+ ---
5
+
6
+ # Debugging
7
+
8
+ Debug systematically. Every hypothesis tested, every dead end recorded.
9
+
10
+ ## The Scientific Method for Bugs
11
+
12
+ 1. **Observe**: What's the actual behavior? (exact error, steps to reproduce, when it started)
13
+ 2. **Hypothesize**: Why might this happen? (max 3 hypotheses)
14
+ 3. **Predict**: If hypothesis is correct, what should we observe when we test?
15
+ 4. **Test**: Run the test. Capture evidence.
16
+ 5. **Eliminate**: Does evidence support or refute? Record result.
17
+ 6. **Iterate**: Next hypothesis, or refine current one.
18
+ 7. **Conclude**: Root cause identified. Fix it.
19
+
20
+ ## Persistent Debug File
21
+
22
+ Create `.forge/debug/{slug}.md` to survive context resets:
23
+
24
+ ```markdown
25
+ ---
26
+ status: gathering | investigating | fixing | verifying | resolved
27
+ trigger: "[exact symptom or error message]"
28
+ created: 2026-02-16T19:00:00Z
29
+ updated: 2026-02-16T19:30:00Z
30
+ ---
31
+
32
+ ## Symptoms
33
+ - Expected: [what should happen]
34
+ - Actual: [what actually happens]
35
+ - Error: [exact error message if any]
36
+ - Reproduction: [steps to trigger]
37
+ - Since: [when it broke — commit, change, or "always"]
38
+
39
+ ## Current Focus
40
+ - Hypothesis: [what I'm currently testing]
41
+ - Test: [how I'm testing it]
42
+ - Expecting: [what result means]
43
+
44
+ ## Hypotheses
45
+
46
+ ### H1: [Specific, falsifiable hypothesis]
47
+ - Predict: [If true, we'd see...]
48
+ - Test: [How to test]
49
+ - Result: SUPPORTED | REFUTED | INCONCLUSIVE
50
+ - Evidence: [What we observed]
51
+
52
+ ### H2: [Second hypothesis]
53
+ ...
54
+
55
+ ## Eliminated
56
+ - [H1]: Refuted because [evidence]. Timestamp: [when]
57
+
58
+ ## Evidence Log
59
+ - [timestamp]: Checked [what]. Found [what]. Implies [what].
60
+
61
+ ## Root Cause
62
+ [Empty until found]
63
+
64
+ ## Fix
65
+ [Empty until applied]
66
+
67
+ ## Verification
68
+ [Empty until fix is verified]
69
+ ```
70
+
71
+ ### Update Rules
72
+ - **Status**: Overwrite (phase transitions only)
73
+ - **Current Focus**: Overwrite (before every action)
74
+ - **Symptoms**: Immutable after gathering phase
75
+ - **Eliminated**: Append only (prevents re-investigating dead ends)
76
+ - **Evidence Log**: Append only
77
+
78
+ ## Investigation Techniques
79
+
80
+ Use these in order of effectiveness:
81
+
82
+ ### 1. Read the Error (seriously)
83
+ Read the ENTIRE error message, stack trace, and surrounding log output. Most bugs are explained by the error — we just don't read carefully enough.
84
+
85
+ ### 2. Binary Search
86
+ Cut the problem space in half. If a function has 10 steps, test after step 5. If it works, bug is in steps 6-10. Repeat.
87
+
88
+ ### 3. Minimal Reproduction
89
+ Strip away everything until only the bug remains. Remove middleware, simplify data, use hardcoded values. The smaller the reproduction, the clearer the cause.
90
+
91
+ ### 4. Differential Debugging
92
+ What changed? `git diff`, `git log`, recent dependency updates. If it worked before and doesn't now, something changed.
93
+
94
+ ### 5. Working Backwards
95
+ Start from the wrong output. Trace the data backward through the system: which function produced it? What was its input? Where did that come from?
96
+
97
+ ### 6. Comment Out Everything
98
+ Remove all code. Uncomment one piece at a time. When the bug reappears, you found the culprit.
99
+
100
+ ### 7. Add Observability First
101
+ Before changing behavior, add logging. See what's actually happening before guessing.
102
+
103
+ ### 8. Git Bisect
104
+ If you know it worked at some point: `git bisect start`, `git bisect bad` (current), `git bisect good {hash}` (working version). Git finds the exact breaking commit.
105
+
106
+ ## Cognitive Bias Awareness
107
+
108
+ Watch for these traps:
109
+ - **Confirmation bias**: Seeking evidence that supports your theory, ignoring counter-evidence
110
+ - **Anchoring**: Fixating on the first theory instead of considering alternatives
111
+ - **Availability bias**: Blaming the last thing you changed, even if unrelated
112
+ - **Sunk cost**: Continuing a dead-end investigation because you've spent time on it
113
+
114
+ Counter-measure: After 3 failed hypotheses, step back and re-read symptoms from scratch.
115
+
116
+ ## When to Escalate
117
+
118
+ After 5 hypotheses tested without finding root cause:
119
+ 1. Document everything in debug file (what's tried, what's eliminated)
120
+ 2. Mark as `[NEEDS PAIR DEBUGGING]` in `.forge/state/milestone-{id}.yml` blockers
121
+ 3. The debug file saves the next person hours of re-investigation
122
+
123
+ ## Resolution
124
+
125
+ When root cause found:
126
+ 1. Fix the issue
127
+ 2. Add a test that catches this specific bug (regression test)
128
+ 3. Commit: `fix({scope}): {description of root cause and fix}`
129
+ 4. Move debug file to `.forge/debug/resolved/`
130
+ 5. Update `.forge/state/milestone-{id}.yml` — remove from blockers
@@ -0,0 +1,134 @@
1
+ ---
2
+ name: designing
3
+ description: "Use when building UI: component selection, visual design, responsive layouts, accessibility, design system consistency. Trigger whenever the deliverable includes visible UI. Reads design system config from .forge/project.yml and component mappings from .forge/design-system.md."
4
+ ---
5
+
6
+ # Designing
7
+
8
+ Build consistent, accessible UIs by using the project's design system, not fighting it.
9
+
10
+ ## Step 1: Load Design System Config
11
+
12
+ Read the project's design system configuration:
13
+
14
+ ```
15
+ Read: .forge/project.yml → design_system section
16
+ Read: .forge/design-system.md (component mapping table)
17
+ ```
18
+
19
+ If neither exists, this project hasn't been initialized with a design system. Ask the user:
20
+ - *"This project doesn't have a design system configured. Would you like to set one up now, or proceed without design system enforcement?"*
21
+
22
+ If `design_system.library` is `none`, skip component enforcement and focus on general design principles (accessibility, responsiveness, loading states).
23
+
24
+ ## Step 2: Component Mapping
25
+
26
+ The component mapping table in `.forge/design-system.md` is the source of truth. It maps UI needs to specific components from the project's library.
27
+
28
+ **When building any UI element**, check the mapping table first:
29
+ 1. Look up the UI need (data table, modal, dropdown, etc.)
30
+ 2. Use the mapped component with the documented props
31
+ 3. If the UI need isn't in the table → check the library's docs → add to the table
32
+
33
+ **Never build custom HTML/CSS for patterns the design system provides.** This is the single most important rule.
34
+
35
+ ## Step 3: Style Rules
36
+
37
+ These rules adapt based on the configured design system:
38
+
39
+ 1. **Use the design system's tokens, NOT custom CSS values**
40
+ - Read `design_system.theme_approach` from project.yml
41
+ - Bad: `style={{color: '#3B82F6', padding: '12px'}}`
42
+ - Good: Use the library's utility classes or theme tokens
43
+
44
+ 2. **Use design system components, NOT raw HTML**
45
+ - Bad: `<table><thead><tr><th>` for data display
46
+ - Good: The library's table/data grid component
47
+ - Bad: `<div className="modal-overlay">` with absolute positioning
48
+ - Good: The library's dialog/modal component
49
+
50
+ 3. **Use the configured icon set**
51
+ - Read `design_system.icon_set` from project.yml
52
+ - Use only icons from this set for consistency
53
+
54
+ 4. **Use the configured layout system**
55
+ - Read `design_system.layout_system` from project.yml
56
+ - Use its grid/flex utilities for responsive layouts
57
+ - Never hardcode pixel widths for responsive layouts
58
+
59
+ 5. **Theme customization goes in theme files, not inline**
60
+ - Override theme variables in the designated theme config
61
+ - Never scatter theme overrides across component files
62
+
63
+ ## Step 4: General Design Principles
64
+
65
+ These apply regardless of which design system is used (or if none is used).
66
+
67
+ ### Accessibility
68
+ - Every interactive element needs a label (visible or `aria-label`)
69
+ - Color is never the only indicator (use icons + color)
70
+ - Keyboard navigation works for all interactive elements
71
+ - Focus indicators are visible
72
+ - Most design system components handle a11y by default — don't override it
73
+
74
+ ### Responsive Design
75
+ - Mobile-first: design for small screens, enhance for large
76
+ - Use the layout system's breakpoints
77
+ - Test at 320px, 768px, 1024px, 1440px widths
78
+ - Tables should scroll horizontally on mobile
79
+
80
+ ### Loading States
81
+ - Always show loading indicators for async operations
82
+ - Use skeleton loaders or spinners during data fetch
83
+ - Disable submit buttons while processing
84
+
85
+ ### Form Patterns
86
+ - Labels above inputs, not beside (better for mobile and a11y)
87
+ - Validation messages appear near the relevant field
88
+ - Submit buttons show loading state during submission
89
+ - Forms use the design system's form components
90
+
91
+ ## Step 5: Output Checklist
92
+
93
+ - [ ] All UI elements checked against `.forge/design-system.md` mapping table
94
+ - [ ] No custom HTML/CSS for patterns the design system provides
95
+ - [ ] Theme tokens used for colors, spacing, typography
96
+ - [ ] Configured icon set used for all icons
97
+ - [ ] Responsive layout using configured layout system
98
+ - [ ] Keyboard navigation works
99
+ - [ ] Loading states present for all async operations
100
+ - [ ] Forms use proper labels and validation messages
101
+
102
+ ## Creating a New Design System Config
103
+
104
+ When setting up a design system during project init (or later), follow this process:
105
+
106
+ 1. **Research the library**: Use `researching` skill to pull component docs
107
+ 2. **Build the mapping table**: Create `.forge/design-system.md` with this structure:
108
+
109
+ ```markdown
110
+ # Design System: {Library Name}
111
+
112
+ Docs: {docs_url}
113
+
114
+ ## Component Mapping
115
+
116
+ | UI Need | Component | Key Props | Example |
117
+ |---------|-----------|-----------|---------|
118
+ | Data table | `<ComponentName>` | `prop1`, `prop2` | `<ComponentName prop1={val} />` |
119
+ | Modal | ... | ... | ... |
120
+ | Dropdown | ... | ... | ... |
121
+ | ... | ... | ... | ... |
122
+
123
+ ## Style Rules
124
+
125
+ {Library-specific style rules, e.g., utility classes, theme tokens}
126
+
127
+ ## Icon Reference
128
+
129
+ {How to use icons from the configured icon set}
130
+ ```
131
+
132
+ 3. **Validate with user**: Present the mapping and ask if anything is missing or wrong.
133
+
134
+ Example configs for common libraries are available in `.forge/templates/design-systems/` as starting points.