Skip to content

Commit 53a4160

Browse files
committed
feat(spec): add MD-first development pattern with /spec command (0.12.8)
Introduces a 3-level spec-before-code workflow: Architecture → Page → Component. Each component gets a colocated .md spec written before any code is created. - Add commands/spec.md — new slash command to scaffold component specs - Add templates/component-spec.md — Level 3 spec template - Update commands/create-component.md — spec check/creation is now Step 1 - Register /spec in Claude and Cursor integrations - Add docs/md-first page and sidebar entry - Add V1-PLAN.md with release roadmap to 1.0.0
1 parent 647261e commit 53a4160

14 files changed

Lines changed: 593 additions & 14 deletions

File tree

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ ContextKit installs reusable slash commands for supported platforms:
165165
| `/refactor` | Refactor code with safety checks |
166166
| `/test` | Generate comprehensive tests |
167167
| `/doc` | Add documentation |
168+
| `/spec` | Write a component spec (MD-first) before any code is created |
168169
| `/squad` | Kick off a squad task — write the PO spec |
169170
| `/squad-architect` | Design the technical plan from the PO spec |
170171
| `/squad-dev` | Implement code following the architect plan |

V1-PLAN.md

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# ContextKit 1.0.0 — Release Plan
2+
3+
> Honest baseline: **0.12.7 today**. Feature-complete, but test coverage is 27%, core UX has a mismatch, and the project doesn't dogfood itself. One focused sprint gets us there.
4+
5+
---
6+
7+
## Summary
8+
9+
| Area | Status | Blocking 1.0? |
10+
|------|--------|---------------|
11+
| Core CLI (install, status, update) | ✅ Tested & stable | No |
12+
| Platform integrations (9 platforms) | ✅ Working | No |
13+
| Quality gates (7 languages) | ✅ Tested | No |
14+
| Squad workflow | ✅ Feature-complete, ❌ untested | Yes |
15+
| Command test coverage | ❌ 3/11 commands tested (27%) | Yes |
16+
| Analyze UX clarity | ❌ Behavior mismatch | Yes |
17+
| Project dogfooding | ❌ Own product files are placeholders | Yes |
18+
| API stability contract | ❌ Not documented | Yes |
19+
| Contributing guide | ❌ Missing | Yes |
20+
| MD-first pattern (3-level spec) | 🚧 Partial (templates + commands done) | Yes |
21+
22+
---
23+
24+
## 1. Test Coverage
25+
26+
> **Goal:** Bring critical commands to tested. Not aiming for 100% — focus on the commands users actually run.
27+
28+
### High Priority (user-facing commands)
29+
- [ ] `lib/commands/analyze.js` — test scope detection, monorepo detection, context loading, usage output
30+
- [ ] `lib/commands/pull.js` — test registry pull, version resolution, backup flag, overwrite behavior
31+
- [ ] `lib/commands/check.js` — test install detection, status reporting
32+
- [ ] `lib/commands/run.js` — test command routing and execution
33+
34+
### Medium Priority
35+
- [ ] `lib/commands/ai.js` — test prompt construction, tool routing (aider, claude, gemini)
36+
- [ ] `lib/commands/dashboard.js` — test status rendering and data aggregation
37+
- [ ] `lib/commands/publish.js` — test package validation and registry write
38+
- [ ] `lib/commands/note.js` — test file append and corrections log format
39+
40+
### Squad Workflow (integration-level)
41+
- [ ] Test manifest creation from `squad-batch` input (fresh start)
42+
- [ ] Test manifest append mode (existing manifest detected, numbering continues correctly)
43+
- [ ] Test `squad-run` phase routing based on manifest statuses
44+
- [ ] Test clarify status detection pauses the correct tasks
45+
- [ ] Test single handoff file creation from `squad` input
46+
47+
---
48+
49+
## 2. Analyze UX Clarity
50+
51+
> **The mismatch:** Users run `ck analyze` expecting standards files to be generated. The CLI only detects project structure and prints instructions — the AI does the actual work. This surprises users.
52+
53+
- [ ] Update the `ck analyze` terminal output to **explicitly state the handoff**: "Analysis complete. Now paste the above context into your AI tool, or run: `claude .contextkit/commands/analyze.md`"
54+
- [ ] Add a "Next step" callout box at the end of the analyze output (not buried in instructions)
55+
- [ ] Update README `ck analyze` section to clearly describe the two-stage process: CLI detects → AI generates
56+
- [ ] Update docs site quick-start page to reflect the two-stage flow
57+
- [ ] Consider adding `ck analyze --with-claude` / `--with-aider` flags that auto-invoke the detected AI tool (stretch goal — not blocking)
58+
59+
---
60+
61+
## 3. Project Dogfooding
62+
63+
> **The credibility gap:** ContextKit's own `.contextkit/` is mostly placeholder. The tool that helps teams fill their context hasn't filled its own.
64+
65+
### Product files
66+
- [ ] Fill `.contextkit/product/mission.md` — write actual ContextKit mission, users, problem, value
67+
- [ ] Fill `.contextkit/product/mission-lite.md` — condensed 2-3 sentence version for AI context
68+
- [ ] Fill `.contextkit/product/decisions.md` — document real architectural decisions made so far:
69+
- Why markdown over a database
70+
- Why AI-delegated analyze (not in-CLI generation)
71+
- Why CommonJS over TypeScript
72+
- Why platform bridge files vs single universal format
73+
- [ ] Fill `.contextkit/product/roadmap.md` — use this document as the source
74+
75+
### Standards files (run `ck analyze` on itself)
76+
- [ ] Generate `.contextkit/standards/code-style.md` — Node.js/CommonJS, chalk, ora, inquirer patterns
77+
- [ ] Generate `.contextkit/standards/architecture.md` — command pattern, utils structure, integration pattern
78+
- [ ] Generate `.contextkit/standards/testing.md` — Jest, mock patterns, integration vs unit split
79+
- [ ] Generate `.contextkit/standards/workflows.md` — git flow, versioning, changelog discipline
80+
- [ ] Generate `.contextkit/standards/ai-guidelines.md` — ContextKit-specific AI behavior rules
81+
82+
---
83+
84+
## 4. API Stability Contract
85+
86+
> **1.0.0 signals "the interface is locked."** Without documenting what's stable, users can't trust it.
87+
88+
- [ ] Define and document the **stable public API surface** in README:
89+
- CLI commands that won't be renamed or removed
90+
- File paths that are guaranteed stable (`.contextkit/standards/`, `.contextkit/commands/`, handoff file schema)
91+
- Config file schema (`config.yml`, `manifest.md` fields)
92+
- [ ] Add a **Breaking Changes policy** to README: breaking changes require a major bump, deprecated features get one release cycle warning
93+
- [ ] Document the **squad handoff file schema** as a stable format (fields: `task`, `status`, sections 1–5)
94+
- [ ] Document the **manifest.md schema** as stable (fields: `batch`, `total`, `checkpoint`, task list format)
95+
96+
---
97+
98+
## 5. Contributing Guide
99+
100+
- [ ] Create `CONTRIBUTING.md` at the project root with:
101+
- [ ] How to set up the dev environment
102+
- [ ] How to run tests (`npm test`)
103+
- [ ] How to add a new platform integration (the integration pattern)
104+
- [ ] How to add a new command
105+
- [ ] Commit message format (conventional commits — already enforced by hook)
106+
- [ ] PR checklist (tests pass, changelog entry, version bump if needed)
107+
- [ ] Link `CONTRIBUTING.md` from README
108+
109+
---
110+
111+
## 6. MD-First Development Pattern
112+
113+
> **The idea:** Before any component or feature is coded, a markdown spec must exist. This is the 3-level documentation hierarchy — Architecture → Project → Component — where specs drive implementation, not the other way around.
114+
115+
### The 3 Levels (Option A: Colocated)
116+
117+
| Level | Scope | Location |
118+
|-------|-------|----------|
119+
| **1. Architecture** | How projects connect | `.contextkit/standards/architecture.md` |
120+
| **2. Project** | What this project does, structure | `.contextkit/product/mission.md` + `context.md` |
121+
| **3. Component** | Individual component logic & responsibilities | `<ComponentName>/<ComponentName>.md` (colocated) |
122+
123+
Level 3 example:
124+
```
125+
src/components/Button/
126+
Button.md ← spec (written first)
127+
Button.tsx ← code (written after spec)
128+
Button.test.tsx
129+
```
130+
131+
### Deliverables
132+
133+
- [x] Create `templates/component-spec.md` — Level 3 spec template with Purpose, Responsibilities, Props/API, Logic & Behavior, Dependencies sections
134+
- [x] Create `commands/spec.md` — Standalone command to write a component spec before coding
135+
- [x] Update `commands/create-component.md` — Step 1 is now spec check/creation; code only after spec is confirmed
136+
- [ ] Document the 3-level pattern in `.contextkit/standards/architecture.md`
137+
- [ ] Add spec scanning to `ck analyze` — report which components have specs vs. missing
138+
139+
---
140+
141+
## 7. Polish & Loose Ends
142+
143+
- [ ] **`ck pull` docs** — it's implemented and registered but not mentioned anywhere in the README CLI commands table. Add it.
144+
- [ ] **`squad-run-agents` scope** — currently undocumented that it's Claude Code-only. Add a note in the docs site squad page and in the command file itself.
145+
- [ ] **`vibe-kit` / `vk` aliases** — these legacy aliases are still in `package.json` bin. Decide: keep with deprecation notice or remove before 1.0.
146+
- [ ] **`nolrm-vibe-kit-0.1.2.tgz`** in the repo root — stale artifact, should be deleted or gitignored.
147+
- [ ] **`test-project/`** in the repo root — confirm it's gitignored and not shipping in the npm package.
148+
- [ ] **Node.js engine requirement**`package.json` says `>=14.0.0` but codebase likely uses features requiring 16+. Verify and update if needed.
149+
150+
---
151+
152+
## 8. Version Milestones
153+
154+
| Version | Focus | Done when |
155+
|---------|-------|-----------|
156+
| **0.13** | Test coverage + analyze UX | All high-priority tests written, analyze output updated |
157+
| **0.14** | Dogfooding + product files | All `.contextkit/product/` and standards filled |
158+
| **0.15** | API contract + contributing | README stability docs + CONTRIBUTING.md merged |
159+
| **0.16** | Polish sprint | All loose ends resolved, no known issues |
160+
| **1.0.0** | Release | All items above checked off |
161+
162+
---
163+
164+
## Done When
165+
166+
1.0.0 ships when every checkbox above is checked. No partial credit.
167+
168+
> Last updated: 2026-03-01 · Baseline: v0.12.7

__tests__/integrations/claude-integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ describe('ClaudeIntegration', () => {
7070
await integration.install();
7171

7272
const commands = [
73-
'analyze', 'review', 'fix', 'refactor', 'test', 'doc',
73+
'analyze', 'review', 'fix', 'refactor', 'test', 'doc', 'spec',
7474
'squad', 'squad-architect', 'squad-dev', 'squad-test', 'squad-review',
75-
'squad-batch', 'squad-run', 'ck',
75+
'squad-batch', 'squad-run', 'squad-run-agents', 'ck',
7676
];
7777
for (const cmd of commands) {
7878
const filePath = `.claude/commands/${cmd}.md`;

commands/create-component.md

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
# Create Component
22

3-
Scaffold a new UI component with tests.
3+
Scaffold a new UI component with tests, following the MD-first pattern.
4+
5+
**MD-first rule:** A spec file must exist (or be created now) before any code is written.
6+
The spec lives colocated with the component:
7+
```
8+
src/components/ComponentName/
9+
ComponentName.md ← spec (Level 3 doc)
10+
ComponentName.tsx ← implementation
11+
ComponentName.test.tsx
12+
```
413

514
## What I'll Do
615

7-
1. Detect the project's UI framework and conventions
8-
2. Create the component file in the appropriate location
9-
3. Add typed props/interfaces
10-
4. Create a test file with numbered test cases
11-
5. Update exports if needed
16+
1. Check if `<ComponentName>/<ComponentName>.md` already exists
17+
2. If not — create the spec from `.contextkit/templates/component-spec.md` and present it for review
18+
3. Once spec is confirmed — detect the project's UI framework and conventions
19+
4. Scaffold the component file using the spec as the source of truth
20+
5. Add typed props/interfaces matching the spec's Props/API table
21+
6. Create a test file with numbered test cases covering the spec's Logic & Behavior
22+
7. Update exports if needed
1223

1324
## How to Use
1425

@@ -20,13 +31,15 @@ Create a Modal component with title and children props
2031

2132
## Process
2233

23-
1. **Detect patterns** — Scan existing components for conventions
24-
2. **Scaffold** — Create component matching project structure
25-
3. **Props** — Define typed interface for all inputs
26-
4. **Tests** — Add test file covering rendering and interactions
27-
5. **Exports** — Update barrel files or index if the project uses them
34+
1. **Spec check** — Look for `<ComponentName>/<ComponentName>.md`. If missing, draft it from template and wait for approval before continuing.
35+
2. **Detect patterns** — Scan existing components for conventions
36+
3. **Scaffold** — Create component matching project structure, using spec as source of truth
37+
4. **Props** — Define typed interface from spec's Props/API table
38+
5. **Tests** — Add test file covering the Logic & Behavior section of the spec
39+
6. **Exports** — Update barrel files or index if the project uses them
2840

2941
## Standards Applied
3042

43+
- `.contextkit/standards/architecture.md` — 3-level MD-first pattern
3144
- `.contextkit/standards/code-style.md` — Coding conventions
3245
- `.contextkit/standards/testing.md` — Testing patterns

commands/spec.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Spec
2+
3+
Write a component spec (Level 3 of the MD-first pattern) before any code is written.
4+
5+
The spec file lives **colocated** with the component it describes:
6+
```
7+
src/components/Button/
8+
Button.md ← spec (written first)
9+
Button.tsx ← code (written after spec is approved)
10+
```
11+
12+
## What I'll Do
13+
14+
1. Ask for the component name and a brief description of its purpose
15+
2. Scan existing components to understand project patterns and naming conventions
16+
3. Create `<ComponentName>/<ComponentName>.md` using `.contextkit/templates/component-spec.md`
17+
4. Fill in Purpose, Responsibilities, Props/API, Logic & Behavior, and Dependencies based on your description
18+
5. Present the spec for your review before any code is written
19+
20+
## How to Use
21+
22+
```
23+
Spec a Button component that handles primary and secondary variants with loading state
24+
Spec an AuthProvider that manages session state and exposes useAuth hook
25+
Spec a DataTable with sortable columns, pagination, and row selection
26+
```
27+
28+
## Process
29+
30+
1. **Understand** — Parse the description to identify purpose, props, and behavior
31+
2. **Scan** — Check existing components for similar patterns or dependencies
32+
3. **Draft spec** — Create `<ComponentName>/<ComponentName>.md` from template
33+
4. **Fill** — Populate all sections based on description and codebase context
34+
5. **Review** — Present the spec. Wait for approval before writing any code.
35+
36+
Once the spec is approved, use `create-component` to scaffold the implementation.
37+
38+
## Standards Applied
39+
40+
- `.contextkit/standards/architecture.md` — 3-level MD-first pattern
41+
- `.contextkit/standards/code-style.md` — Naming conventions

0 commit comments

Comments
 (0)