engsys 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.
- package/LICENSE +21 -0
- package/README.md +202 -0
- package/core/agents/aaron.md +152 -0
- package/core/agents/bert.md +115 -0
- package/core/agents/isabelle.md +136 -0
- package/core/agents/jody.md +150 -0
- package/core/agents/leith.md +111 -0
- package/core/agents/marcelo.md +282 -0
- package/core/agents/melvin.md +101 -0
- package/core/agents/nyx.md +152 -0
- package/core/agents/otto.md +168 -0
- package/core/agents/patricia.md +283 -0
- package/core/commands/design-audit-local.md +155 -0
- package/core/commands/design-audit.md +235 -0
- package/core/commands/design-critique.md +96 -0
- package/core/commands/file-issue.md +22 -0
- package/core/commands/generate-project.md +45 -0
- package/core/commands/implement-issue.md +37 -0
- package/core/commands/implement-project.md +40 -0
- package/core/commands/naturalize.md +61 -0
- package/core/commands/pre-push.md +29 -0
- package/core/commands/prep-review-collect.md +130 -0
- package/core/commands/prep-review-finalize.md +121 -0
- package/core/commands/prep-review-publish.md +113 -0
- package/core/commands/prep-review.md +65 -0
- package/core/commands/project-closeout.md +25 -0
- package/core/skills/agentic-eval/SKILL.md +195 -0
- package/core/skills/chrome-devtools/SKILL.md +97 -0
- package/core/skills/code-review/SKILL.md +26 -0
- package/core/skills/gh-cli/SKILL.md +2202 -0
- package/core/skills/git-commit/SKILL.md +124 -0
- package/core/skills/git-workflow-agents/SKILL.md +462 -0
- package/core/skills/git-workflow-agents/reference.md +220 -0
- package/core/skills/github-actions/SKILL.md +190 -0
- package/core/skills/github-issues/SKILL.md +154 -0
- package/core/skills/llm-structured-outputs/SKILL.md +323 -0
- package/core/skills/llm-structured-outputs/references/provider-details.md +392 -0
- package/core/skills/pre-push/SKILL.md +115 -0
- package/core/skills/refactor/SKILL.md +645 -0
- package/core/skills/web-design-reviewer/SKILL.md +371 -0
- package/core/skills/webapp-testing/SKILL.md +127 -0
- package/core/skills/webapp-testing/test-helper.js +56 -0
- package/core/templates/CLAUDE.md.tmpl +98 -0
- package/core/templates/adr-template.md +67 -0
- package/core/templates/gh-issue-templates/bug.md +39 -0
- package/core/templates/gh-issue-templates/content.md +42 -0
- package/core/templates/gh-issue-templates/enhancement.md +36 -0
- package/core/templates/gh-issue-templates/feature.md +39 -0
- package/core/templates/gh-issue-templates/infrastructure.md +41 -0
- package/core/templates/post-edit-reminders.sh.tmpl +19 -0
- package/core/templates/settings.json.tmpl +90 -0
- package/core/templates/settings.local.json.tmpl +3 -0
- package/core/workflows/agent-implementation-workflow.md +346 -0
- package/core/workflows/generate-project.md +258 -0
- package/core/workflows/implement-project-workflow.md +190 -0
- package/core/workflows/issue-tracking.md +89 -0
- package/core/workflows/project-closeout-ceremony.md +77 -0
- package/core/workflows/review-workflow.md +266 -0
- package/engsys.config.example.yaml +46 -0
- package/install +202 -0
- package/lessons-library/README.md +80 -0
- package/lessons-library/async-callbacks-verify-liveness.md +15 -0
- package/lessons-library/change-isnt-done-until-every-surface-updated.md +15 -0
- package/lessons-library/claim-then-act-for-irreversible-ops.md +16 -0
- package/lessons-library/co-commit-entangled-work.md +15 -0
- package/lessons-library/dependabot-triage-playbook.md +17 -0
- package/lessons-library/deploy-by-digest-and-verify-the-running-revision.md +15 -0
- package/lessons-library/enforce-your-guarantee-at-your-boundary.md +16 -0
- package/lessons-library/gate-changes-on-measurement-not-vibes.md +15 -0
- package/lessons-library/iac-first-no-console-changes.md +15 -0
- package/lessons-library/independent-objective-review-gate.md +15 -0
- package/lessons-library/keep-an-immutable-source-of-truth.md +15 -0
- package/lessons-library/long-agent-runs-checkpoint-not-poll.md +15 -0
- package/lessons-library/model-identity-with-stable-ids-and-provenance.md +15 -0
- package/lessons-library/operator-choices-are-first-class.md +15 -0
- package/lessons-library/prefer-tool-enforced-structured-output.md +15 -0
- package/lessons-library/prove-causation-before-acting.md +15 -0
- package/lessons-library/re-read-state-before-acting.md +14 -0
- package/lessons-library/read-layer-tolerates-unbackfilled-rows.md +15 -0
- package/lessons-library/shell-safety-pipefail-and-validate-before-teardown.md +14 -0
- package/lessons-library/shift-correctness-left-and-distrust-false-greens.md +15 -0
- package/lessons-library/stray-control-bytes-hide-changes.md +14 -0
- package/lessons-library/tests-can-assert-the-bug.md +15 -0
- package/lessons-library/verify-ground-truth-not-reports.md +15 -0
- package/lessons-library/worktrees-need-bootstrap-from-origin-main.md +15 -0
- package/lib/commands.js +356 -0
- package/lib/generate-team-avatars.mjs +251 -0
- package/lib/manifest.js +155 -0
- package/lib/render.js +135 -0
- package/lib/selftest.js +90 -0
- package/lib/util.js +89 -0
- package/lib/yaml.js +156 -0
- package/optional-agents/gary.md +86 -0
- package/optional-agents/jos.md +136 -0
- package/optional-agents/sandy.md +101 -0
- package/optional-agents/steve.md +161 -0
- package/package.json +43 -0
- package/stacks/cloud/aws/claude.fragment.md +17 -0
- package/stacks/cloud/aws/settings.fragment.json +39 -0
- package/stacks/cloud/aws/skills/aws-deployment-preflight/SKILL.md +165 -0
- package/stacks/cloud/aws/skills/cloud-architecture-aws/SKILL.md +265 -0
- package/stacks/cloud/azure/claude.fragment.md +17 -0
- package/stacks/cloud/azure/settings.fragment.json +45 -0
- package/stacks/cloud/azure/skills/azure-deployment-preflight/SKILL.md +175 -0
- package/stacks/cloud/azure/skills/cloud-architecture-azure/SKILL.md +211 -0
- package/stacks/cloud/cloudflare/claude.fragment.md +21 -0
- package/stacks/cloud/cloudflare/settings.fragment.json +31 -0
- package/stacks/cloud/cloudflare/skills/cloud-architecture-cloudflare/SKILL.md +294 -0
- package/stacks/cloud/cloudflare/skills/cloudflare-deployment-preflight/SKILL.md +175 -0
- package/stacks/cloud/gcp/claude.fragment.md +17 -0
- package/stacks/cloud/gcp/settings.fragment.json +40 -0
- package/stacks/cloud/gcp/skills/cloud-architecture-gcp/SKILL.md +208 -0
- package/stacks/cloud/gcp/skills/gcp-deployment-preflight/SKILL.md +137 -0
- package/stacks/db/mongo/skills/mongo-conventions/SKILL.md +96 -0
- package/stacks/db/prisma/claude.fragment.md +49 -0
- package/stacks/db/prisma/skills/docker-database-package-copy/SKILL.md +44 -0
- package/stacks/db/prisma/skills/prisma-conventions/SKILL.md +37 -0
- package/stacks/domain/mobile-growth/skills/apple-ads/SKILL.md +184 -0
- package/stacks/domain/mobile-growth/skills/apple-ads/references/benchmark-notes.md +47 -0
- package/stacks/domain/mobile-growth/skills/apple-ads/references/official-links.md +53 -0
- package/stacks/domain/mobile-growth/skills/google-play-growth/SKILL.md +197 -0
- package/stacks/domain/mobile-growth/skills/google-play-growth/references/benchmark-notes.md +47 -0
- package/stacks/domain/mobile-growth/skills/google-play-growth/references/official-links.md +45 -0
- package/stacks/iac/bicep/claude.fragment.md +14 -0
- package/stacks/iac/bicep/settings.fragment.json +20 -0
- package/stacks/iac/bicep/skills/iac-bicep/SKILL.md +113 -0
- package/stacks/iac/cdk/claude.fragment.md +14 -0
- package/stacks/iac/cdk/settings.fragment.json +23 -0
- package/stacks/iac/cdk/skills/iac-cdk/SKILL.md +104 -0
- package/stacks/iac/terraform/claude.fragment.md +13 -0
- package/stacks/iac/terraform/settings.fragment.json +25 -0
- package/stacks/iac/terraform/skills/iac-terraform/SKILL.md +93 -0
- package/stacks/iac/terraform/skills/terraform-conventions/SKILL.md +87 -0
- package/stacks/lang/kotlin/skills/android-testing/SKILL.md +263 -0
- package/stacks/lang/kotlin/skills/jetpack-compose/SKILL.md +264 -0
- package/stacks/lang/kotlin/skills/kotlin-coroutines/SKILL.md +329 -0
- package/stacks/lang/python/skills/python-conventions/SKILL.md +61 -0
- package/stacks/lang/shell/skills/shell-scripting/SKILL.md +110 -0
- package/stacks/lang/swift/skills/swift-concurrency/SKILL.md +423 -0
- package/stacks/lang/swift/skills/swift-concurrency/references/approachable-concurrency.md +80 -0
- package/stacks/lang/swift/skills/swift-concurrency/references/concurrency-patterns.md +233 -0
- package/stacks/lang/swift/skills/swift-concurrency/references/swiftui-concurrency.md +187 -0
- package/stacks/lang/swift/skills/swift-concurrency/references/synchronization-primitives.md +341 -0
- package/stacks/lang/swift/skills/swift-testing/SKILL.md +497 -0
- package/stacks/lang/swift/skills/swift-testing/references/testing-advanced.md +106 -0
- package/stacks/lang/swift/skills/swift-testing/references/testing-patterns.md +504 -0
- package/stacks/lang/swift/skills/swiftdata/SKILL.md +334 -0
- package/stacks/lang/swift/skills/swiftdata/references/core-data-coexistence.md +504 -0
- package/stacks/lang/swift/skills/swiftdata/references/swiftdata-advanced.md +975 -0
- package/stacks/lang/swift/skills/swiftdata/references/swiftdata-queries.md +675 -0
- package/stacks/lang/swift/skills/swiftui-patterns/SKILL.md +371 -0
- package/stacks/lang/swift/skills/swiftui-patterns/references/architecture-patterns.md +486 -0
- package/stacks/lang/swift/skills/swiftui-patterns/references/deprecated-migration.md +1097 -0
- package/stacks/lang/swift/skills/swiftui-patterns/references/design-polish.md +780 -0
- package/stacks/lang/swift/skills/swiftui-patterns/references/platform-and-sharing.md +696 -0
- package/stacks/lang/typescript/skills/typescript-conventions/SKILL.md +91 -0
- package/stacks/platform/android/claude.fragment.md +40 -0
- package/stacks/platform/android/hooks/pre-push-gradle.sh +70 -0
- package/stacks/platform/android/settings.fragment.json +13 -0
- package/stacks/platform/android/skills/android-build-conventions/SKILL.md +247 -0
- package/stacks/platform/ios/claude.fragment.md +24 -0
- package/stacks/platform/ios/hooks/pre-push-xcodebuild.sh +82 -0
- package/stacks/platform/ios/settings.fragment.json +21 -0
- package/stacks/platform/ios/skills/xcodebuildmcp-simulator-logs/SKILL.md +76 -0
- package/stacks/platform/web/skills/frontend-testing/SKILL.md +246 -0
- package/stacks/platform/web/skills/react-conventions/SKILL.md +261 -0
- package/stacks/platform/web/skills/web-platform-conventions/SKILL.md +55 -0
- package/stacks/tooling/issue-tracker-github/claude.fragment.md +10 -0
- package/stacks/tooling/issue-tracker-github/settings.fragment.json +24 -0
- package/stacks/tooling/issue-tracker-github/skills/issue-tracker-github/SKILL.md +278 -0
- package/stacks/tooling/issue-tracker-linear/claude.fragment.md +17 -0
- package/stacks/tooling/issue-tracker-linear/settings.fragment.json +9 -0
- package/stacks/tooling/issue-tracker-linear/skills/issue-tracker-linear/SKILL.md +183 -0
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Iterate on surface design fidelity live in the browser against the running app โ compare a surface to the design reference, fix gaps in-loop, re-verify, repeat
|
|
3
|
+
argument-hint: <surface name or a route path>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /design-audit-local
|
|
7
|
+
|
|
8
|
+
Tight, interactive fidelity loop: open the **design reference** (gallery/showcase or mockup) **and** the live local surface side by side in the browser, find where the surface diverges from the reference, **fix the gap in source**, let the dev server hot-reload, re-verify โ repeat until it matches or a gap is escalated. The deliverable is working code on this branch, not a spec.
|
|
9
|
+
|
|
10
|
+
Target: $ARGUMENTS
|
|
11
|
+
|
|
12
|
+
## The mapping (read this first)
|
|
13
|
+
|
|
14
|
+
The **reference** is whatever the project uses as design truth (declared in `CLAUDE.md` / design docs): a **design system as code** rendered in a **gallery/showcase**, or a **mockup/proposal** pipeline. The audit checks whether the **live surfaces compose that reference faithfully** โ right tokens, right components, right variants/states. So the side-by-side is *reference vs. live surface*.
|
|
15
|
+
|
|
16
|
+
## When to use this vs `/design-audit`
|
|
17
|
+
|
|
18
|
+
| You wantโฆ | Use |
|
|
19
|
+
| ---------------------------------------------------------------------- | ------------------ |
|
|
20
|
+
| A fast compare-and-fix loop against the running app, edits land now | **this command** |
|
|
21
|
+
| A thorough remediation spec to review, then turn into a tracker project | `/design-audit` |
|
|
22
|
+
| A pure design critique with no implementation in scope | `/design-critique` |
|
|
23
|
+
|
|
24
|
+
A gap this loop **escalates** (P0 structural / S0โS1 design concern) graduates into `/design-audit` for a proper spec, or `/file-issue`. The P0โP3 / S0โS3 vocabulary below is shared with `/design-audit` on purpose.
|
|
25
|
+
|
|
26
|
+
## Anchors (resolve to the project's actual paths)
|
|
27
|
+
|
|
28
|
+
| What | Where (project-defined) |
|
|
29
|
+
| -------------------------- | -------------------------------------------------------------- |
|
|
30
|
+
| Component showcase (ref) | the rendered gallery/showcase, if one exists |
|
|
31
|
+
| Design tokens (truth) | colors / typography / spacing / elevation / motion sources |
|
|
32
|
+
| Components | the project's component library |
|
|
33
|
+
| Mockups / proposals | the proposal pipeline, if one exists |
|
|
34
|
+
| Live surfaces | the consuming app surfaces |
|
|
35
|
+
| Routing / surface split | the app's router |
|
|
36
|
+
| Brand / voice / lexicon | the project's design/brand brief |
|
|
37
|
+
| Local dev / git conventions | `CLAUDE.md` |
|
|
38
|
+
| Browser control | a browser-control MCP (e.g. `chrome-devtools`) |
|
|
39
|
+
|
|
40
|
+
## Phase 0: Preflight โ is the dev server up?
|
|
41
|
+
|
|
42
|
+
This loop is worthless if the app isn't running. Check before anything else. **Do not silently start services** โ if it's down, report and stop.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
# The dev server must be listening (port is project-defined)
|
|
46
|
+
lsof -nP -iTCP:<dev-port> -sTCP:LISTEN
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
- **Listening** โ proceed.
|
|
50
|
+
- **Down** โ tell the operator to start the project's dev server and stop.
|
|
51
|
+
|
|
52
|
+
**Worktree bootstrap โ check this when the session runs inside a git worktree.** A freshly created worktree may have no installed dependencies. Detect a worktree:
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
# In a worktree, --git-dir differs from --git-common-dir; in the main checkout they're equal.
|
|
56
|
+
[ "$(cd "$(git rev-parse --git-dir)" && pwd)" != "$(cd "$(git rev-parse --git-common-dir)" && pwd)" ] && echo "worktree"
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Bootstrap per the project (install deps + any codegen) before the dev server can start.
|
|
60
|
+
|
|
61
|
+
**Worktree gotcha โ check this explicitly.** Hot reload only picks up edits if the dev server's working directory is inside *this* checkout. If the server is running from a different worktree or the main checkout, every fix will appear to do nothing. If you can't confirm the server's cwd, say so and ask the operator to restart it from this directory.
|
|
62
|
+
|
|
63
|
+
If the browser-control MCP tools are unavailable, stop and tell the operator โ this command depends on them. A screenshot-only MCP is a fallback for capture but can't drive the interactive loop as well.
|
|
64
|
+
|
|
65
|
+
## Phase 1: Scope and route resolution
|
|
66
|
+
|
|
67
|
+
1. Resolve `$ARGUMENTS` to a live surface and its route (confirm by navigating, don't assume) โ the surfaceโrouteโsource mapping is project-defined.
|
|
68
|
+
2. If the surface carries a **demo/state switcher** (so you can reach empty/loading/error and any lifecycle states without a backend), use it to cover those states.
|
|
69
|
+
3. If `$ARGUMENTS` is ambiguous, ask the operator once with `AskUserQuestion`.
|
|
70
|
+
|
|
71
|
+
## Phase 2: Side-by-side capture
|
|
72
|
+
|
|
73
|
+
Open both in the browser so every comparison is concrete:
|
|
74
|
+
|
|
75
|
+
1. **Reference** โ open the gallery/showcase (or the mockup) for the component(s) in scope.
|
|
76
|
+
2. **Live surface** โ open the resolved route from Phase 1.
|
|
77
|
+
3. Resize both to **1440ร900** (primary desktop). Screenshot each. This pair is the comparison anchor.
|
|
78
|
+
4. If responsive is in scope, repeat at **768** (tablet) and **375** (mobile).
|
|
79
|
+
5. Audit **both themes** if the project ships light/dark โ drift often hides in one theme only.
|
|
80
|
+
|
|
81
|
+
Use the accessibility-tree snapshot to find/identify elements, and computed-style reads when a visual diff is ambiguous (e.g. is that the token, or a magic hex?). Use screenshots for the visual record.
|
|
82
|
+
|
|
83
|
+
## Phase 3: Interactive audit walk
|
|
84
|
+
|
|
85
|
+
Walk the live surface against the reference. Because this is the *running* app, you can exercise things a source read can't.
|
|
86
|
+
|
|
87
|
+
**Fidelity dimensions** (same as `/design-audit` โ don't skip any): Layout & IA ยท Components (system vs hand-rolled, right variant/state) ยท Copy (lexicon + voice) ยท Design tokens (**magic hex / magic px = P1 gap**) ยท States (drive lifecycle + hover/focus/loading/error) ยท Interactions (hover/active/focus, motion tokens, `prefers-reduced-motion`, disabled, form validation โ actually click and observe) ยท Responsive (1440 / 768 / 375, no horizontal scroll) ยท Accessibility (run an a11y audit; contrast, focus ring, ARIA on icon-only buttons, heading order).
|
|
88
|
+
|
|
89
|
+
**Live-only checks โ capture these too** (a static `/design-audit` misses them):
|
|
90
|
+
|
|
91
|
+
- Console messages โ JS errors, framework warnings, prop-type complaints.
|
|
92
|
+
- Layout shift / flashes on load.
|
|
93
|
+
|
|
94
|
+
For each divergence, log a gap (Phase 5 format). Triage immediately into two buckets:
|
|
95
|
+
|
|
96
|
+
- **Fix-live** โ P1 visual drift, P2 polish, wrong tokens, wrong copy, wrong component, wrong hover/focus/transition. Goes into Phase 4.
|
|
97
|
+
- **Escalate** โ P0 structural (a whole component or section missing โ may be unbuilt work, not drift), or an S0/S1 design concern (the *design itself* is questionable). Surface to the operator; don't hack a structural feature into place to chase a screenshot. For an S0/S1 judgment call, pull in the **leith** subagent for a brand/UX second opinion (and **nyx** if it touches a security boundary).
|
|
98
|
+
|
|
99
|
+
## Phase 4: Rapid fix loop
|
|
100
|
+
|
|
101
|
+
The core of the command. For each **fix-live** gap the operator greenlights, one at a time:
|
|
102
|
+
|
|
103
|
+
1. **Locate** the source โ the surface file, or a shared component. Use the snapshot + visible text/classes to pin the element to a file.
|
|
104
|
+
2. **Edit** โ make the smallest change that closes the gap. Prefer fixing the **surface to use the system** (swap hand-rolled markup for the design-system component, swap a magic hex for the token) over patching pixels locally. Never introduce a magic hex/px.
|
|
105
|
+
3. **Reload** โ hot reload usually reflects the change in ~1s. Navigate with reload if it didn't catch. Watch console messages for new errors.
|
|
106
|
+
4. **Re-verify** โ re-screenshot the live route at the same viewport (and both themes if relevant), compare to the reference again. Fixed โ mark resolved. Not fixed โ iterate.
|
|
107
|
+
5. **Iteration cap** โ if a single gap isn't closed after **3** attempts, stop, write down what's blocking it, move on.
|
|
108
|
+
|
|
109
|
+
Work the buckets in order: **P0 escalations first** (operator decides scope), then **P1**, then **P2**. Leave **P3** unless the operator pulls them in.
|
|
110
|
+
|
|
111
|
+
Keep the operator in the loop โ this is interactive. After a cluster of related fixes, show the before/after and let them react before moving on.
|
|
112
|
+
|
|
113
|
+
## Phase 5: Gap log (lightweight)
|
|
114
|
+
|
|
115
|
+
Track findings in `tmp/design-audit-local-<surface>-<YYYY-MM-DD>.md` (`mkdir -p tmp` first; gitignored). A working scratchpad, **not** a `docs/specs/` deliverable โ keep it terse. It exists so nothing is lost and so escalated gaps can graduate into a `/design-audit` spec.
|
|
116
|
+
|
|
117
|
+
Per gap:
|
|
118
|
+
|
|
119
|
+
```markdown
|
|
120
|
+
### Gap: <one-line summary>
|
|
121
|
+
|
|
122
|
+
- **Severity**: P0 broken | P1 visual drift | P2 polish | P3 nice-to-have (or S0โS3 for a design concern)
|
|
123
|
+
- **Type**: missing | wrong-state | wrong-tokens | wrong-copy | wrong-component | wrong-interaction | wrong-layout | a11y | runtime-error
|
|
124
|
+
- **Reference**: <gallery demo / mockup / component / token file>
|
|
125
|
+
- **Implementation**: `<surface file>:<line>`
|
|
126
|
+
- **Observed (live)**: <what the running app does โ attach screenshot ref>
|
|
127
|
+
- **Expected (system)**: <what the reference prescribes>
|
|
128
|
+
- **Disposition**: FIXED-LIVE (commit <pending>) | ESCALATED (<why โ needs spec / unbuilt feature / S0-S1 design concern>) | BLOCKED (<what stopped the fix>)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Phase 6: Handoff
|
|
132
|
+
|
|
133
|
+
Final report to the operator:
|
|
134
|
+
|
|
135
|
+
- **Surface + route audited**, viewports + themes covered.
|
|
136
|
+
- **Fixed live** โ count + one line each. These are uncommitted edits on this branch.
|
|
137
|
+
- **Escalated** โ gaps that need a spec or are unbuilt features. Recommend `/design-audit <surface>` for a full remediation spec, or `/file-issue` per gap.
|
|
138
|
+
- **Blocked** โ gaps that resisted 3 fix attempts, with the blocker.
|
|
139
|
+
- **Live-only findings** โ console errors, a11y misses.
|
|
140
|
+
- **State coverage** โ which lifecycle/empty/error states you verified, which you couldn't (and why).
|
|
141
|
+
- **Next step** โ remind the operator the fixes are uncommitted: run `/pre-push` to gate, then commit per `CLAUDE.md` ยง Git / PR conventions. Don't auto-commit or auto-push.
|
|
142
|
+
|
|
143
|
+
## Operating rules
|
|
144
|
+
|
|
145
|
+
- **Preflight is non-negotiable.** Don't start the loop against an app that isn't running, and don't silently boot services โ report and let the operator start it.
|
|
146
|
+
- **Fix-live means visual fidelity, not feature work.** A whole missing component or section is a P0 escalation, not something to scaffold mid-loop.
|
|
147
|
+
- **Use the system, don't reinvent it.** The best fix is usually making the surface consume the design-system component instead of hand-rolled markup. Token compliance is not optional โ any color/spacing/type/radius not from the project's tokens is a P1, even if it looks identical.
|
|
148
|
+
- **One gap at a time.** Edit โ reload โ re-verify โ next. Batching makes it impossible to tell which edit broke what.
|
|
149
|
+
- **The system is the reference, not gospel.** If the *design itself* is wrong (S0/S1), escalate it โ don't faithfully implement a bad design. That's a `/design-audit` Phase 3 / `/design-critique` conversation.
|
|
150
|
+
- **Sanity before fidelity.** If the surface has a fundamental design problem, surface it loudly before grinding pixel gaps.
|
|
151
|
+
- **Cite, don't summarize.** Every gap references the reference side and `<surface file>:<line>` so the operator can verify in 30 seconds.
|
|
152
|
+
- **States are the product.** Use the demo switcher to reach lifecycle/empty/error states; don't log a gap for a state you couldn't actually observe.
|
|
153
|
+
- **Don't commit or push.** This loop ends with uncommitted edits. The operator runs `/pre-push` and commits.
|
|
154
|
+
|
|
155
|
+
See `CLAUDE.md` ยง Pre-push gate and ยง Git / PR conventions for the gate and commit rules, and the project's design/brand brief for brand/voice.
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Audit a live surface against the design reference (mockups or design system + tokens/components) with a fine-grained eye, produce a remediation spec
|
|
3
|
+
argument-hint: <surface name, a route path, a screenshot path, or a supplied mockup file>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Compare a live surface to its design reference with a **fine-fine-fine eye** and produce a remediation spec.
|
|
7
|
+
|
|
8
|
+
Target: $ARGUMENTS
|
|
9
|
+
|
|
10
|
+
## The mapping (read this first)
|
|
11
|
+
|
|
12
|
+
The **reference side** is whatever the project uses as design truth โ pick whichever the project defines in `CLAUDE.md` / its design docs:
|
|
13
|
+
|
|
14
|
+
- A **design-proposal pipeline** (mockup HTML / Figma exports / image comps) to diff the live surface against, OR
|
|
15
|
+
- A **design system as code** (tokens + components) and its **rendered gallery/showcase**, where the audit checks whether the live surfaces compose that system faithfully (right tokens, right components, right variants/states).
|
|
16
|
+
|
|
17
|
+
The **live side** is the consuming surface(s) in the app.
|
|
18
|
+
|
|
19
|
+
This command supports three input forms for `$ARGUMENTS`:
|
|
20
|
+
|
|
21
|
+
1. **A surface or route** โ audit that live surface against the reference.
|
|
22
|
+
2. **A screenshot path** โ audit the rendered pixels in the image against the reference; you won't have line numbers for the "live" side, so cite the screenshot region and the nearest source file you can locate.
|
|
23
|
+
3. **A supplied mockup** (an HTML/image file handed to you for a *not-yet-built* surface) โ treat the mockup as the proposed design, run the sanity check on it, and audit how well it would compose the existing system.
|
|
24
|
+
|
|
25
|
+
## Anchors (resolve to the project's actual paths)
|
|
26
|
+
|
|
27
|
+
| What | Where (project-defined) |
|
|
28
|
+
| -------------------------- | --------------------------------------------------------------- |
|
|
29
|
+
| Design tokens (truth) | colors / typography / spacing / elevation / motion sources |
|
|
30
|
+
| Components | the project's component library |
|
|
31
|
+
| Component showcase (ref) | the rendered gallery/showcase, if one exists |
|
|
32
|
+
| Mockups / proposals | the proposal pipeline, if one exists |
|
|
33
|
+
| Live surfaces | the consuming app surfaces |
|
|
34
|
+
| Routing / surface split | the app's router |
|
|
35
|
+
| Brand / voice / lexicon | the project's design/brand brief |
|
|
36
|
+
| Personas + flows | the project's persona/flow docs |
|
|
37
|
+
| Prior work | `gh pr list --state merged --search "<keyword>"` ยท `gh issue list --search "<keyword>"` |
|
|
38
|
+
|
|
39
|
+
## Phase 1: Scope
|
|
40
|
+
|
|
41
|
+
1. Resolve `$ARGUMENTS` to a target (a surface, route, screenshot, or mockup). Confirm by navigating, don't assume.
|
|
42
|
+
2. If ambiguous, ask the user once with `AskUserQuestion`.
|
|
43
|
+
3. For a live surface, list the component tree that renders it and note which design-system components it consumes vs. hand-rolled local markup.
|
|
44
|
+
|
|
45
|
+
## Phase 2: Load prior context
|
|
46
|
+
|
|
47
|
+
Pull what's been tried, what's open:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
gh pr list --state merged --search "<keyword>" --json number,title,mergedAt --limit 20
|
|
51
|
+
gh issue list --search "<keyword>" --json number,title,labels --limit 20
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
If the work is tracked on a ProjectV2 board, use `gh project item-list <num> --owner <owner> --format json` (the MCP can't do ProjectV2). Note any **tried-and-stuck** patterns โ closed issues with PRs that didn't land the design correctly need a different approach than untouched gaps.
|
|
55
|
+
|
|
56
|
+
## Phase 3: Design sanity check (does this design even make sense?)
|
|
57
|
+
|
|
58
|
+
**Before** spending cycles on fidelity, ask: is the design itself good? A faithful build of a bad design is still a bad product.
|
|
59
|
+
|
|
60
|
+
Use the **`design-critique`** skill as the engine if available. Pass it the target (surface source, screenshot, or mockup), the project's actors/personas, and the brand/voice brief. Get a second opinion from **leith** for brand fit. Loop in **nyx** if anything touches a security boundary (tenant isolation, trust frame, sandbox). Loop in **otto** if an AI/LLM interaction's cost or latency looks off.
|
|
61
|
+
|
|
62
|
+
Work through the ten sanity questions from [/design-critique](design-critique.md) for the surface, and record sanity findings separately from fidelity findings:
|
|
63
|
+
|
|
64
|
+
```markdown
|
|
65
|
+
### Sanity finding: <one-line summary>
|
|
66
|
+
|
|
67
|
+
- **Severity**: S0 fundamental (redesign before implementing) | S1 significant (rework recommended) | S2 minor (next iteration) | S3 nitpick
|
|
68
|
+
- **Lens**: one of the ten sanity questions
|
|
69
|
+
- **Observed**: <what the design does>
|
|
70
|
+
- **Concern**: <why this won't serve the actor / brand>
|
|
71
|
+
- **Evidence**: <persona, lexicon/voice rule, heuristic, prior failure>
|
|
72
|
+
- **Recommended change**: <specific design adjustment, not just "fix it">
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**Stop-flag** โ if you find any **S0**, surface it loudly. A fidelity audit on top of a fundamentally flawed design is wasted effort.
|
|
76
|
+
|
|
77
|
+
## Phase 4: Audit (fine-fine-fine)
|
|
78
|
+
|
|
79
|
+
For each surface, work through every dimension. Use the **leith** subagent for UX/brand judgment calls โ pass her the live source paths and the reference.
|
|
80
|
+
|
|
81
|
+
**Dimensions** (don't skip any):
|
|
82
|
+
|
|
83
|
+
| Dimension | What to check |
|
|
84
|
+
| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
85
|
+
| **Layout & IA** | Grid, section order, surface chrome, nav entry, breadcrumbs. |
|
|
86
|
+
| **Components** | Does the surface use the **design-system component**, or hand-roll markup the system already provides? Right variant? Right default state? Compare against the reference (gallery / mockup / component source). |
|
|
87
|
+
| **Copy** | Headings, labels, microcopy, button text, empty-state, error-state, tooltips. Must follow the lexicon and the project's voice. Often the most-divergent dimension. |
|
|
88
|
+
| **Design tokens** | Colors/type/spacing/radii/elevation must be the project's tokens โ **no magic hex / magic px** in surface code. |
|
|
89
|
+
| **States** | Empty, loading, error, dense, plus any product lifecycle states. Find the states the live surface is missing. |
|
|
90
|
+
| **Interactions** | Hover/active/focus. Transitions honor the motion tokens and `prefers-reduced-motion`. Click affordances, disabled states, form validation. |
|
|
91
|
+
| **Responsive** | Layout holds at desktop / tablet / mobile. No horizontal scroll. |
|
|
92
|
+
| **Accessibility** | Contrast meets WCAG AA. Visible focus ring. ARIA on icon-only buttons. Logical heading order. Keyboard nav. (Lean on the project's a11y/contrast checks if it ships any.) |
|
|
93
|
+
|
|
94
|
+
For each gap found, record:
|
|
95
|
+
|
|
96
|
+
```markdown
|
|
97
|
+
### Gap: <one-line summary>
|
|
98
|
+
|
|
99
|
+
- **Severity**: P0 broken | P1 visual drift | P2 polish | P3 nice-to-have
|
|
100
|
+
- **Type**: missing | wrong-state | wrong-tokens | wrong-copy | wrong-component | wrong-interaction | wrong-layout | a11y
|
|
101
|
+
- **Reference**: <gallery demo / mockup / component / token file>
|
|
102
|
+
- **Implementation**: `<surface file>:<line>` (or screenshot region if the input was an image)
|
|
103
|
+
- **Observed**: <what's actually there>
|
|
104
|
+
- **Expected**: <what the system / reference prescribes>
|
|
105
|
+
- **Proposed fix**: <concrete change>
|
|
106
|
+
- **Effort**: S | M | L
|
|
107
|
+
- **Prior attempt**: <link to issue/PR if one already tried this>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
**Optional live verification** โ if the app's dev server is running and a browser-control MCP (e.g. `chrome-devtools`) is available, capture the actual rendered DOM/computed CSS and diff against the reference for any gap where the static read is ambiguous (e.g. "is that the token or a magic hex?"). Otherwise rely on source analysis.
|
|
111
|
+
|
|
112
|
+
> For a **fast compare-and-fix loop** against the running app โ where edits land immediately rather than into a spec โ use [/design-audit-local](design-audit-local.md). This command (`/design-audit`) is the thorough, spec-producing audit; they share the P0โP3 / S0โS3 vocabulary so findings move between them.
|
|
113
|
+
|
|
114
|
+
## Phase 5: Write the spec
|
|
115
|
+
|
|
116
|
+
Output path: `docs/specs/fidelity-<surface>-<YYYY-MM-DD>.md` (`mkdir -p docs/specs` first).
|
|
117
|
+
|
|
118
|
+
Skeleton:
|
|
119
|
+
|
|
120
|
+
```markdown
|
|
121
|
+
# <Surface> Fidelity Audit โ <date>
|
|
122
|
+
|
|
123
|
+
Status: Draft
|
|
124
|
+
Owner: <operator>
|
|
125
|
+
Generated by: /design-audit
|
|
126
|
+
|
|
127
|
+
## Goal
|
|
128
|
+
|
|
129
|
+
Bring `<surface>` to fidelity with the design reference. **If the design sanity check below surfaced S0/S1 concerns, address those before fidelity work.**
|
|
130
|
+
|
|
131
|
+
## Scope
|
|
132
|
+
|
|
133
|
+
- Surface(s) audited: <list>
|
|
134
|
+
- Implementation files in scope: <list>
|
|
135
|
+
- Reference: <design-system components + gallery, or mockup pipeline>
|
|
136
|
+
- Prior attempts: <merged PRs, open issues>
|
|
137
|
+
|
|
138
|
+
## Design sanity (does this design make sense?)
|
|
139
|
+
|
|
140
|
+
### S0 โ Fundamental (redesign before implementing)
|
|
141
|
+
|
|
142
|
+
<entries โ or "None">
|
|
143
|
+
|
|
144
|
+
### S1 โ Significant (rework recommended in parallel with fidelity fixes)
|
|
145
|
+
|
|
146
|
+
<entries>
|
|
147
|
+
|
|
148
|
+
### S2 โ Minor (note for next iteration)
|
|
149
|
+
|
|
150
|
+
<entries>
|
|
151
|
+
|
|
152
|
+
### S3 โ Nitpick
|
|
153
|
+
|
|
154
|
+
<entries>
|
|
155
|
+
|
|
156
|
+
**Verdict**: <one of>
|
|
157
|
+
|
|
158
|
+
- โ
Design is sound โ proceed straight to fidelity remediation.
|
|
159
|
+
- โ ๏ธ Design needs rework on N items โ recommend a redesign pass before / alongside fidelity work.
|
|
160
|
+
- ๐ Design is fundamentally broken โ stop fidelity work; redesign first.
|
|
161
|
+
|
|
162
|
+
## Fidelity findings
|
|
163
|
+
|
|
164
|
+
### P0 โ Broken
|
|
165
|
+
|
|
166
|
+
<gap entries>
|
|
167
|
+
|
|
168
|
+
### P1 โ Visual drift
|
|
169
|
+
|
|
170
|
+
<gap entries>
|
|
171
|
+
|
|
172
|
+
### P2 โ Polish
|
|
173
|
+
|
|
174
|
+
<gap entries>
|
|
175
|
+
|
|
176
|
+
### P3 โ Nice-to-have
|
|
177
|
+
|
|
178
|
+
<gap entries>
|
|
179
|
+
|
|
180
|
+
## Phased remediation plan
|
|
181
|
+
|
|
182
|
+
### Phase 1: P0 fixes (one PR)
|
|
183
|
+
|
|
184
|
+
- <issue stubs>
|
|
185
|
+
|
|
186
|
+
### Phase 2: P1 visual drift (one PR)
|
|
187
|
+
|
|
188
|
+
- <issue stubs>
|
|
189
|
+
|
|
190
|
+
### Phase 3: P2 polish (one or more PRs)
|
|
191
|
+
|
|
192
|
+
- <issue stubs>
|
|
193
|
+
|
|
194
|
+
P3s deferred unless explicitly pulled in.
|
|
195
|
+
|
|
196
|
+
## Tried-and-stuck patterns
|
|
197
|
+
|
|
198
|
+
<attempts that didn't land the design correctly + a recommended different approach>
|
|
199
|
+
|
|
200
|
+
## Acceptance criteria (per phase)
|
|
201
|
+
|
|
202
|
+
<testable criteria for "done" โ Marcelo should verify these are testable before handoff>
|
|
203
|
+
|
|
204
|
+
## Open questions
|
|
205
|
+
|
|
206
|
+
<anything the operator needs to decide before implementation>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
## Phase 6: Testability pass
|
|
210
|
+
|
|
211
|
+
Hand the draft to the **marcelo** subagent for a testability review. Every acceptance criterion must be specific and testable ("the sign-in CTA renders the primary `Button` with text `Sign in`" โ not "button works"). Update the spec with Marcelo's revisions.
|
|
212
|
+
|
|
213
|
+
## Phase 7: Report
|
|
214
|
+
|
|
215
|
+
Final response to operator:
|
|
216
|
+
|
|
217
|
+
- Spec path.
|
|
218
|
+
- **Design sanity verdict** โ sound / rework / broken. Counts: S0 / S1 / S2 / S3.
|
|
219
|
+
- **Fidelity counts**: P0 / P1 / P2 / P3.
|
|
220
|
+
- Top 3 most-impactful fixes (mix of sanity + fidelity, prioritized by actor impact).
|
|
221
|
+
- Anything from prior attempts that needs a different approach this time.
|
|
222
|
+
- **If any S0 sanity findings**, lead with them โ "โ ๏ธ This design needs rework on X before fidelity work is worthwhile."
|
|
223
|
+
- Explicit request: "review the spec; when ready, run `/generate-project @<spec-path>` to convert it to a tracker project with phased issues."
|
|
224
|
+
|
|
225
|
+
## Operating rules
|
|
226
|
+
|
|
227
|
+
- **Sanity before fidelity.** Run Phase 3 first. If you find an S0, surface it immediately and shortcut the fine-fine-fine fidelity audit โ a perfect build of a broken design is still broken. Operator decides whether to redesign or proceed.
|
|
228
|
+
- **No surface-level scans.** Open every relevant file. Read every design-system component the surface uses. The whole point of this command is the fine eye.
|
|
229
|
+
- **Use the system, don't reinvent it.** Hand-rolled markup that duplicates a design-system component is a finding even if it looks identical โ the system is the contract.
|
|
230
|
+
- **Token compliance is not optional.** Any color/spacing/type/radius/shadow not from the project's tokens is a P1, even if visually close.
|
|
231
|
+
- **Don't auto-create issues yet.** The user reviews the spec first. Issue creation happens via `/generate-project` on the operator's command.
|
|
232
|
+
- **Cite, don't summarize.** Findings reference the reference side and `<surface file>:<line>` so the reviewer can verify each gap in 30 seconds.
|
|
233
|
+
- **States count.** A design that breaks down on empty/error/lifecycle states is a finding โ those states are the product, not error cases.
|
|
234
|
+
|
|
235
|
+
See `CLAUDE.md` ยง Filing issues for how the eventual issues should be shaped.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Sanity-check a proposal, mockup, screenshot, or live screen for design quality (does this make sense? will users bounce off it? are we designing this well?)
|
|
3
|
+
argument-hint: <proposal name, route path, file path, screenshot path, URL, or freeform description>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Stand-alone design critique. Use this to evaluate a design **before** committing to implementation, or to review a live screen for design quality. It is artifact-agnostic: the target can be a mockup, a proposal, a screenshot, a freeform description, or a live surface.
|
|
7
|
+
|
|
8
|
+
Target: $ARGUMENTS
|
|
9
|
+
|
|
10
|
+
For a full reference-vs-live comparison (sanity + fidelity), use [/design-audit](design-audit.md) instead. For a fast live fix loop, use [/design-audit-local](design-audit-local.md).
|
|
11
|
+
|
|
12
|
+
## What "the reference" is
|
|
13
|
+
|
|
14
|
+
The project's **design reference** is whatever the project uses as its source of truth โ pick whichever exists:
|
|
15
|
+
|
|
16
|
+
- A **design-proposal pipeline** (mockup HTML / Figma exports / image comps), or
|
|
17
|
+
- A **design system as code** (tokens + components) plus a rendered component gallery/showcase, or
|
|
18
|
+
- A documented **brand / voice / lexicon** and persona docs.
|
|
19
|
+
|
|
20
|
+
`CLAUDE.md` (or the project's design docs) declares where these live. A critique asks two things: is the *design idea* sound, and does it *belong to this product's system and voice*?
|
|
21
|
+
|
|
22
|
+
## Anchors (resolve to the project's actual paths)
|
|
23
|
+
|
|
24
|
+
| What | Where (project-defined) |
|
|
25
|
+
| ----------------------- | --------------------------------------------------------------- |
|
|
26
|
+
| Design tokens (truth) | the project's token source (colors, type, spacing, elevation, motion) |
|
|
27
|
+
| Components | the project's component library |
|
|
28
|
+
| Component showcase/gallery | the rendered reference, if one exists |
|
|
29
|
+
| Mockups / proposals | the proposal pipeline, if one exists |
|
|
30
|
+
| Brand / voice / lexicon | the project's design/brand brief |
|
|
31
|
+
| Personas + flows | the project's persona/flow docs |
|
|
32
|
+
| Brand context (agent) | `.claude/agents/leith.md` |
|
|
33
|
+
|
|
34
|
+
## Engine
|
|
35
|
+
|
|
36
|
+
Use the **`design-critique`** skill as the engine if available. Get a second opinion from the **leith** subagent for brand fit (she holds the voice and value prop). Loop in **nyx** if anything raises tenant-isolation, sandbox-escape, or PII concerns. Loop in **otto** if there's an AI/LLM interaction whose cost or latency model looks off.
|
|
37
|
+
|
|
38
|
+
## The ten questions (work through every one)
|
|
39
|
+
|
|
40
|
+
| # | Question | Lens |
|
|
41
|
+
| --- | ----------------------------------------------------------------------------------------- | -------------------- |
|
|
42
|
+
| 1 | Does this serve the actor's actual job-to-be-done? | Product strategy |
|
|
43
|
+
| 2 | Is the IA / mental model right for that actor? | UX architecture |
|
|
44
|
+
| 3 | Is the most important thing the most prominent? | Visual hierarchy |
|
|
45
|
+
| 4 | How many clicks / decisions / words to get value? | Cognitive load |
|
|
46
|
+
| 5 | What does this look like across every realistic state โ empty, partial, loading, error, dense, and any lifecycle states? States are the product, not error cases. | Realistic states |
|
|
47
|
+
| 6 | Does it feel like *this product*, or generic SaaS chrome? | Brand alignment |
|
|
48
|
+
| 7 | Are we asking for / showing data we shouldn't? Cross-tenant / PII leak risk? | Privacy/security |
|
|
49
|
+
| 8 | Where does this actor typically get stuck on this kind of screen? | Actor empathy |
|
|
50
|
+
| 9 | Better, worse, or same vs the closest competitor for this job? | Competitive position |
|
|
51
|
+
| 10 | If a new user landed here cold, value understood in < 30s? | Onboarding fitness |
|
|
52
|
+
|
|
53
|
+
## Severity scale
|
|
54
|
+
|
|
55
|
+
- **S0 fundamental** โ design needs rework before any implementation; would actively harm the product.
|
|
56
|
+
- **S1 significant** โ design rework recommended; will frustrate an actor or undercut the value prop.
|
|
57
|
+
- **S2 minor** โ note for next iteration; works but suboptimal.
|
|
58
|
+
- **S3 nitpick** โ taste-level; surface but don't block on.
|
|
59
|
+
|
|
60
|
+
## Finding format
|
|
61
|
+
|
|
62
|
+
```markdown
|
|
63
|
+
### <one-line summary>
|
|
64
|
+
|
|
65
|
+
- **Severity**: S0 | S1 | S2 | S3
|
|
66
|
+
- **Lens**: which of the ten questions
|
|
67
|
+
- **Observed**: <what the design does>
|
|
68
|
+
- **Concern**: <why this won't serve the actor / brand / user>
|
|
69
|
+
- **Evidence**: <persona, competitor, lexicon/voice rule, heuristic, prior failure>
|
|
70
|
+
- **Recommended change**: <specific design adjustment โ not just "fix it">
|
|
71
|
+
- **Effort to redesign**: S | M | L
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Output
|
|
75
|
+
|
|
76
|
+
Two modes depending on scope:
|
|
77
|
+
|
|
78
|
+
- **Quick critique** (default for small scope โ one screen, no implementation file given): respond inline with a findings table + verdict. No file written. Operator reads, decides.
|
|
79
|
+
- **Formal critique** (target is a full surface/proposal or operator asks for a deliverable): write `docs/critiques/<target-slug>-<YYYY-MM-DD>.md` (`mkdir -p docs/critiques` first) with findings, verdict, and a recommended next step.
|
|
80
|
+
|
|
81
|
+
Final verdict, regardless of mode:
|
|
82
|
+
|
|
83
|
+
- โ
**Design is sound.** Proceed to implementation (or fidelity audit via `/design-audit` if implementation already exists).
|
|
84
|
+
- โ ๏ธ **Design needs rework on N items.** List the S0/S1s. Recommend a redesign pass before implementation.
|
|
85
|
+
- ๐ **Design is fundamentally broken.** Don't implement. Redesign first.
|
|
86
|
+
|
|
87
|
+
## Operating rules
|
|
88
|
+
|
|
89
|
+
- **Be specific.** "This is confusing" is not a finding. "The action panel has three CTAs at equal weight โ the user can't tell which to click first" is.
|
|
90
|
+
- **Cite evidence.** Reference the actor, a lexicon/voice rule, a token/component the system already provides, a competitor's pattern, or a usability heuristic. Don't critique on taste alone.
|
|
91
|
+
- **Distinguish design from implementation.** This command critiques the design itself. If the user asks "is the live page good?", separate "the design is bad" from "the implementation drifted from the system" โ that second one is a `/design-audit` conversation.
|
|
92
|
+
- **Don't pull punches on brand.** Generic SaaS chrome that doesn't feel like the product is an S1, not an S3. The brand is part of the product.
|
|
93
|
+
- **Empty / loading / error / lifecycle states count.** A design that's only good when everything is mid-flight is an S1.
|
|
94
|
+
- **Speculate honestly about actor reaction**, and label it as speculation. "Best guess: the user will hesitate here because nothing signals X" โ say it, mark it a guess, not a fact.
|
|
95
|
+
|
|
96
|
+
When in doubt about S1 vs S2, err toward S1. Bad design is hard to recover from later.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: File a tracker issue using Bert's workflow (investigate, write body to tmp/, create via the issue-tracker skill)
|
|
3
|
+
argument-hint: <brief description of the issue>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Use the **bert** subagent to investigate and file an issue. Full reference: [.claude/workflows/issue-tracking.md](.claude/workflows/issue-tracking.md).
|
|
7
|
+
|
|
8
|
+
Relies on the project's installed **issue-tracker skill** (`.claude/skills/issue-tracker-*/`) for the issue write; its named operations work the same whether the tracker is GitHub or Linear.
|
|
9
|
+
|
|
10
|
+
Issue context: $ARGUMENTS
|
|
11
|
+
|
|
12
|
+
Bert should:
|
|
13
|
+
|
|
14
|
+
1. **Investigate** the codebase for the real root cause โ no surface-level fixes, no band-aids.
|
|
15
|
+
2. **Write the body** to `tmp/issue-body-<slug>.md` using the Write tool. No heredocs / cat pipes.
|
|
16
|
+
3. **Classify the issue** by type and lead the title with the matching emoji: ๐ bug ยท โจ feature ยท ๐ enhancement ยท ๐ content ยท ๐๏ธ infrastructure. Body should cover problem/RCA, evidence with `file:line`, fix direction, and acceptance criteria.
|
|
17
|
+
4. **Create the issue** via the project's issue-tracker skill's `create-issue` operation (`.claude/skills/issue-tracker-*/`), passing the `tmp/issue-body-<slug>.md` body file, the title, and the `<type>[,<area>]` label(s). On GitHub the skill runs `gh issue create --body-file โฆ`.
|
|
18
|
+
5. **Report back**: number/ID, URL, short RCA + fix summary, labels.
|
|
19
|
+
|
|
20
|
+
Conventions: `CLAUDE.md` ยง Filing issues.
|
|
21
|
+
|
|
22
|
+
If unsure whether to file or fix: ask. Typos and one-liners just fix.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Generate a feature spec, plan, and tracker project from a goal (multi-agent design loop through Leith, Melvin, Nyx, Marcelo, Jody)
|
|
3
|
+
argument-hint: <goal description, plus any attachment paths or links>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Follow the 8-phase workflow in [.claude/workflows/generate-project.md](.claude/workflows/generate-project.md).
|
|
7
|
+
|
|
8
|
+
Tracker project + issue writes go through the project's installed **issue-tracker skill** (`.claude/skills/issue-tracker-*/`) and its named operations (`create-issue`, `create-board`, `add-to-board`, `set-board-field`, `query-board`) โ the same flow works whether the tracker is GitHub or Linear. On GitHub the skill carries the `gh project` / `gh api graphql` specifics.
|
|
9
|
+
|
|
10
|
+
Goal: $ARGUMENTS
|
|
11
|
+
|
|
12
|
+
## Quick orientation
|
|
13
|
+
|
|
14
|
+
You (the main session) are the orchestrator. Subagents enrich the spec; you reconcile and own the merge.
|
|
15
|
+
|
|
16
|
+
**Subagents** (`.claude/agents/`):
|
|
17
|
+
|
|
18
|
+
- **leith** โ product/UX, user stories, acceptance criteria from a user perspective
|
|
19
|
+
- **melvin** โ architecture, service impact, data/consistency, scale/latency/cost
|
|
20
|
+
- **nyx** โ security/privacy, threat model, tenant isolation, abuse cases
|
|
21
|
+
- **marcelo** โ testing strategy, input validation matrix, quality gates
|
|
22
|
+
- **jody** โ phased plan, tracker project + issues, dependencies, owner/labels
|
|
23
|
+
|
|
24
|
+
**Phase sequence** (per the workflow doc):
|
|
25
|
+
|
|
26
|
+
1. **Intake** โ capture goal, attachments, constraints.
|
|
27
|
+
2. **Explore** โ `docs/agent-lessons/` (project-local lessons), `docs/architecture/`, `CLAUDE.md`, existing specs, related code, existing issues/projects.
|
|
28
|
+
3. **Clarifying questions** โ one batched set, 5โ8 max, each unlocks a decision.
|
|
29
|
+
4. **Draft spec** โ `docs/specs/<feature-slug>.md` with the section skeleton from the workflow doc.
|
|
30
|
+
5. **Design loop** โ Leith and Melvin in parallel, then Nyx, reconcile findings, then Marcelo, then Jody.
|
|
31
|
+
6. **Tracker project mechanics** โ use the issue-tracker skill's `create-board` / `add-to-board` / `set-board-field` operations to stand up the board and set Phase/Priority/Owner (on GitHub these run `gh project` / `gh api graphql` for ProjectV2; the `github` MCP doesn't do projects). Issue bodies in `tmp/issue-body-<slug>.md` via `create-issue` โ never heredoc.
|
|
32
|
+
7. **Sanity check** โ fresh subagent (e.g. `Plan` or `general-purpose`) reviews spec/project/issues with no design-loop context.
|
|
33
|
+
8. **Reflect** โ durable lessons โ `docs/agent-lessons/` (and PR generalizable ones back to the engsys `lessons-library/`); agent role changes โ `.claude/agents/*.md`; automatic behaviors โ `CLAUDE.md` or `.claude/commands/*.md`.
|
|
34
|
+
|
|
35
|
+
## Key invariants
|
|
36
|
+
|
|
37
|
+
- Don't ask generic questions before exploring the repo.
|
|
38
|
+
- Don't proceed past Nyx until security-required product/architecture changes are reconciled.
|
|
39
|
+
- One project phase = one implementation PR. Each issue = one commit. This shape must hold in Jody's plan so [/implement-issue](implement-issue.md) and [/implement-project](implement-project.md) work cleanly downstream.
|
|
40
|
+
- Boards and custom fields go through the issue-tracker skill's `create-board` / `set-board-field` operations. On GitHub those **must** use `gh project` / `gh api graphql` (the `github` MCP server doesn't support ProjectV2); the skill handles that.
|
|
41
|
+
- Every project carries a `Phase` single-select field with `P<n>: <name>` options โ without it `/implement-project` can't batch. No item may be left with an empty Phase.
|
|
42
|
+
- Issue bodies in `tmp/issue-body-<slug>.md`, created via the skill's `create-issue` operation (GitHub: `gh issue create --body-file โฆ`). Never HEREDOC.
|
|
43
|
+
- Final report: spec path, project URL, issues by phase, subagent contributions, sanity-check result, learning updates, open questions, explicit request for operator review before implementation starts.
|
|
44
|
+
|
|
45
|
+
See `CLAUDE.md` for the project's tool-preference order and filing-issue conventions, and the installed issue-tracker skill (`.claude/skills/issue-tracker-*/`) for the concrete board/issue mechanics on the active tracker.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Implement a tracker issue in an isolated worktree, run the full PR cycle (commit, local code review, push, PR)
|
|
3
|
+
argument-hint: <issue-number>
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Use the **isabelle** subagent, following the per-issue cycle in [.claude/workflows/agent-implementation-workflow.md](.claude/workflows/agent-implementation-workflow.md).
|
|
7
|
+
|
|
8
|
+
Issue/work-item reads and writes (claim, findings) go through the project's installed **issue-tracker skill** (`.claude/skills/issue-tracker-*/`) and its named operations โ the same flow works whether the tracker is GitHub or Linear. PR creation and CI stay on `gh` / GitHub.
|
|
9
|
+
|
|
10
|
+
Issue: #$ARGUMENTS
|
|
11
|
+
|
|
12
|
+
**Before invoking Isabelle**, read the issue (skill `get-issue`) and evaluate against the project's model-escalation criteria in `CLAUDE.md`. Isabelle defaults to **Sonnet**; pass `model: "opus"` on the Agent call if those criteria are met.
|
|
13
|
+
|
|
14
|
+
Isabelle should:
|
|
15
|
+
|
|
16
|
+
1. **Claim**: assign the issue to herself via the issue-tracker skill's `update-issue` operation (GitHub: `gh issue edit $ARGUMENTS --add-assignee @me`).
|
|
17
|
+
2. **Worktree + branch (with `-b` flag, critical)** โ create the worktree and branch in one command, from `origin/main`:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
git worktree add ../worktrees/issue-$ARGUMENTS-<slug> -b agent/$ARGUMENTS-<slug> origin/main
|
|
21
|
+
cd ../worktrees/issue-$ARGUMENTS-<slug>
|
|
22
|
+
# bring over any local env the build needs (project-specific); fall back to the template
|
|
23
|
+
cp ../../.env .env 2>/dev/null || cp .env.example .env 2>/dev/null || true
|
|
24
|
+
# install deps + any codegen the project requires (see CLAUDE.md)
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Run every build/lint/test command **inside this worktree dir** (not the main checkout).
|
|
28
|
+
|
|
29
|
+
3. **Implement** โ read the issue and existing code first; match patterns; one implementation commit referencing `(#$ARGUMENTS)`.
|
|
30
|
+
4. **Pre-push gate** (no exceptions): run the project's pre-push gate / precheck (build, lint, format, test, plus any path-gated checks for migrations / IaC / containers the project defines). See [/pre-push](pre-push.md).
|
|
31
|
+
5. **Local code review** (before push): run a local code review with the built-in `/code-review` skill against `origin/main`. Fix Critical + Warning findings, re-run once to confirm clean, cap at ~2 passes. Go in clean.
|
|
32
|
+
6. **Push + PR**: branch first, then `gh pr create --draft --base main --body-file tmp/pr-body-$ARGUMENTS.md` (PR creation stays on `gh`). Link/close the work item per the issue-tracker skill's `link-pr` operation โ on GitHub the PR body uses **one Closes per line**, `Closes #$ARGUMENTS` (a comma-list only closes the first); other trackers per the skill. Then persist the local review findings onto the work item via the skill's `comment-issue` operation (each finding + resolution) โ the durable record the closeout ceremony mines.
|
|
33
|
+
7. **Cleanup after merge**: empty the worktree dir, `git worktree remove`, delete the local branch, `git worktree prune`.
|
|
34
|
+
|
|
35
|
+
Conventions: `CLAUDE.md` ยง Git / PR conventions and ยง Code review.
|
|
36
|
+
|
|
37
|
+
Reflection: if work exposed a reusable failure, update `docs/agent-lessons/` (and PR generalizable lessons back to the engsys `lessons-library/`) before handoff.
|