claude-code-pilot 3.1.1 → 3.3.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/CHANGELOG.md +57 -0
- package/README.md +16 -11
- package/bin/install.js +127 -11
- package/manifest.json +20 -1
- package/package.json +4 -3
- package/src/agents/a11y-architect.md +141 -0
- package/src/agents/code-architect.md +71 -0
- package/src/agents/code-explorer.md +69 -0
- package/src/agents/code-simplifier.md +47 -0
- package/src/agents/comment-analyzer.md +45 -0
- package/src/agents/csharp-reviewer.md +101 -0
- package/src/agents/dart-build-resolver.md +201 -0
- package/src/agents/django-build-resolver.md +252 -0
- package/src/agents/django-reviewer.md +169 -0
- package/src/agents/fastapi-reviewer.md +79 -0
- package/src/agents/fsharp-reviewer.md +109 -0
- package/src/agents/pr-test-analyzer.md +45 -0
- package/src/agents/silent-failure-hunter.md +50 -0
- package/src/agents/swift-build-resolver.md +170 -0
- package/src/agents/swift-reviewer.md +116 -0
- package/src/agents/type-design-analyzer.md +41 -0
- package/src/available-rules/README.md +3 -1
- package/src/available-rules/dart/coding-style.md +159 -0
- package/src/available-rules/dart/hooks.md +66 -0
- package/src/available-rules/dart/patterns.md +261 -0
- package/src/available-rules/dart/security.md +135 -0
- package/src/available-rules/dart/testing.md +215 -0
- package/src/available-rules/web/coding-style.md +105 -0
- package/src/available-rules/web/design-quality.md +72 -0
- package/src/available-rules/web/hooks.md +129 -0
- package/src/available-rules/web/patterns.md +88 -0
- package/src/available-rules/web/performance.md +73 -0
- package/src/available-rules/web/security.md +66 -0
- package/src/available-rules/web/testing.md +64 -0
- package/src/commands/ccp/ai-integration-phase.md +36 -0
- package/src/commands/ccp/audit-fix.md +33 -0
- package/src/commands/ccp/code-review-fix.md +52 -0
- package/src/commands/ccp/cost-report.md +107 -0
- package/src/commands/ccp/eval-review.md +32 -0
- package/src/commands/ccp/extract_learnings.md +22 -0
- package/src/commands/ccp/import.md +37 -0
- package/src/commands/ccp/ingest-docs.md +42 -0
- package/src/commands/ccp/intel.md +179 -0
- package/src/commands/ccp/mvp-phase.md +45 -0
- package/src/commands/ccp/plan-prd.md +160 -0
- package/src/commands/ccp/plan-review-convergence.md +58 -0
- package/src/commands/ccp/pr-ecc.md +184 -0
- package/src/commands/ccp/scan.md +26 -0
- package/src/commands/ccp/security-scan.md +74 -0
- package/src/commands/ccp/sketch-wrap-up.md +31 -0
- package/src/commands/ccp/sketch.md +54 -0
- package/src/commands/ccp/spec-phase.md +62 -0
- package/src/commands/ccp/spike-wrap-up.md +31 -0
- package/src/commands/ccp/spike.md +51 -0
- package/src/commands/ccp/ultraplan-phase.md +33 -0
- package/src/hooks/ccp-bash-hook-dispatcher.js +96 -0
- package/src/hooks/ccp-context-monitor.js +23 -0
- package/src/hooks/ccp-doc-file-warning.js +93 -0
- package/src/hooks/ccp-pre-bash-dispatcher.js +24 -0
- package/src/hooks/ccp-read-injection-scanner.js +152 -0
- package/src/hooks/ccp-write-gateguard.js +868 -0
- package/src/hooks/kit-check-update.js +59 -7
- package/src/hooks/run-with-flags-shell.sh +1 -0
- package/src/hooks/run-with-flags.js +48 -1
- package/src/hooks/session-end.js +88 -1
- package/src/lib/hook-flags.js +14 -0
- package/src/lib/project-detect.js +0 -2
- package/src/lib/shell-substitution.js +499 -0
- package/src/pilot/references/agent-contracts.md +79 -0
- package/src/pilot/references/ai-evals.md +156 -0
- package/src/pilot/references/ai-frameworks.md +186 -0
- package/src/pilot/references/doc-conflict-engine.md +91 -0
- package/src/pilot/references/execute-mvp-tdd.md +81 -0
- package/src/pilot/references/gate-prompts.md +100 -0
- package/src/pilot/references/gates.md +70 -0
- package/src/pilot/references/mandatory-initial-read.md +2 -0
- package/src/pilot/references/mvp-concepts.md +49 -0
- package/src/pilot/references/planner-graphify-auto-update.md +67 -0
- package/src/pilot/references/planner-human-verify-mode.md +57 -0
- package/src/pilot/references/planner-mvp-mode.md +53 -0
- package/src/pilot/references/project-skills-discovery.md +19 -0
- package/src/pilot/references/revision-loop.md +97 -0
- package/src/pilot/references/skeleton-template.md +48 -0
- package/src/pilot/references/sketch-interactivity.md +41 -0
- package/src/pilot/references/sketch-theme-system.md +94 -0
- package/src/pilot/references/sketch-tooling.md +45 -0
- package/src/pilot/references/sketch-variant-patterns.md +81 -0
- package/src/pilot/references/spidr-splitting.md +69 -0
- package/src/pilot/references/thinking-models-debug.md +44 -0
- package/src/pilot/references/thinking-models-execution.md +50 -0
- package/src/pilot/references/thinking-models-planning.md +62 -0
- package/src/pilot/references/thinking-models-research.md +50 -0
- package/src/pilot/references/thinking-models-verification.md +55 -0
- package/src/pilot/references/user-story-template.md +58 -0
- package/src/pilot/references/verify-mvp-mode.md +85 -0
- package/src/pilot/references/worktree-path-safety.md +89 -0
- package/src/pilot/templates/AI-SPEC.md +246 -0
- package/src/pilot/templates/spec.md +307 -0
- package/src/pilot/workflows/ai-integration-phase.md +284 -0
- package/src/pilot/workflows/audit-fix.md +175 -0
- package/src/pilot/workflows/code-review-fix.md +497 -0
- package/src/pilot/workflows/eval-review.md +155 -0
- package/src/pilot/workflows/extract_learnings.md +242 -0
- package/src/pilot/workflows/help.md +5 -0
- package/src/pilot/workflows/import.md +246 -0
- package/src/pilot/workflows/ingest-docs.md +328 -0
- package/src/pilot/workflows/mvp-phase.md +199 -0
- package/src/pilot/workflows/plan-review-convergence.md +329 -0
- package/src/pilot/workflows/scan.md +102 -0
- package/src/pilot/workflows/sketch-wrap-up.md +285 -0
- package/src/pilot/workflows/sketch.md +360 -0
- package/src/pilot/workflows/spec-phase.md +262 -0
- package/src/pilot/workflows/spike-wrap-up.md +306 -0
- package/src/pilot/workflows/spike.md +452 -0
- package/src/pilot/workflows/ultraplan-phase.md +189 -0
- package/src/skills/accessibility/SKILL.md +146 -0
- package/src/skills/agent-architecture-audit/SKILL.md +256 -0
- package/src/skills/agent-eval/SKILL.md +145 -0
- package/src/skills/agent-harness-design/SKILL.md +73 -0
- package/src/skills/agent-introspection-debugging/SKILL.md +153 -0
- package/src/skills/android-clean-architecture/SKILL.md +339 -0
- package/src/skills/angular-developer/SKILL.md +154 -0
- package/src/skills/angular-developer/references/angular-animations.md +160 -0
- package/src/skills/angular-developer/references/angular-aria.md +410 -0
- package/src/skills/angular-developer/references/cli.md +86 -0
- package/src/skills/angular-developer/references/component-harnesses.md +59 -0
- package/src/skills/angular-developer/references/component-styling.md +91 -0
- package/src/skills/angular-developer/references/components.md +117 -0
- package/src/skills/angular-developer/references/creating-services.md +97 -0
- package/src/skills/angular-developer/references/data-resolvers.md +69 -0
- package/src/skills/angular-developer/references/define-routes.md +67 -0
- package/src/skills/angular-developer/references/defining-providers.md +72 -0
- package/src/skills/angular-developer/references/di-fundamentals.md +120 -0
- package/src/skills/angular-developer/references/e2e-testing.md +56 -0
- package/src/skills/angular-developer/references/effects.md +83 -0
- package/src/skills/angular-developer/references/hierarchical-injectors.md +43 -0
- package/src/skills/angular-developer/references/host-elements.md +80 -0
- package/src/skills/angular-developer/references/injection-context.md +63 -0
- package/src/skills/angular-developer/references/inputs.md +101 -0
- package/src/skills/angular-developer/references/linked-signal.md +59 -0
- package/src/skills/angular-developer/references/loading-strategies.md +61 -0
- package/src/skills/angular-developer/references/mcp.md +108 -0
- package/src/skills/angular-developer/references/navigate-to-routes.md +69 -0
- package/src/skills/angular-developer/references/outputs.md +86 -0
- package/src/skills/angular-developer/references/reactive-forms.md +122 -0
- package/src/skills/angular-developer/references/rendering-strategies.md +44 -0
- package/src/skills/angular-developer/references/resource.md +77 -0
- package/src/skills/angular-developer/references/route-animations.md +56 -0
- package/src/skills/angular-developer/references/route-guards.md +52 -0
- package/src/skills/angular-developer/references/router-lifecycle.md +45 -0
- package/src/skills/angular-developer/references/router-testing.md +87 -0
- package/src/skills/angular-developer/references/show-routes-with-outlets.md +68 -0
- package/src/skills/angular-developer/references/signal-forms.md +795 -0
- package/src/skills/angular-developer/references/signals-overview.md +94 -0
- package/src/skills/angular-developer/references/tailwind-css.md +69 -0
- package/src/skills/angular-developer/references/template-driven-forms.md +114 -0
- package/src/skills/angular-developer/references/testing-fundamentals.md +65 -0
- package/src/skills/api-connector-builder/SKILL.md +120 -0
- package/src/skills/code-tour/SKILL.md +236 -0
- package/src/skills/compose-multiplatform-patterns/SKILL.md +299 -0
- package/src/skills/csharp-testing/SKILL.md +321 -0
- package/src/skills/dart-flutter-patterns/SKILL.md +563 -0
- package/src/skills/dashboard-builder/SKILL.md +108 -0
- package/src/skills/dotnet-patterns/SKILL.md +321 -0
- package/src/skills/error-handling/SKILL.md +376 -0
- package/src/skills/fastapi-patterns/SKILL.md +327 -0
- package/src/skills/flox-environments/SKILL.md +496 -0
- package/src/skills/frontend-design/SKILL.md +145 -0
- package/src/skills/frontend-slides/SKILL.md +184 -0
- package/src/skills/frontend-slides/STYLE_PRESETS.md +330 -0
- package/src/skills/fsharp-testing/SKILL.md +280 -0
- package/src/skills/gateguard/SKILL.md +121 -0
- package/src/skills/github-ops/SKILL.md +144 -0
- package/src/skills/hookify-rules/SKILL.md +128 -0
- package/src/skills/ios-icon-gen/SKILL.md +157 -0
- package/src/skills/ios-icon-gen/scripts/generate_icons.swift +258 -0
- package/src/skills/ios-icon-gen/scripts/iconify_gen.sh +235 -0
- package/src/skills/knowledge-ops/SKILL.md +154 -0
- package/src/skills/liquid-glass-design/SKILL.md +279 -0
- package/src/skills/make-interfaces-feel-better/SKILL.md +151 -0
- package/src/skills/mysql-patterns/SKILL.md +412 -0
- package/src/skills/nestjs-patterns/SKILL.md +230 -0
- package/src/skills/plan-orchestrate/SKILL.md +220 -0
- package/src/skills/prisma-patterns/SKILL.md +371 -0
- package/src/skills/production-audit/SKILL.md +206 -0
- package/src/skills/security-bounty-hunter/SKILL.md +99 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/candidate-playbook.md +49 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/report.json +35 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/scenario.json +62 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/trace.json +45 -0
- package/src/skills/security-scan/references/agentshield-policy-exception/verifier-result.json +35 -0
- package/src/skills/swift-actor-persistence/SKILL.md +143 -0
- package/src/skills/swift-protocol-di-testing/SKILL.md +190 -0
- package/src/skills/swiftui-patterns/SKILL.md +259 -0
- package/src/skills/terminal-ops/SKILL.md +109 -0
- package/src/skills/ui-demo/SKILL.md +465 -0
- package/src/skills/vite-patterns/SKILL.md +449 -0
- package/src/skills/windows-desktop-e2e/SKILL.md +887 -0
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Gates Taxonomy
|
|
2
|
+
|
|
3
|
+
Canonical gate types used across GSD workflows. Every validation checkpoint maps to one of these four types.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Gate Types
|
|
8
|
+
|
|
9
|
+
### Pre-flight Gate
|
|
10
|
+
**Purpose:** Validates preconditions before starting an operation.
|
|
11
|
+
**Behavior:** Blocks entry if conditions unmet. No partial work created.
|
|
12
|
+
**Recovery:** Fix the missing precondition, then retry.
|
|
13
|
+
**Examples:**
|
|
14
|
+
- Plan-phase checks for REQUIREMENTS.md before planning
|
|
15
|
+
- Execute-phase validates PLAN.md exists before execution
|
|
16
|
+
- Discuss-phase confirms phase exists in ROADMAP.md
|
|
17
|
+
|
|
18
|
+
### Revision Gate
|
|
19
|
+
**Purpose:** Evaluates output quality and routes to revision if insufficient.
|
|
20
|
+
**Behavior:** Loops back to producer with specific feedback. Bounded by iteration cap.
|
|
21
|
+
**Recovery:** Producer addresses feedback; checker re-evaluates. The loop also escalates early if issue count does not decrease between consecutive iterations (stall detection). After max iterations, escalates unconditionally.
|
|
22
|
+
**Examples:**
|
|
23
|
+
- Plan-checker reviewing PLAN.md (max 3 iterations)
|
|
24
|
+
- Verifier checking phase deliverables against success criteria
|
|
25
|
+
|
|
26
|
+
### Escalation Gate
|
|
27
|
+
**Purpose:** Surfaces unresolvable issues to the developer for a decision.
|
|
28
|
+
**Behavior:** Pauses workflow, presents options, waits for human input.
|
|
29
|
+
**Recovery:** Developer chooses action; workflow resumes on selected path.
|
|
30
|
+
**Examples:**
|
|
31
|
+
- Revision loop exhausted after 3 iterations
|
|
32
|
+
- Merge conflict during worktree cleanup
|
|
33
|
+
- Ambiguous requirement needing clarification
|
|
34
|
+
|
|
35
|
+
### Abort Gate
|
|
36
|
+
**Purpose:** Terminates the operation to prevent damage or waste.
|
|
37
|
+
**Behavior:** Stops immediately, preserves state, reports reason.
|
|
38
|
+
**Recovery:** Developer investigates root cause, fixes, restarts from checkpoint.
|
|
39
|
+
**Examples:**
|
|
40
|
+
- Context window critically low during execution
|
|
41
|
+
- STATE.md in error state blocking /ccp:next
|
|
42
|
+
- Verification finds critical missing deliverables
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Gate Matrix
|
|
47
|
+
|
|
48
|
+
| Workflow | Phase | Gate Type | Artifacts Checked | Failure Behavior |
|
|
49
|
+
|----------|-------|-----------|-------------------|------------------|
|
|
50
|
+
| plan-phase | Entry | Pre-flight | REQUIREMENTS.md, ROADMAP.md | Block with missing-file message |
|
|
51
|
+
| plan-phase | Step 12 | Revision | PLAN.md quality | Loop to planner (max 3) |
|
|
52
|
+
| plan-phase | Post-revision | Escalation | Unresolved issues | Surface to developer |
|
|
53
|
+
| execute-phase | Entry | Pre-flight | PLAN.md | Block with missing-plan message |
|
|
54
|
+
| execute-phase | Completion | Revision | SUMMARY.md completeness | Re-run incomplete tasks |
|
|
55
|
+
| verify-work | Entry | Pre-flight | SUMMARY.md | Block with missing-summary |
|
|
56
|
+
| verify-work | Evaluation | Escalation | Failed criteria | Surface gaps to developer |
|
|
57
|
+
| next | Entry | Abort | Error state, checkpoints | Stop with diagnostic |
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Implementing Gates
|
|
62
|
+
|
|
63
|
+
Use this taxonomy when designing or auditing workflow validation points:
|
|
64
|
+
|
|
65
|
+
- **Pre-flight** gates belong at workflow entry points. They are cheap, deterministic checks that prevent wasted work. If you can verify a precondition with a file-existence check or a config read, use a pre-flight gate.
|
|
66
|
+
- **Revision** gates belong after a producer step where quality varies. Always pair them with an iteration cap to prevent infinite loops. The cap should reflect the cost of each iteration -- expensive operations get fewer retries.
|
|
67
|
+
- **Escalation** gates belong wherever automated resolution is impossible or ambiguous. They are the safety valve between revision loops and abort. Present the developer with clear options and enough context to decide.
|
|
68
|
+
- **Abort** gates belong at points where continuing would cause damage, waste significant resources, or produce meaningless output. They should preserve state so work can resume after the root cause is fixed.
|
|
69
|
+
|
|
70
|
+
**Selection heuristic:** Start with pre-flight. If the check happens after work is produced, it is a revision gate. If the revision loop cannot resolve the issue, escalate. If continuing is dangerous, abort.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# MVP Concepts — index
|
|
2
|
+
|
|
3
|
+
Cross-reference for the six MVP-related reference files. Each file has a single, narrow purpose. This index exists so future readers (and agents resolving `@`-refs) can find the right file without grepping the directory.
|
|
4
|
+
|
|
5
|
+
Canonical domain terms for the concepts named below live in [CONTEXT.md](../../CONTEXT.md) under "Domain terms" — start there if you need a precise definition.
|
|
6
|
+
|
|
7
|
+
## File map
|
|
8
|
+
|
|
9
|
+
| File | Purpose | Loaded by |
|
|
10
|
+
|---|---|---|
|
|
11
|
+
| `references/planner-mvp-mode.md` | **Rules.** Vertical-slice planning rules, slice ordering, Walking Skeleton constraints. | `ccp-planner` agent when `MVP_MODE=true` |
|
|
12
|
+
| `references/skeleton-template.md` | **Template.** Shape of `SKELETON.md` for new-project Phase 1 under `--mvp`. | `ccp-planner` agent when the Walking Skeleton gate fires |
|
|
13
|
+
| `references/user-story-template.md` | **Template.** Format and slot definitions for `As a / I want to / So that`. | `ccp:mvp-phase` workflow during interactive prompting; `ccp-planner` when emitting the `## Phase Goal` header |
|
|
14
|
+
| `references/spidr-splitting.md` | **Splitting discipline.** Five-axis decomposition (Spike, Paths, Interfaces, Data, Rules) for stories too large for one phase. | `ccp:mvp-phase` workflow when the user story exceeds size threshold |
|
|
15
|
+
| `references/execute-mvp-tdd.md` | **Gate.** MVP+TDD runtime gate semantics: when it fires, what it checks, halt-and-report protocol, end-of-phase blocking escalation, Behavior-Adding Task definition. | `ccp-executor` agent when `MVP_MODE=true && TDD_MODE=true` |
|
|
16
|
+
| `references/verify-mvp-mode.md` | **UAT framing.** Three-section UAT structure (user-flow → technical → coverage), anti-patterns, `User Flow Coverage` section in VERIFICATION.md. | `ccp-verifier` agent when the phase under verification has `mode: mvp` |
|
|
17
|
+
|
|
18
|
+
## Concept-to-file map
|
|
19
|
+
|
|
20
|
+
If you're looking for the canonical statement of a concept, this is where to find it:
|
|
21
|
+
|
|
22
|
+
- **MVP Mode resolution chain** — `workflows/plan-phase.md` Step 1 (CLI flag → roadmap → config → false). Mirrored in `execute-phase.md` and `verify-work.md`.
|
|
23
|
+
- **`**Mode:** mvp` parser** — parsed by the planner workflow when MVP mode is active in ROADMAP.md. Workflows compare against the parser output, never re-parse.
|
|
24
|
+
- **User Story regex** — `/^As a .+, I want to .+, so that .+\.$/` — applied at runtime by `ccp-verifier` (the user-story-format guard) and `ccp:mvp-phase` (interactive validation).
|
|
25
|
+
- **Behavior-Adding Task predicate** — `references/execute-mvp-tdd.md` (the canonical three-check definition). Applied at runtime by `ccp-executor`.
|
|
26
|
+
- **Walking Skeleton gate condition** — `workflows/plan-phase.md` (Phase 1 + new project + `--mvp` + no prior summaries → emit `SKELETON.md`).
|
|
27
|
+
- **MVP+TDD Gate** (RED→GREEN enforcement) — `references/execute-mvp-tdd.md`.
|
|
28
|
+
- **MVP-mode UAT framing** (user-flow first, technical deferred) — `references/verify-mvp-mode.md`.
|
|
29
|
+
- **Per-phase mode authoring** — `workflows/mvp-phase.md` (writes `**Mode:** mvp` to ROADMAP.md after collecting the user story).
|
|
30
|
+
- **Project-wide mode prompt at init** — `workflows/new-project.md` (Vertical MVP vs Horizontal Layers question).
|
|
31
|
+
|
|
32
|
+
## Interactions worth knowing
|
|
33
|
+
|
|
34
|
+
- **`--mvp` and `--prd <file>` together on Phase 1.** Both paths converge at the planner spawn. The PRD express path creates `CONTEXT.md` from the PRD file and continues to the research step; the Walking Skeleton gate fires independently when Phase 1 + new project + `--mvp`. The planner therefore receives both `WALKING_SKELETON=true` and PRD-derived context. This is intentional: the PRD informs what the skeleton should prove.
|
|
35
|
+
- **`MVP_MODE` is all-or-nothing per phase, not per task.** A phase is either MVP-mode or standard. Mixed-mode phases are not supported (PRD #2826 Q1).
|
|
36
|
+
- **`TDD_MODE` is independent of `MVP_MODE`.** TDD can be on without MVP, MVP can be on without TDD. Only the *intersection* (both true) activates the MVP+TDD Gate.
|
|
37
|
+
- **The `ccp-roadmapper` agent makes the MVP/standard decision once at project init** based on `PROJECT_MODE`. Per-phase opt-in/out happens later via `/ccp:mvp-phase` or `/ccp:edit-phase`.
|
|
38
|
+
|
|
39
|
+
## Tests
|
|
40
|
+
|
|
41
|
+
Structural contract tests for each integration site live under `tests/`:
|
|
42
|
+
|
|
43
|
+
- `plan-phase-mvp-flag.test.cjs` — plan-phase MVP_MODE resolution chain
|
|
44
|
+
- `planner-mvp-mode.test.cjs` — ccp-planner agent MVP section
|
|
45
|
+
- `mvp-phase-command.test.cjs`, `mvp-phase-integration.test.cjs`, `mvp-phase-spidr.test.cjs` — `/ccp:mvp-phase`
|
|
46
|
+
- `execute-mvp-tdd-gate.test.cjs`, `executor-mvp-tdd-section.test.cjs` — MVP+TDD Gate
|
|
47
|
+
- `verifier-mvp-section.test.cjs`, `verify-mvp-uat.test.cjs` — verifier UAT framing
|
|
48
|
+
- `new-project-mvp-prompt.test.cjs` — mode prompt at init
|
|
49
|
+
- `progress-mvp-display.test.cjs`, `stats-mvp-display.test.cjs`, `graphify-mvp-viz.test.cjs` — discovery surfaces
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Graphify Auto-Update — Status Surfacing
|
|
2
|
+
|
|
3
|
+
> Documents how `ccp-planner` and `ccp-phase-researcher` surface the opt-in graphify auto-update state (issue #3347). The status surface lives inside `graphifyStatus()` in `pilot/bin/lib/graphify.cjs`; no planner-side prompt changes are required.
|
|
4
|
+
|
|
5
|
+
## Why this exists
|
|
6
|
+
|
|
7
|
+
The graph at `.planning/graphs/graph.json` is consumed automatically (every `ccp-planner` and `ccp-phase-researcher` step) but produced manually (`/ccp:graphify build` per session at best). Without auto-update, the producer-consumer gap silently widens with every commit. The existing `stale: true` annotation tells the consumer the mtime is old; it cannot tell the consumer whether the auto-build hook has been running, just failed, or is in flight.
|
|
8
|
+
|
|
9
|
+
When `graphify.auto_update: true`, the bundled `hooks/ccp-graphify-update.sh` PostToolUse hook fires after HEAD-advancing git operations on the default branch and dispatches `graphify update .` in a detached subprocess. The hook writes a status file synchronously before detach; the detached process rewrites it on completion.
|
|
10
|
+
|
|
11
|
+
## The status file
|
|
12
|
+
|
|
13
|
+
`.planning/graphs/.last-build-status.json`:
|
|
14
|
+
|
|
15
|
+
```json
|
|
16
|
+
{
|
|
17
|
+
"ts": "2026-05-15T14:02:23Z",
|
|
18
|
+
"status": "running" | "ok" | "failed",
|
|
19
|
+
"exit_code": null | <int>,
|
|
20
|
+
"duration_ms": null | <int>,
|
|
21
|
+
"head_at_build": "<commit-sha>",
|
|
22
|
+
"graphify_version": null | "<version>"
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The hook writes `status: "running"` synchronously **before** detach, so the next planner invocation can see the in-flight signal even if `graphify update .` has not finished. The detached `hooks/lib/ccp-graphify-rebuild.sh` rewrites the file to `ok` or `failed` on completion (with `exit_code` and `duration_ms`).
|
|
27
|
+
|
|
28
|
+
## How the planner surfaces it (zero new prompt content)
|
|
29
|
+
|
|
30
|
+
`graphifyStatus()` in `pilot/bin/lib/graphify.cjs` reads `.last-build-status.json` and folds the `running` / `failed` states into the existing `stale: true` signal:
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
const autoUpdateStale =
|
|
34
|
+
lastBuildAutoUpdate &&
|
|
35
|
+
(lastBuildAutoUpdate.status === 'failed' || lastBuildAutoUpdate.status === 'running');
|
|
36
|
+
|
|
37
|
+
return {
|
|
38
|
+
...
|
|
39
|
+
stale: age > STALE_MS || Boolean(autoUpdateStale),
|
|
40
|
+
...
|
|
41
|
+
last_build_auto_update: lastBuildAutoUpdate || null,
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The planner and researcher already run `node ... graphify status` inside their `<step name="load_graph_context">` blocks and already have the rule:
|
|
46
|
+
|
|
47
|
+
> If the status response has `stale: true`, note for later: "Graph is `{age_hours}h` old — treat semantic relationships as approximate."
|
|
48
|
+
|
|
49
|
+
That rule now fires correctly in three additional cases:
|
|
50
|
+
|
|
51
|
+
| Trigger | What user sees |
|
|
52
|
+
|---------|----------------|
|
|
53
|
+
| Auto-build status = `failed` | Existing "treat as approximate" note fires (because `stale: true`). The full `last_build_auto_update` object is in the JSON for callers that want exit-code / duration / commit-sha context. |
|
|
54
|
+
| Auto-build status = `running` | Same — the next planner invocation knows the graph is mid-rebuild and treats it as approximate until the detached process completes. |
|
|
55
|
+
| Auto-build status = `ok` AND mtime < 24h | Annotation is silent — the graph is fresh and the most recent auto-build succeeded. |
|
|
56
|
+
|
|
57
|
+
The file-missing case is silent (the operator either has not opted in or has not yet triggered a HEAD-advancing git op since enabling).
|
|
58
|
+
|
|
59
|
+
## Why this design
|
|
60
|
+
|
|
61
|
+
- **No planner-side prompt changes.** Folding into `stale: true` reuses the existing rule, which means no new content in `agents/ccp-planner.md` (which is already at the `< 48K` decomposition limit per `DEFECT.AGENT-FILE-SIZE-CAP-BREACH`).
|
|
62
|
+
- **Tests catch regressions on the seam.** `tests/feat-3347-graphify-auto-update-config.test.cjs` pins `graphifyStatus` behavior for status=`failed` / `running` / `ok` / file-missing.
|
|
63
|
+
- **Backwards compatible.** Callers that don't read `last_build_auto_update` see the same shape as before, with `stale` reflecting both mtime AND auto-build state. No consumer breakage.
|
|
64
|
+
|
|
65
|
+
## Opt-in reminder
|
|
66
|
+
|
|
67
|
+
The auto-update mechanism is opt-in (`graphify.auto_update: false` by default per issue #3347). Users who haven't opted in will never produce this file. `graphifyStatus()` returns `last_build_auto_update: null` and falls back to the mtime-only `stale` rule.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Planner — Human Verification Mode
|
|
2
|
+
|
|
3
|
+
> Loaded by `ccp-planner` when deciding whether to emit `<task type="checkpoint:human-verify">` tasks. Read `workflow.human_verify_mode` from `.planning/config.json` (default `end-of-phase` since #3309).
|
|
4
|
+
|
|
5
|
+
## The two modes
|
|
6
|
+
|
|
7
|
+
### `end-of-phase` (default — issue #3309)
|
|
8
|
+
|
|
9
|
+
Do **not** emit any `<task type="checkpoint:human-verify">` tasks. Every mid-flight halt costs a full executor cold-start (CLAUDE.md, MEMORY.md, STATE.md, plan re-read on respawn) because subagent context is discarded across the pause; a plan with N human-verify checkpoints pays the cold-start cost N+1 times — measured at "tens of thousands of tokens" per round-trip on real projects. This is the default for that reason.
|
|
10
|
+
|
|
11
|
+
Instead, fold each would-be verification step into the relevant `auto` task using a `<verify><human-check>` sub-block:
|
|
12
|
+
|
|
13
|
+
```xml
|
|
14
|
+
<task type="auto">
|
|
15
|
+
<name>Wire dashboard route</name>
|
|
16
|
+
<files>app/dashboard/page.tsx, app/api/dashboard/route.ts</files>
|
|
17
|
+
<action>...</action>
|
|
18
|
+
<verify>
|
|
19
|
+
<automated>npm test -- --filter=dashboard</automated>
|
|
20
|
+
<human-check>
|
|
21
|
+
<test>Visit http://localhost:3000/dashboard</test>
|
|
22
|
+
<expected>Sidebar left, content right on desktop >1024px; collapses to hamburger at 768px</expected>
|
|
23
|
+
<why_human>Visual layout — grep cannot verify breakpoint behavior</why_human>
|
|
24
|
+
</human-check>
|
|
25
|
+
</verify>
|
|
26
|
+
<done>Layout renders correctly across breakpoints</done>
|
|
27
|
+
</task>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The verifier (Step 8) harvests every `<verify><human-check>` block at end-of-phase and consolidates them into the existing `human_needed` → HUMAN-UAT.md path in `workflows/execute-phase.md`. The user reviews everything in one batch instead of paying a cold-start cost per item.
|
|
31
|
+
|
|
32
|
+
### `mid-flight` (opt-back-in — pre-#3309 behavior)
|
|
33
|
+
|
|
34
|
+
Set `ccp config-set workflow.human_verify_mode mid-flight` to restore the canonical mid-flight pattern: emit `<task type="checkpoint:human-verify">` tasks at the points where human confirmation is required, and the executor halts at each one to ask the user.
|
|
35
|
+
|
|
36
|
+
```xml
|
|
37
|
+
<task type="checkpoint:human-verify" gate="blocking">
|
|
38
|
+
<what-built>Dev server running at http://localhost:3000</what-built>
|
|
39
|
+
<how-to-verify>
|
|
40
|
+
1. Visit /dashboard
|
|
41
|
+
2. Sidebar collapses at 768px
|
|
42
|
+
</how-to-verify>
|
|
43
|
+
<resume-signal>"approved" or describe issues</resume-signal>
|
|
44
|
+
</task>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Choose `mid-flight` when you genuinely need the work to stop before any subsequent task runs (e.g., the next task depends on visual confirmation of the previous one), and you accept the cold-start cost as the price of that hard barrier.
|
|
48
|
+
|
|
49
|
+
## What is *not* affected
|
|
50
|
+
|
|
51
|
+
`checkpoint:decision` and `checkpoint:human-action` tasks are still emitted in `end-of-phase` mode. Those gate the work itself (a choice the executor needs from the user, or an auth step only the user can perform), not post-hoc verification of completed work. Only `checkpoint:human-verify` is suppressed.
|
|
52
|
+
|
|
53
|
+
## Compatibility with other modes
|
|
54
|
+
|
|
55
|
+
- **`workflow.tdd_mode`**: orthogonal. TDD tasks still emit `tdd="true"` and `<behavior>`; the `<verify>` block carries the human-check sub-element when `human_verify_mode = end-of-phase`.
|
|
56
|
+
- **`MVP_MODE`**: orthogonal. Vertical-slice ordering is unchanged. The first task remains a failing end-to-end test; later auto tasks may carry `<verify><human-check>` instead of standalone checkpoint tasks.
|
|
57
|
+
- **`workflow.auto_advance` / `_auto_chain_active`**: in mid-flight mode these auto-approve checkpoint:human-verify halts. In end-of-phase mode there are no halts to auto-approve, so the flags have no effect on this code path.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Planner — MVP Mode (Vertical Slice Strategy)
|
|
2
|
+
|
|
3
|
+
> Loaded by `ccp-planner` only when `MVP_MODE=true`. Standard horizontal-layer planning rules continue to apply for all other phases.
|
|
4
|
+
|
|
5
|
+
## Core Rule
|
|
6
|
+
|
|
7
|
+
**Decompose by feature slice, not by technical layer.** Every task must move the user-facing capability forward. After each task, a real user can click through more of the feature than they could before.
|
|
8
|
+
|
|
9
|
+
**Forbidden** in MVP mode:
|
|
10
|
+
- "Create the database schema" as a standalone task
|
|
11
|
+
- "Build the API layer" as a standalone task
|
|
12
|
+
- "Wire up the UI" as a final integration task
|
|
13
|
+
|
|
14
|
+
**Required** in MVP mode:
|
|
15
|
+
- The first non-test task produces a working end-to-end path. Stubs are allowed for non-critical branches; the happy path must be real.
|
|
16
|
+
- Each subsequent task either adds a new slice OR refines an existing slice (validation, error states, edge cases).
|
|
17
|
+
- The phase goal is framed as a user story: "**As a** [user], **I want to** [do X], **so that** [Y]."
|
|
18
|
+
|
|
19
|
+
## Task Order Pattern
|
|
20
|
+
|
|
21
|
+
For a feature `F`:
|
|
22
|
+
|
|
23
|
+
1. **Failing end-to-end test** for the happy path of `F`.
|
|
24
|
+
2. **Thinnest viable slice** — UI form → API endpoint → DB read/write — that makes the test pass. Hard-coded values, missing validation, no error states are fine here.
|
|
25
|
+
3. **Real data layer** — replace any stubs from Task 2 with real queries.
|
|
26
|
+
4. **Validation + error states** — invalid input, network failure, empty states.
|
|
27
|
+
5. **Production polish** — loading indicators, edge cases, accessibility checks.
|
|
28
|
+
|
|
29
|
+
Tasks 3-5 are not always all needed; gate by the phase's acceptance criteria.
|
|
30
|
+
|
|
31
|
+
## Walking Skeleton Mode (`WALKING_SKELETON=true`)
|
|
32
|
+
|
|
33
|
+
When the orchestrator sets `WALKING_SKELETON=true` (Phase 1 of a new project under `--mvp`), the plan changes shape:
|
|
34
|
+
|
|
35
|
+
- The "feature" is the application itself. Pick the smallest meaningful capability that proves the full stack works (e.g., "user can sign up and see their name on a dashboard").
|
|
36
|
+
- The plan **must include**:
|
|
37
|
+
- Project scaffold (framework init, routing, build, lint)
|
|
38
|
+
- One real DB read/write
|
|
39
|
+
- One real UI interaction wired to the API
|
|
40
|
+
- Deployment to a dev environment (or a documented local-run command that exercises the full stack)
|
|
41
|
+
- The plan **must produce** `SKELETON.md` in the phase directory alongside `PLAN.md`. Use the template at `@~/.claude/pilot/references/skeleton-template.md`. `SKELETON.md` records the architectural decisions that subsequent phases will build on (chosen framework, DB, deployment target, auth approach, directory layout).
|
|
42
|
+
|
|
43
|
+
`SKELETON.md` is the architectural backbone for every later vertical slice; treat it as a contract, not a scratchpad.
|
|
44
|
+
|
|
45
|
+
## Anti-Patterns to Reject
|
|
46
|
+
|
|
47
|
+
- **Layer cake disguised as slices.** Three "vertical" tasks where Task 1 is "all the schemas", Task 2 is "all the endpoints", Task 3 is "all the UI" — that is horizontal planning with new labels. Reject.
|
|
48
|
+
- **Skeleton bloat.** Walking Skeleton is the *thinnest* working stack, not "Phase 1 of a normal app." If Skeleton has more than ~5 tasks, you are not skeletonizing.
|
|
49
|
+
- **Premature SPIDR splitting.** SPIDR splitting is the `mvp-phase` command's job (Phase 2 of the PRD), not the planner's. If the phase scope feels too large, surface it via the verification loop, do not split silently.
|
|
50
|
+
|
|
51
|
+
## Acceptance Test for Your Plan
|
|
52
|
+
|
|
53
|
+
Before emitting the plan, ask: **after Task N completes, can a real user *do* something they could not do after Task N-1?** If the answer is "no, but the foundation is laid", you have a horizontal task disguised as a slice. Restructure.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Project Skills Discovery
|
|
2
|
+
|
|
3
|
+
Before execution, check for project-defined skills and apply their rules.
|
|
4
|
+
|
|
5
|
+
**Discovery steps (shared across all GSD agents):**
|
|
6
|
+
1. Check `.claude/skills/` or `.agents/skills/` directory — if neither exists, skip.
|
|
7
|
+
2. List available skills (subdirectories).
|
|
8
|
+
3. Read `SKILL.md` for each skill (lightweight index, typically ~130 lines).
|
|
9
|
+
4. Load specific `rules/*.md` files only as needed during the current task.
|
|
10
|
+
5. Do NOT load full `AGENTS.md` files — they are large (100KB+) and cost significant context.
|
|
11
|
+
|
|
12
|
+
**Application** — how to apply the loaded rules depends on the calling agent:
|
|
13
|
+
- Planners account for project skill patterns and conventions in the plan.
|
|
14
|
+
- Executors follow skill rules relevant to the task being implemented.
|
|
15
|
+
- Researchers ensure research output accounts for project skill patterns.
|
|
16
|
+
- Verifiers apply skill rules when scanning for anti-patterns and verifying quality.
|
|
17
|
+
- Debuggers follow skill rules relevant to the bug being investigated and the fix being applied.
|
|
18
|
+
|
|
19
|
+
The caller's agent file should specify which application applies.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Revision Loop Pattern
|
|
2
|
+
|
|
3
|
+
Standard pattern for iterative agent revision with feedback. Used when a checker/validator finds issues and the producing agent needs to revise its output.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Pattern: Check-Revise-Escalate (max 3 iterations)
|
|
8
|
+
|
|
9
|
+
This pattern applies whenever:
|
|
10
|
+
1. An agent produces output (plans, imports, gap-closure plans)
|
|
11
|
+
2. A checker/validator evaluates that output
|
|
12
|
+
3. Issues are found that need revision
|
|
13
|
+
|
|
14
|
+
### Flow
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
prev_issue_count = Infinity
|
|
18
|
+
iteration = 0
|
|
19
|
+
|
|
20
|
+
LOOP:
|
|
21
|
+
1. Run checker/validator on current output
|
|
22
|
+
2. Read checker results
|
|
23
|
+
3. If PASSED or only INFO-level issues:
|
|
24
|
+
-> Accept output, exit loop
|
|
25
|
+
4. If BLOCKER or WARNING issues found:
|
|
26
|
+
a. iteration += 1
|
|
27
|
+
b. If iteration > 3:
|
|
28
|
+
-> Escalate to user (see "After 3 Iterations" below)
|
|
29
|
+
c. Parse issue count from checker output
|
|
30
|
+
d. If issue_count >= prev_issue_count:
|
|
31
|
+
-> Escalate to user: "Revision loop stalled (issue count not decreasing)"
|
|
32
|
+
e. prev_issue_count = issue_count
|
|
33
|
+
f. Re-spawn the producing agent with checker feedback appended
|
|
34
|
+
g. After revision completes, go to LOOP
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Issue Count Tracking
|
|
38
|
+
|
|
39
|
+
Track the number of BLOCKER + WARNING issues returned by the checker on each iteration. If the count does not decrease between consecutive iterations, the producing agent is stuck and further iterations will not help. Break early and escalate to the user.
|
|
40
|
+
|
|
41
|
+
Display iteration progress before each revision spawn:
|
|
42
|
+
`Revision iteration {N}/3 -- {blocker_count} blockers, {warning_count} warnings`
|
|
43
|
+
|
|
44
|
+
### Re-spawn Prompt Structure
|
|
45
|
+
|
|
46
|
+
When re-spawning the producing agent for revision, pass the checker's YAML-formatted issues. The checker's output contains a `## Issues` heading followed by a YAML block. Parse this block and pass it verbatim to the revision agent.
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
<checker_issues>
|
|
50
|
+
The issues below are in YAML format. Each has: dimension, severity, finding,
|
|
51
|
+
affected_field, suggested_fix. Address ALL BLOCKER issues. Address WARNING
|
|
52
|
+
issues where feasible.
|
|
53
|
+
|
|
54
|
+
{YAML issues block from checker output -- passed verbatim}
|
|
55
|
+
</checker_issues>
|
|
56
|
+
|
|
57
|
+
<revision_instructions>
|
|
58
|
+
Address ALL BLOCKER and WARNING issues identified above.
|
|
59
|
+
- For each BLOCKER: make the required change
|
|
60
|
+
- For each WARNING: address or explain why it's acceptable
|
|
61
|
+
- Do NOT introduce new issues while fixing existing ones
|
|
62
|
+
- Preserve all content not flagged by the checker
|
|
63
|
+
This is revision iteration {N} of max 3. Previous iteration had {prev_count}
|
|
64
|
+
issues. You must reduce the count or the loop will terminate.
|
|
65
|
+
</revision_instructions>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### After 3 Iterations
|
|
69
|
+
|
|
70
|
+
If issues persist after 3 revision cycles:
|
|
71
|
+
|
|
72
|
+
1. Present remaining issues to the user
|
|
73
|
+
2. Use gate prompt (pattern: yes-no from `references/gate-prompts.md`):
|
|
74
|
+
question: "Issues remain after 3 revision attempts. Proceed with current output?"
|
|
75
|
+
header: "Proceed?"
|
|
76
|
+
options:
|
|
77
|
+
- label: "Proceed anyway" description: "Accept output with remaining issues"
|
|
78
|
+
- label: "Adjust approach" description: "Discuss a different approach"
|
|
79
|
+
3. If "Proceed anyway": accept current output and continue
|
|
80
|
+
4. If "Adjust approach" or "Other": discuss with user, then re-enter the producing step with updated context
|
|
81
|
+
|
|
82
|
+
### Workflow-Specific Variations
|
|
83
|
+
|
|
84
|
+
| Workflow | Producer Agent | Checker Agent | Notes |
|
|
85
|
+
|----------|---------------|---------------|-------|
|
|
86
|
+
| plan-phase | gsd-planner | gsd-plan-checker | Revision prompt via planner-revision.md |
|
|
87
|
+
| execute-phase | gsd-executor | gsd-verifier | Post-execution verification |
|
|
88
|
+
| discuss-phase | orchestrator | gsd-plan-checker | Inline revision by orchestrator |
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Important Notes
|
|
93
|
+
|
|
94
|
+
- **INFO-level issues are always acceptable** -- they don't trigger revision
|
|
95
|
+
- **Each iteration gets a fresh agent spawn** -- don't try to continue in the same context
|
|
96
|
+
- **Checker feedback must be inlined** -- the revision agent needs to see exactly what failed
|
|
97
|
+
- **Don't silently swallow issues** -- always present the final state to the user after exiting the loop
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# SKELETON.md Template
|
|
2
|
+
|
|
3
|
+
> Emitted by `ccp-planner` when `WALKING_SKELETON=true` (Phase 1 + `--mvp` + new project). Records the architectural decisions the rest of the project will build on.
|
|
4
|
+
|
|
5
|
+
```markdown
|
|
6
|
+
# Walking Skeleton — [Project Name]
|
|
7
|
+
|
|
8
|
+
**Phase:** 1
|
|
9
|
+
**Generated:** {ISO date}
|
|
10
|
+
|
|
11
|
+
## Capability Proven End-to-End
|
|
12
|
+
|
|
13
|
+
> One sentence: the smallest user-visible capability that exercises the full stack.
|
|
14
|
+
|
|
15
|
+
Example: "A signed-in user can view their email on a dashboard page served by the deployed app."
|
|
16
|
+
|
|
17
|
+
## Architectural Decisions
|
|
18
|
+
|
|
19
|
+
| Decision | Choice | Rationale |
|
|
20
|
+
|---|---|---|
|
|
21
|
+
| Framework | (e.g., Next.js 15 App Router) | Why this fits the project |
|
|
22
|
+
| Data layer | (e.g., Postgres + Drizzle) | Why |
|
|
23
|
+
| Auth | (e.g., session cookies + bcrypt) | Why |
|
|
24
|
+
| Deployment target | (e.g., Vercel preview) | Why |
|
|
25
|
+
| Directory layout | (e.g., feature-folders under src/features/*) | Why |
|
|
26
|
+
|
|
27
|
+
## Stack Touched in Phase 1
|
|
28
|
+
|
|
29
|
+
- [ ] Project scaffold (framework, build, lint, test runner)
|
|
30
|
+
- [ ] Routing — at least one real route
|
|
31
|
+
- [ ] Database — at least one real read AND one real write
|
|
32
|
+
- [ ] UI — at least one interactive element wired to the API
|
|
33
|
+
- [ ] Deployment — running on dev environment OR documented local full-stack run command
|
|
34
|
+
|
|
35
|
+
## Out of Scope (Deferred to Later Slices)
|
|
36
|
+
|
|
37
|
+
> Anything that is *not* in the skeleton. Be explicit — this list prevents future phases from re-litigating Phase 1's minimalism.
|
|
38
|
+
|
|
39
|
+
- (e.g., password reset, email verification, multi-tenancy)
|
|
40
|
+
|
|
41
|
+
## Subsequent Slice Plan
|
|
42
|
+
|
|
43
|
+
Each later phase adds one vertical slice on top of this skeleton without altering its architectural decisions:
|
|
44
|
+
|
|
45
|
+
- Phase 2: [next user capability]
|
|
46
|
+
- Phase 3: [next user capability]
|
|
47
|
+
- ...
|
|
48
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Making Sketches Feel Alive
|
|
2
|
+
|
|
3
|
+
Static mockups are barely better than screenshots. Every interactive element in a sketch must respond to interaction.
|
|
4
|
+
|
|
5
|
+
## Required Interactivity
|
|
6
|
+
|
|
7
|
+
| Element | Must Have |
|
|
8
|
+
|---------|-----------|
|
|
9
|
+
| Buttons | Click handler with visible feedback (state change, animation, toast) |
|
|
10
|
+
| Forms | Input validation on blur, submit handler that shows success state |
|
|
11
|
+
| Lists | Add/remove items, empty state, populated state |
|
|
12
|
+
| Toggles/switches | Working toggle with visible state change |
|
|
13
|
+
| Tabs/nav | Click to switch content |
|
|
14
|
+
| Modals/drawers | Open/close with transition |
|
|
15
|
+
| Hover states | Every clickable element needs a hover effect |
|
|
16
|
+
| Dropdowns | Open/close, item selection |
|
|
17
|
+
|
|
18
|
+
## Transitions
|
|
19
|
+
|
|
20
|
+
Add `transition: all 0.15s ease` as a baseline to interactive elements. Subtle motion makes the sketch feel real and helps judge whether the interaction pattern works.
|
|
21
|
+
|
|
22
|
+
## Fake the Backend
|
|
23
|
+
|
|
24
|
+
If the sketch shows a "Save" button, clicking it should show a brief loading state then a success message. If it shows a search bar, typing should filter hardcoded results. The goal is to feel the full interaction loop, not just see the resting state.
|
|
25
|
+
|
|
26
|
+
## State Cycling
|
|
27
|
+
|
|
28
|
+
If the sketch has multiple states (empty, loading, populated, error), include buttons to cycle through them. Label each state clearly. This lets the user experience how the design handles different data conditions.
|
|
29
|
+
|
|
30
|
+
## Implementation
|
|
31
|
+
|
|
32
|
+
Use vanilla JS in inline `<script>` tags. No frameworks, no build step. Keep it simple:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<script>
|
|
36
|
+
// Toggle a panel
|
|
37
|
+
document.querySelector('.panel-toggle').addEventListener('click', (e) => {
|
|
38
|
+
e.target.closest('.panel').classList.toggle('collapsed');
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
```
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Shared Theme System
|
|
2
|
+
|
|
3
|
+
All sketches share a CSS variable theme so design decisions compound across sketches.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
On the first sketch, create `.planning/sketches/themes/` with a default theme:
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
.planning/sketches/
|
|
11
|
+
themes/
|
|
12
|
+
default.css <- all sketches link to this
|
|
13
|
+
001-dashboard-layout/
|
|
14
|
+
index.html <- links to ../themes/default.css
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Theme File Structure
|
|
18
|
+
|
|
19
|
+
Each theme defines CSS custom properties only — no component styles, no layout rules. Just the visual vocabulary:
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
:root {
|
|
23
|
+
/* Colors */
|
|
24
|
+
--color-bg: #fafafa;
|
|
25
|
+
--color-surface: #ffffff;
|
|
26
|
+
--color-border: #e5e5e5;
|
|
27
|
+
--color-text: #1a1a1a;
|
|
28
|
+
--color-text-muted: #6b6b6b;
|
|
29
|
+
--color-primary: #2563eb;
|
|
30
|
+
--color-primary-hover: #1d4ed8;
|
|
31
|
+
--color-accent: #f59e0b;
|
|
32
|
+
--color-danger: #ef4444;
|
|
33
|
+
--color-success: #22c55e;
|
|
34
|
+
|
|
35
|
+
/* Typography */
|
|
36
|
+
--font-sans: 'Inter', system-ui, sans-serif;
|
|
37
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
38
|
+
--text-xs: 0.75rem;
|
|
39
|
+
--text-sm: 0.875rem;
|
|
40
|
+
--text-base: 1rem;
|
|
41
|
+
--text-lg: 1.125rem;
|
|
42
|
+
--text-xl: 1.25rem;
|
|
43
|
+
--text-2xl: 1.5rem;
|
|
44
|
+
--text-3xl: 1.875rem;
|
|
45
|
+
|
|
46
|
+
/* Spacing */
|
|
47
|
+
--space-1: 4px;
|
|
48
|
+
--space-2: 8px;
|
|
49
|
+
--space-3: 12px;
|
|
50
|
+
--space-4: 16px;
|
|
51
|
+
--space-6: 24px;
|
|
52
|
+
--space-8: 32px;
|
|
53
|
+
--space-12: 48px;
|
|
54
|
+
|
|
55
|
+
/* Shapes */
|
|
56
|
+
--radius-sm: 4px;
|
|
57
|
+
--radius-md: 8px;
|
|
58
|
+
--radius-lg: 12px;
|
|
59
|
+
--radius-full: 9999px;
|
|
60
|
+
|
|
61
|
+
/* Shadows */
|
|
62
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
63
|
+
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
|
|
64
|
+
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Adapt the default theme to match the mood/direction established during intake. The values above are a starting point — change colors, fonts, spacing, and shapes to match the agreed aesthetic.
|
|
69
|
+
|
|
70
|
+
## Linking
|
|
71
|
+
|
|
72
|
+
Every sketch links to the theme:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<link rel="stylesheet" href="../themes/default.css">
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Creating New Themes
|
|
79
|
+
|
|
80
|
+
When a sketch reveals an aesthetic fork ("should this feel clinical or warm?"), create both as theme files rather than arguing about it. The user can switch and feel the difference.
|
|
81
|
+
|
|
82
|
+
Name themes descriptively: `midnight.css`, `warm-minimal.css`, `brutalist.css`.
|
|
83
|
+
|
|
84
|
+
## Theme Switcher
|
|
85
|
+
|
|
86
|
+
Include in every sketch (part of the sketch toolbar):
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<select id="theme-switcher" onchange="document.querySelector('link[href*=themes]').href='../themes/'+this.value+'.css'">
|
|
90
|
+
<option value="default">Default</option>
|
|
91
|
+
</select>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Dynamically populate options by listing available theme files, or hardcode the known themes.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Sketch Toolbar
|
|
2
|
+
|
|
3
|
+
Include a small floating toolbar in every sketch. It provides utilities without competing with the actual design.
|
|
4
|
+
|
|
5
|
+
## Implementation
|
|
6
|
+
|
|
7
|
+
A small `<div>` fixed to the bottom-right, semi-transparent, expands on hover:
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div id="sketch-tools" style="position:fixed;bottom:12px;right:12px;z-index:9999;font-family:system-ui;font-size:12px;background:rgba(0,0,0,0.7);color:white;padding:8px 12px;border-radius:8px;opacity:0.4;transition:opacity 0.2s;" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.4'">
|
|
11
|
+
<!-- Theme switcher -->
|
|
12
|
+
<!-- Viewport buttons -->
|
|
13
|
+
<!-- Annotation toggle -->
|
|
14
|
+
</div>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
### Theme Switcher
|
|
20
|
+
|
|
21
|
+
A dropdown that swaps the theme CSS file at runtime:
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<select onchange="document.querySelector('link[href*=themes]').href='../themes/'+this.value+'.css'">
|
|
25
|
+
<option value="default">Default</option>
|
|
26
|
+
</select>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Viewport Preview
|
|
30
|
+
|
|
31
|
+
Three buttons that constrain the sketch content area to standard widths:
|
|
32
|
+
|
|
33
|
+
- Phone: 375px
|
|
34
|
+
- Tablet: 768px
|
|
35
|
+
- Desktop: 1280px (or full width)
|
|
36
|
+
|
|
37
|
+
Implemented by wrapping sketch content in a container and adjusting its `max-width`.
|
|
38
|
+
|
|
39
|
+
### Annotation Mode
|
|
40
|
+
|
|
41
|
+
A toggle that overlays spacing values, color hex codes, and font sizes on hover. Implemented as a JS snippet that reads computed styles and shows them in a tooltip. Helps understand visual decisions without opening dev tools.
|
|
42
|
+
|
|
43
|
+
## Styling
|
|
44
|
+
|
|
45
|
+
The toolbar should be unobtrusive — small, dark, semi-transparent. It should never compete with the sketch visually. Style it independently of the theme (hardcoded dark background, white text).
|