Loading...
Loading...
Automated UI development loop: dev server + browser + implement + verify + fix. Launches dev server, implements via frontend-design skill, checks for errors (console, TypeScript, network), and iterates up to 5 times. USE WHEN: "implement next feature", "implement [description]", "verify the UI". NOT for one-off design/code tasks — use frontend-design directly for those. 6. Reports completion or escalates with detailed report **Triggers:** - "implement next feature", "implement the hero section" - "verify this implementation", "check the UI" - "fix the errors", "iterate on this" - "start dev server", "manage server"
npx skill4agent add multicam/qara design-implementation| Intent | Workflow |
|---|---|
| "implement feature", "build the X" | |
| "verify", "check", "screenshot" | |
| "fix errors", "fix the issues" | |
| "start server", "stop server" | |
| "test interactions", "click test" | |
# 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"config.json{
"browser": {
"headless": false,
"viewport": { "width": 1280, "height": 720 }
},
"server": {
"port": "auto",
"startCommand": "auto",
"hmrDelay": 2000
},
"iteration": {
"maxIterations": 5,
"layoutTolerance": 0.95
},
"figma": {
"enabled": true
}
}| Tool | Purpose |
|---|---|
| Browser automation (screenshot, console, network) |
| Dev server lifecycle (start, stop, detect port) |
state.json{
"currentFeature": "hero-section",
"iteration": 2,
"status": "fixing",
"errors": ["console: Failed to load image"],
"lastScreenshot": "history/hero-section/iteration-2.png"
}| Skill/Agent | When Used |
|---|---|
| Initial implementation |
| Escalate complex bugs |
| Multiple visual refinements |
history/{feature-id}/spec.mditeration-{n}.pngfigma-reference.pngerrors.logreport.mdhistory/