specsmd 0.0.0-dev.6 → 0.0.0-dev.61
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/README.md +10 -2
- package/flows/aidlc/commands/construction-agent.md +5 -1
- package/flows/aidlc/commands/inception-agent.md +4 -0
- package/flows/aidlc/commands/master-agent.md +4 -0
- package/flows/aidlc/commands/operations-agent.md +4 -0
- package/flows/aidlc/memory-bank.yaml +2 -1
- package/{scripts → flows/aidlc/scripts}/artifact-validator.js +3 -3
- package/{scripts → flows/aidlc/scripts}/bolt-complete.js +35 -4
- package/{scripts → flows/aidlc/scripts}/status-integrity.js +4 -4
- package/flows/aidlc/skills/construction/bolt-list.md +1 -1
- package/flows/aidlc/skills/construction/bolt-start.md +2 -2
- package/flows/aidlc/skills/construction/bolt-status.md +1 -1
- package/flows/aidlc/skills/construction/prototype-apply.md +305 -0
- package/flows/aidlc/skills/inception/bolt-plan.md +15 -2
- package/flows/aidlc/skills/inception/vibe-to-spec.md +406 -0
- package/flows/aidlc/skills/master/analyze-context.md +1 -1
- package/flows/aidlc/templates/construction/bolt-template.md +22 -1
- package/flows/aidlc/templates/construction/bolt-types/ddd-construction-bolt.md +73 -11
- package/flows/aidlc/templates/construction/bolt-types/simple-construction-bolt.md +5 -0
- package/flows/aidlc/templates/standards/decision-index-template.md +32 -0
- package/flows/fire/README.md +19 -0
- package/flows/fire/agents/builder/agent.md +275 -0
- package/flows/fire/agents/builder/skills/code-review/SKILL.md +266 -0
- package/flows/fire/agents/builder/skills/code-review/references/auto-fix-rules.md +212 -0
- package/flows/fire/agents/builder/skills/code-review/references/review-categories.md +154 -0
- package/flows/fire/agents/builder/skills/code-review/templates/review-report.md.hbs +120 -0
- package/flows/fire/agents/builder/skills/run-execute/SKILL.md +503 -0
- package/flows/fire/agents/builder/skills/run-execute/scripts/complete-run.js +549 -0
- package/flows/fire/agents/builder/skills/run-execute/scripts/init-run.js +454 -0
- package/flows/fire/agents/builder/skills/run-execute/templates/plan.md.hbs +61 -0
- package/flows/fire/agents/builder/skills/run-execute/templates/test-report.md.hbs +81 -0
- package/flows/fire/agents/builder/skills/run-plan/SKILL.md +376 -0
- package/flows/fire/agents/builder/skills/run-status/SKILL.md +94 -0
- package/flows/fire/agents/builder/skills/walkthrough-generate/SKILL.md +140 -0
- package/flows/fire/agents/builder/skills/walkthrough-generate/scripts/render-walkthrough.ts +755 -0
- package/flows/fire/agents/builder/skills/walkthrough-generate/templates/walkthrough.md.hbs +77 -0
- package/flows/fire/agents/orchestrator/agent.md +113 -0
- package/flows/fire/agents/orchestrator/skills/project-init/SKILL.md +150 -0
- package/flows/fire/agents/orchestrator/skills/project-init/templates/coding-standards.md.hbs +149 -0
- package/flows/fire/agents/orchestrator/skills/project-init/templates/system-architecture.md.hbs +101 -0
- package/flows/fire/agents/orchestrator/skills/project-init/templates/tech-stack.md.hbs +136 -0
- package/flows/fire/agents/orchestrator/skills/project-init/templates/testing-standards.md.hbs +94 -0
- package/flows/fire/agents/orchestrator/skills/route/SKILL.md +123 -0
- package/flows/fire/agents/orchestrator/skills/status/SKILL.md +99 -0
- package/flows/fire/agents/planner/agent.md +122 -0
- package/flows/fire/agents/planner/skills/design-doc-generate/SKILL.md +213 -0
- package/flows/fire/agents/planner/skills/design-doc-generate/templates/design.md.hbs +76 -0
- package/flows/fire/agents/planner/skills/intent-capture/SKILL.md +155 -0
- package/flows/fire/agents/planner/skills/intent-capture/templates/brief.md.hbs +40 -0
- package/flows/fire/agents/planner/skills/work-item-decompose/SKILL.md +194 -0
- package/flows/fire/agents/planner/skills/work-item-decompose/templates/work-item.md.hbs +40 -0
- package/flows/fire/commands/fire-builder.md +56 -0
- package/flows/fire/commands/fire-planner.md +48 -0
- package/flows/fire/commands/fire.md +46 -0
- package/flows/fire/memory-bank.yaml +164 -0
- package/flows/fire/quick-start.md +130 -0
- package/flows/simple/README.md +190 -0
- package/flows/simple/agents/agent.md +404 -0
- package/flows/simple/commands/agent.md +60 -0
- package/flows/simple/context-config.yaml +34 -0
- package/flows/simple/memory-bank.yaml +66 -0
- package/flows/simple/quick-start.md +231 -0
- package/flows/simple/skills/design.md +96 -0
- package/flows/simple/skills/execute.md +190 -0
- package/flows/simple/skills/requirements.md +94 -0
- package/flows/simple/skills/tasks.md +136 -0
- package/flows/simple/templates/design-template.md +138 -0
- package/flows/simple/templates/requirements-template.md +85 -0
- package/flows/simple/templates/tasks-template.md +104 -0
- package/lib/analytics/tracker.js +6 -2
- package/lib/constants.js +17 -8
- package/lib/installer.js +5 -15
- package/lib/installers/KiroInstaller.js +55 -0
- package/lib/installers/OpenCodeInstaller.js +9 -1
- package/lib/installers/ToolInstaller.js +4 -1
- package/lib/installers/WindsurfInstaller.js +0 -54
- package/package.json +3 -52
package/README.md
CHANGED
|
@@ -29,8 +29,9 @@ Track your AI-DLC progress with our sidebar extension for VS Code and compatible
|
|
|
29
29
|
> **Note:** Works with any VS Code-based IDE including [Cursor](https://cursor.sh), [Google Antigravity](https://antigravity.google), [Windsurf](https://codeium.com/windsurf), and others.
|
|
30
30
|
|
|
31
31
|
**Install from:**
|
|
32
|
-
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=fabriqaai.specsmd)
|
|
33
|
-
- [
|
|
32
|
+
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=fabriqaai.specsmd) — VS Code, GitHub Codespaces
|
|
33
|
+
- [Open VSX Registry](https://open-vsx.org/extension/fabriqaai/specsmd) — Cursor, Windsurf, Amazon Kiro, Google Antigravity, VSCodium, Gitpod, Google IDX
|
|
34
|
+
- [GitHub Releases (VSIX)](https://github.com/fabriqaai/specs.md/releases) — Manual installation
|
|
34
35
|
|
|
35
36
|
---
|
|
36
37
|
|
|
@@ -306,6 +307,13 @@ Specs and Memory Bank provide structured context for AI agents. Agents reload co
|
|
|
306
307
|
| **Cursor** | Full support | Rules in `.cursor/rules/` (`.mdc` format) |
|
|
307
308
|
| **GitHub Copilot** | Full support | Agents in `.github/agents/` (`.agent.md` format) |
|
|
308
309
|
| **Google Antigravity** | Full support | Agents in `.agent/agents/` |
|
|
310
|
+
| **Windsurf** | Full support | Workflows in `.windsurf/workflows/` |
|
|
311
|
+
| **Amazon Kiro** | Full support | Steering in `.kiro/steering/` |
|
|
312
|
+
| **Gemini CLI** | Full support | Commands in `.gemini/commands/` (`.toml` format) |
|
|
313
|
+
| **Cline** | Full support | Rules in `.clinerules/` |
|
|
314
|
+
| **Roo Code** | Full support | Commands in `.roo/commands/` |
|
|
315
|
+
| **OpenAI Codex** | Full support | Config in `.codex/` |
|
|
316
|
+
| **OpenCode** | Full support | Agents in `.opencode/agent/` |
|
|
309
317
|
|
|
310
318
|
---
|
|
311
319
|
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Building phase agent - execute bolts through DDD stages (model, test, implement)
|
|
3
|
+
---
|
|
4
|
+
|
|
1
5
|
# Activate Construction Agent
|
|
2
6
|
|
|
3
7
|
**Command**: `/specsmd-construction-agent`
|
|
@@ -25,7 +29,7 @@ You are now the **Construction Agent** for specsmd AI-DLC.
|
|
|
25
29
|
1. **Read Schema**: `.specsmd/aidlc/memory-bank.yaml`
|
|
26
30
|
2. **Verify Unit**: Check unit exists and has completed inception
|
|
27
31
|
3. **Load Bolts**: Find bolts for this unit
|
|
28
|
-
4. **Determine State**: Check which bolts are planned/in-progress/
|
|
32
|
+
4. **Determine State**: Check which bolts are planned/in-progress/complete
|
|
29
33
|
5. **Present Menu or Continue**: Show status or continue active bolt
|
|
30
34
|
|
|
31
35
|
---
|
|
@@ -81,13 +81,14 @@ schema:
|
|
|
81
81
|
story-index: "memory-bank/story-index.md"
|
|
82
82
|
inception-log: "memory-bank/intents/{intent-name}/inception-log.md"
|
|
83
83
|
construction-log: "memory-bank/intents/{intent-name}/units/{unit-name}/construction-log.md"
|
|
84
|
+
decision-index: "memory-bank/standards/decision-index.md"
|
|
84
85
|
|
|
85
86
|
# Agent Ownership
|
|
86
87
|
# Note: Both Inception and Construction can plan/create bolts
|
|
87
88
|
# Inception: initial planning, Construction: replanning during execution
|
|
88
89
|
ownership:
|
|
89
90
|
inception: [intents, units, stories, story-index, bolts] # Plans bolts initially
|
|
90
|
-
construction: [units, bolts]
|
|
91
|
+
construction: [units, bolts, decision-index] # Executes, can replan bolts, maintains decision index
|
|
91
92
|
operations: [operations]
|
|
92
93
|
|
|
93
94
|
# Global Story Index Options
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
* - Timestamp format (ISO 8601 without milliseconds)
|
|
11
11
|
*
|
|
12
12
|
* Usage:
|
|
13
|
-
* node .specsmd/scripts/artifact-validator.js
|
|
14
|
-
* node .specsmd/scripts/artifact-validator.js --json
|
|
15
|
-
* node .specsmd/scripts/artifact-validator.js --fix
|
|
13
|
+
* node .specsmd/aidlc/scripts/artifact-validator.js
|
|
14
|
+
* node .specsmd/aidlc/scripts/artifact-validator.js --json
|
|
15
|
+
* node .specsmd/aidlc/scripts/artifact-validator.js --fix
|
|
16
16
|
*
|
|
17
17
|
* Cross-platform: Works on Linux, macOS, Windows via Node.js
|
|
18
18
|
*/
|
|
@@ -115,11 +115,11 @@
|
|
|
115
115
|
*
|
|
116
116
|
* From agent skill (bolt-start.md Step 10):
|
|
117
117
|
*
|
|
118
|
-
* node .specsmd/scripts/bolt-complete.js 016-analytics-tracker
|
|
118
|
+
* node .specsmd/aidlc/scripts/bolt-complete.js 016-analytics-tracker
|
|
119
119
|
*
|
|
120
120
|
* With optional stage name:
|
|
121
121
|
*
|
|
122
|
-
* node .specsmd/scripts/bolt-complete.js 016-analytics-tracker --last-stage test
|
|
122
|
+
* node .specsmd/aidlc/scripts/bolt-complete.js 016-analytics-tracker --last-stage test
|
|
123
123
|
*
|
|
124
124
|
* ═══════════════════════════════════════════════════════════════════════════════
|
|
125
125
|
*/
|
|
@@ -510,6 +510,29 @@ async function updateIntentStatus(bolt) {
|
|
|
510
510
|
return { updated: false };
|
|
511
511
|
}
|
|
512
512
|
|
|
513
|
+
/**
|
|
514
|
+
* Validate bolt status before allowing completion
|
|
515
|
+
*
|
|
516
|
+
* Pre-flight checks to ensure:
|
|
517
|
+
* - Bolt is in "in-progress" status (can't complete already-complete or not-started bolts)
|
|
518
|
+
* - Bolt has not already been completed
|
|
519
|
+
*/
|
|
520
|
+
function validateBoltStatus(bolt) {
|
|
521
|
+
const status = bolt.frontmatter.status || 'unknown';
|
|
522
|
+
|
|
523
|
+
// Cannot complete a bolt that's already complete
|
|
524
|
+
if (status === 'complete') {
|
|
525
|
+
return { valid: false, reason: 'Bolt is already complete' };
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
// Bolt should be in-progress before completing
|
|
529
|
+
if (status !== 'in-progress') {
|
|
530
|
+
return { valid: false, reason: `Bolt status is "${status}", expected "in-progress"` };
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
return { valid: true };
|
|
534
|
+
}
|
|
535
|
+
|
|
513
536
|
/**
|
|
514
537
|
* Main: Mark bolt as complete with all dependent updates
|
|
515
538
|
*/
|
|
@@ -522,6 +545,14 @@ async function boltMarkComplete(boltId, lastStage) {
|
|
|
522
545
|
// Step 1: Read bolt file
|
|
523
546
|
const bolt = await readBolt(boltId);
|
|
524
547
|
|
|
548
|
+
// Step 1.5: Validate bolt status before proceeding
|
|
549
|
+
const validation = validateBoltStatus(bolt);
|
|
550
|
+
if (!validation.valid) {
|
|
551
|
+
console.error(`\n${colors.red}Error:${colors.reset} ${validation.reason}`);
|
|
552
|
+
console.error(`${colors.dim}Use bolt-status command to check current state.${colors.reset}`);
|
|
553
|
+
return 1;
|
|
554
|
+
}
|
|
555
|
+
|
|
525
556
|
console.log(`${colors.dim}Bolt: ${bolt.id}${colors.reset}`);
|
|
526
557
|
console.log(`${colors.dim}Intent: ${bolt.frontmatter.intent}${colors.reset}`);
|
|
527
558
|
console.log(`${colors.dim}Unit: ${bolt.frontmatter.unit}${colors.reset}`);
|
|
@@ -537,11 +568,11 @@ async function boltMarkComplete(boltId, lastStage) {
|
|
|
537
568
|
console.log(`\n${colors.dim}Stories: ${colors.green}${storyResults.updated} updated${colors.reset}, ${colors.dim}${storyResults.skipped} skipped${colors.reset}${storyResults.errors > 0 ? `, ${colors.red}${storyResults.errors} errors${colors.reset}` : ''}\n`);
|
|
538
569
|
|
|
539
570
|
// Step 4: Update unit status
|
|
540
|
-
|
|
571
|
+
await updateUnitStatus(bolt);
|
|
541
572
|
console.log();
|
|
542
573
|
|
|
543
574
|
// Step 5: Update intent status
|
|
544
|
-
|
|
575
|
+
await updateIntentStatus(bolt);
|
|
545
576
|
console.log();
|
|
546
577
|
|
|
547
578
|
// Final summary
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
* Status must cascade correctly: Bolt complete → Stories complete → Unit complete → Intent complete
|
|
8
8
|
*
|
|
9
9
|
* Usage:
|
|
10
|
-
* node .specsmd/scripts/status-integrity.js
|
|
11
|
-
* node .specsmd/scripts/status-integrity.js --fix
|
|
10
|
+
* node .specsmd/aidlc/scripts/status-integrity.js
|
|
11
|
+
* node .specsmd/aidlc/scripts/status-integrity.js --fix
|
|
12
12
|
*
|
|
13
13
|
* Cross-platform: Works on Linux, macOS, Windows via Node.js
|
|
14
14
|
*/
|
|
@@ -584,8 +584,8 @@ Options:
|
|
|
584
584
|
--help, -h Show this help message
|
|
585
585
|
|
|
586
586
|
Examples:
|
|
587
|
-
node .specsmd/scripts/status-integrity.js
|
|
588
|
-
node .specsmd/scripts/status-integrity.js --fix
|
|
587
|
+
node .specsmd/aidlc/scripts/status-integrity.js
|
|
588
|
+
node .specsmd/aidlc/scripts/status-integrity.js --fix
|
|
589
589
|
`);
|
|
590
590
|
process.exit(0);
|
|
591
591
|
}
|
|
@@ -194,7 +194,7 @@ If the bolt type specifies automatic validation criteria, follow those rules.
|
|
|
194
194
|
┌─────────────────────────────────────────────────────────────┐
|
|
195
195
|
│ FINAL STAGE DETECTED │
|
|
196
196
|
│ → Re-read Step 10 NOW │
|
|
197
|
-
│ → You MUST run: node .specsmd/scripts/bolt-complete.js
|
|
197
|
+
│ → You MUST run: node .specsmd/aidlc/scripts/bolt-complete.js │
|
|
198
198
|
│ → Do NOT manually edit story files │
|
|
199
199
|
└─────────────────────────────────────────────────────────────┘
|
|
200
200
|
```
|
|
@@ -245,7 +245,7 @@ Do NOT manually edit story files - the script handles everything.
|
|
|
245
245
|
**Run this command:**
|
|
246
246
|
|
|
247
247
|
```bash
|
|
248
|
-
node .specsmd/scripts/bolt-complete.js {bolt-id}
|
|
248
|
+
node .specsmd/aidlc/scripts/bolt-complete.js {bolt-id}
|
|
249
249
|
```
|
|
250
250
|
|
|
251
251
|
**What this command does (deterministically):**
|
|
@@ -81,7 +81,7 @@ Check for issues:
|
|
|
81
81
|
- **Unit**: `{unit-name}`
|
|
82
82
|
- **Intent**: `{intent-name}`
|
|
83
83
|
- **Type**: {bolt-type}
|
|
84
|
-
- **Status**: {planned|in-progress|
|
|
84
|
+
- **Status**: {planned|in-progress|complete|blocked}
|
|
85
85
|
|
|
86
86
|
### Progress
|
|
87
87
|
[██████████░░░░░░░░░░] 50% (2/4 stages)
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
# Skill: Prototype Apply
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Goal
|
|
6
|
+
|
|
7
|
+
Apply a vibe-coded prototype's design and components to the real implementation during bolt execution. This skill bridges the gap between extracted prototype specifications and production code.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
Use this skill when:
|
|
14
|
+
- A bolt references a prototype in its scope
|
|
15
|
+
- You need to implement UI that matches a prototype screenshot
|
|
16
|
+
- The design system from vibe-to-spec should be applied to code
|
|
17
|
+
- Visual acceptance criteria reference prototype screens
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Input
|
|
22
|
+
|
|
23
|
+
- **Required**: Bolt ID currently being executed
|
|
24
|
+
- **Required**: Prototype reference (path or name)
|
|
25
|
+
- **Optional**: Specific screen to implement
|
|
26
|
+
- **Optional**: Component to focus on
|
|
27
|
+
|
|
28
|
+
**Prerequisite**: The **vibe-to-spec** skill must have been run on this prototype during Inception.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Process
|
|
33
|
+
|
|
34
|
+
### Step 1: Load Prototype Context
|
|
35
|
+
|
|
36
|
+
Load all relevant prototype artifacts:
|
|
37
|
+
|
|
38
|
+
```text
|
|
39
|
+
## Loading Prototype Context
|
|
40
|
+
|
|
41
|
+
Prototype: {prototype-name}
|
|
42
|
+
Bolt: {bolt-id}
|
|
43
|
+
|
|
44
|
+
### Available Artifacts
|
|
45
|
+
- [ ] design-system.md - {loaded/not found}
|
|
46
|
+
- [ ] component-catalog.md - {loaded/not found}
|
|
47
|
+
- [ ] screen-inventory.md - {loaded/not found}
|
|
48
|
+
- [ ] user-flows.md - {loaded/not found}
|
|
49
|
+
|
|
50
|
+
### Bolt Scope Match
|
|
51
|
+
Matching prototype screens to bolt scope:
|
|
52
|
+
- {screen-1} → {story-1}
|
|
53
|
+
- {screen-2} → {story-2}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
### Step 2: Extract Implementation Requirements
|
|
59
|
+
|
|
60
|
+
From the prototype artifacts, extract what needs to be built:
|
|
61
|
+
|
|
62
|
+
```markdown
|
|
63
|
+
## Implementation Requirements
|
|
64
|
+
|
|
65
|
+
### Screen: {screen-name}
|
|
66
|
+
**Prototype Source**: {screenshot-path}
|
|
67
|
+
**Target Location**: {src/path/to/component}
|
|
68
|
+
|
|
69
|
+
### Design Tokens to Apply
|
|
70
|
+
```typescript
|
|
71
|
+
// From prototype design-system.md
|
|
72
|
+
const tokens = {
|
|
73
|
+
colors: {
|
|
74
|
+
primary: '{hex}',
|
|
75
|
+
secondary: '{hex}',
|
|
76
|
+
background: '{hex}',
|
|
77
|
+
// ...
|
|
78
|
+
},
|
|
79
|
+
typography: {
|
|
80
|
+
fontFamily: '{font}',
|
|
81
|
+
// ...
|
|
82
|
+
},
|
|
83
|
+
spacing: {
|
|
84
|
+
xs: '{px}',
|
|
85
|
+
// ...
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Components to Implement
|
|
91
|
+
| Component | Prototype Ref | Target File | Status |
|
|
92
|
+
|-----------|---------------|-------------|--------|
|
|
93
|
+
| {Sidebar} | screen-2.png | Sidebar.tsx | pending |
|
|
94
|
+
| {ChatList} | screen-2.png | ChatList.tsx | pending |
|
|
95
|
+
| {MessageBubble} | screen-3.png | MessageBubble.tsx | pending |
|
|
96
|
+
|
|
97
|
+
### Layout Structure
|
|
98
|
+
```
|
|
99
|
+
{ASCII representation of layout from prototype}
|
|
100
|
+
┌─────────────────────────────────────────┐
|
|
101
|
+
│ Header │
|
|
102
|
+
├──────────┬──────────────────────────────┤
|
|
103
|
+
│ Sidebar │ Main Content │
|
|
104
|
+
│ │ │
|
|
105
|
+
│ │ │
|
|
106
|
+
├──────────┴──────────────────────────────┤
|
|
107
|
+
│ Footer / Input Area │
|
|
108
|
+
└─────────────────────────────────────────┘
|
|
109
|
+
```
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
### Step 3: Map to Project Standards
|
|
115
|
+
|
|
116
|
+
Cross-reference with project standards:
|
|
117
|
+
|
|
118
|
+
```markdown
|
|
119
|
+
## Standards Alignment
|
|
120
|
+
|
|
121
|
+
### Tech Stack Match
|
|
122
|
+
- **Prototype suggests**: {vanilla CSS / Tailwind / etc.}
|
|
123
|
+
- **Project standard**: {from tech-stack.md}
|
|
124
|
+
- **Action**: {adapt prototype to use project's styling approach}
|
|
125
|
+
|
|
126
|
+
### Component Library Match
|
|
127
|
+
- **Prototype components**: {custom / Bootstrap / etc.}
|
|
128
|
+
- **Project standard**: {from tech-stack.md}
|
|
129
|
+
- **Action**: {map prototype components to project's component library}
|
|
130
|
+
|
|
131
|
+
### Coding Standards
|
|
132
|
+
- **File naming**: {from coding-standards.md}
|
|
133
|
+
- **Component structure**: {from coding-standards.md}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
### Step 4: Generate Implementation Code
|
|
139
|
+
|
|
140
|
+
Generate code that matches the prototype while following project standards.
|
|
141
|
+
|
|
142
|
+
**IMPORTANT**: If the `/frontend-design` skill is available, invoke it for high-quality, production-grade frontend code that avoids generic AI aesthetics. The frontend-design skill specializes in creating distinctive, polished UI components.
|
|
143
|
+
|
|
144
|
+
**For each component**:
|
|
145
|
+
|
|
146
|
+
1. **Analyze prototype visually** (use screenshot)
|
|
147
|
+
2. **Extract structure from HTML** (if available)
|
|
148
|
+
3. **Apply project's styling approach**
|
|
149
|
+
4. **Ensure accessibility**
|
|
150
|
+
5. **Add responsive behavior**
|
|
151
|
+
|
|
152
|
+
```typescript
|
|
153
|
+
// Example output structure
|
|
154
|
+
/**
|
|
155
|
+
* Component: {ComponentName}
|
|
156
|
+
* Prototype: {screenshot-reference}
|
|
157
|
+
*
|
|
158
|
+
* Visual acceptance criteria:
|
|
159
|
+
* - {criterion from prototype}
|
|
160
|
+
* - {criterion from prototype}
|
|
161
|
+
*/
|
|
162
|
+
export function ComponentName({ props }: Props) {
|
|
163
|
+
// Implementation matching prototype
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
### Step 5: Visual Verification Checklist
|
|
170
|
+
|
|
171
|
+
Create a verification checklist comparing implementation to prototype:
|
|
172
|
+
|
|
173
|
+
```markdown
|
|
174
|
+
## Visual Verification: {screen-name}
|
|
175
|
+
|
|
176
|
+
### Layout
|
|
177
|
+
- [ ] Overall structure matches prototype
|
|
178
|
+
- [ ] Spacing between elements is consistent
|
|
179
|
+
- [ ] Responsive breakpoints work correctly
|
|
180
|
+
|
|
181
|
+
### Colors
|
|
182
|
+
- [ ] Primary color matches: {hex}
|
|
183
|
+
- [ ] Background color matches: {hex}
|
|
184
|
+
- [ ] Text colors match design system
|
|
185
|
+
|
|
186
|
+
### Typography
|
|
187
|
+
- [ ] Font family applied correctly
|
|
188
|
+
- [ ] Font sizes match design system
|
|
189
|
+
- [ ] Font weights are correct
|
|
190
|
+
|
|
191
|
+
### Components
|
|
192
|
+
- [ ] {Component-1} matches prototype
|
|
193
|
+
- [ ] {Component-2} matches prototype
|
|
194
|
+
- [ ] Interactive states (hover, focus, active) implemented
|
|
195
|
+
|
|
196
|
+
### Interactions
|
|
197
|
+
- [ ] {Interaction-1} works as shown in flow
|
|
198
|
+
- [ ] {Interaction-2} works as shown in flow
|
|
199
|
+
|
|
200
|
+
### Screenshots for Comparison
|
|
201
|
+
- Prototype: `{prototype-path}`
|
|
202
|
+
- Implementation: `{screenshot after implementation}`
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## Output
|
|
208
|
+
|
|
209
|
+
### Implementation Summary
|
|
210
|
+
|
|
211
|
+
```markdown
|
|
212
|
+
## Prototype Applied: {screen-name}
|
|
213
|
+
|
|
214
|
+
### Components Implemented
|
|
215
|
+
| Component | File | Lines | Status |
|
|
216
|
+
|-----------|------|-------|--------|
|
|
217
|
+
| {Sidebar} | src/components/Sidebar.tsx | 45-120 | complete |
|
|
218
|
+
| {ChatList} | src/components/ChatList.tsx | 1-80 | complete |
|
|
219
|
+
|
|
220
|
+
### Design System Applied
|
|
221
|
+
- Color tokens: {n} applied
|
|
222
|
+
- Typography: {n} styles applied
|
|
223
|
+
- Spacing: {n} values applied
|
|
224
|
+
|
|
225
|
+
### Deviations from Prototype
|
|
226
|
+
| Aspect | Prototype | Implementation | Reason |
|
|
227
|
+
|--------|-----------|----------------|--------|
|
|
228
|
+
| {color} | #xxx | #yyy | Project standard |
|
|
229
|
+
| {font} | Inter | system-ui | Performance |
|
|
230
|
+
|
|
231
|
+
### Visual Verification
|
|
232
|
+
- [ ] Side-by-side comparison reviewed
|
|
233
|
+
- [ ] Responsive behavior verified
|
|
234
|
+
- [ ] Accessibility checked
|
|
235
|
+
|
|
236
|
+
### Files Modified
|
|
237
|
+
- `{file-1}` - {description}
|
|
238
|
+
- `{file-2}` - {description}
|
|
239
|
+
|
|
240
|
+
### Next Steps
|
|
241
|
+
1 - Continue with next screen
|
|
242
|
+
2 - Run visual regression tests
|
|
243
|
+
3 - Review with stakeholder
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## Integration with Bolt Workflow
|
|
249
|
+
|
|
250
|
+
### During DDD Construction Bolt
|
|
251
|
+
|
|
252
|
+
In the **Implement** stage:
|
|
253
|
+
1. Load prototype context for relevant screens
|
|
254
|
+
2. Generate components matching prototype
|
|
255
|
+
3. Apply design system tokens
|
|
256
|
+
4. Create visual verification checklist
|
|
257
|
+
|
|
258
|
+
### During Simple Construction Bolt
|
|
259
|
+
|
|
260
|
+
In the **Implement** stage:
|
|
261
|
+
1. Reference prototype for UI components
|
|
262
|
+
2. Use extracted design tokens
|
|
263
|
+
3. Follow component catalog structure
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
## Visual Diff Support
|
|
268
|
+
|
|
269
|
+
When available, use UI diff tools to compare:
|
|
270
|
+
|
|
271
|
+
```text
|
|
272
|
+
## Visual Diff Report
|
|
273
|
+
|
|
274
|
+
### Screen: {screen-name}
|
|
275
|
+
- Prototype: {prototype-screenshot}
|
|
276
|
+
- Implementation: {current-screenshot}
|
|
277
|
+
- Diff: {highlighted differences}
|
|
278
|
+
|
|
279
|
+
### Discrepancies Found
|
|
280
|
+
1. {location}: {expected} vs {actual}
|
|
281
|
+
2. {location}: {expected} vs {actual}
|
|
282
|
+
|
|
283
|
+
### Action Required
|
|
284
|
+
- [ ] Fix discrepancy 1
|
|
285
|
+
- [ ] Fix discrepancy 2
|
|
286
|
+
- [ ] Accept as intentional deviation
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## Test Contract
|
|
292
|
+
|
|
293
|
+
```yaml
|
|
294
|
+
input:
|
|
295
|
+
- Bolt ID with prototype reference
|
|
296
|
+
- Prototype artifacts from vibe-to-spec
|
|
297
|
+
output:
|
|
298
|
+
- Implementation code matching prototype
|
|
299
|
+
- Visual verification checklist
|
|
300
|
+
- Deviation documentation
|
|
301
|
+
integration:
|
|
302
|
+
- Works within bolt execution flow
|
|
303
|
+
- References design-system.md
|
|
304
|
+
- Follows project standards
|
|
305
|
+
```
|
|
@@ -289,10 +289,23 @@ Establish execution order based on dependencies:
|
|
|
289
289
|
|
|
290
290
|
Check the plan against:
|
|
291
291
|
|
|
292
|
+
**Frontmatter Validation (CRITICAL - check each bolt.md)**:
|
|
293
|
+
|
|
294
|
+
- [ ] `id` - Bolt identifier present
|
|
295
|
+
- [ ] `unit` - Parent unit ID present
|
|
296
|
+
- [ ] `intent` - Parent intent ID present
|
|
297
|
+
- [ ] `type` - Bolt type specified (`ddd-construction-bolt` or `simple-construction-bolt`)
|
|
298
|
+
- [ ] `status` - Set to `planned`
|
|
299
|
+
- [ ] `stories` - **Array of story IDs included** (NOT just in body, MUST be in frontmatter)
|
|
300
|
+
- [ ] `created` - Timestamp present
|
|
301
|
+
- [ ] `requires_bolts` - Dependency array present (can be empty `[]`)
|
|
302
|
+
- [ ] `enables_bolts` - Enables array present (can be empty `[]`)
|
|
303
|
+
- [ ] `complexity` - Complexity block with all 4 fields
|
|
304
|
+
|
|
305
|
+
**Content Validation**:
|
|
306
|
+
|
|
292
307
|
- [ ] All stories are assigned to bolts
|
|
293
308
|
- [ ] Dependencies are respected (bolt-to-bolt AND unit-to-unit)
|
|
294
|
-
- [ ] All dependencies documented in frontmatter
|
|
295
|
-
- [ ] Complexity assessment included for each bolt
|
|
296
309
|
- [ ] Each bolt has clear outputs
|
|
297
310
|
- [ ] No bolt is too large (max 5-6 stories)
|
|
298
311
|
- [ ] No circular dependencies exist
|