SKILL.md
Workflow Routing
| Intent | Workflow |
|---|---|
| "implement feature", "build the X" | workflows/implement-feature.md |
| "verify", "check", "screenshot" | workflows/verify-visual.md |
| "fix errors", "fix the issues" | workflows/fix-errors.md |
| "start server", "stop server" | workflows/manage-server.md |
| "test interactions", "click test" | workflows/test-interactions.md |
Quick Start
# Basic usage
"implement the login form based on the Figma design"
# With specific file
"implement the feature described in thoughts/features/hero-section.md"
# Headless mode (CI/testing)
"implement next feature --headless"
# Just verify current state
"verify the current implementation"Configuration
Edit config.json in this skill directory:
{
"browser": {
"headless": false,
"viewport": { "width": 1280, "height": 720 }
},
"server": {
"port": "auto",
"startCommand": "auto",
"hmrDelay": 2000
},
"iteration": {
"maxIterations": 5,
"layoutTolerance": 0.95
},
"figma": {
"enabled": true
}
}Tools
| Tool | Purpose |
|---|---|
tools/playwright-runner.ts |
Browser automation (screenshot, console, network) |
tools/server-manager.ts |
Dev server lifecycle (start, stop, detect port) |
State Tracking
state.json tracks current feature progress:
{
"currentFeature": "hero-section",
"iteration": 2,
"status": "fixing",
"errors": ["console: Failed to load image"],
"lastScreenshot": "history/hero-section/iteration-2.png"
}Integration
| Skill/Agent | When Used |
|---|---|
frontend-design |
Initial implementation |
engineer agent |
Escalate complex bugs |
design-iterator agent |
Multiple visual refinements |
History
Each feature creates artifacts in history/{feature-id}/:
spec.md- Original feature specificationiteration-{n}.png- Screenshots per iterationfigma-reference.png- Design reference (if Figma link provided)errors.log- Captured errorsreport.md- Final completion report
Note: history/ is gitignored.