design-implementation

SKILL.md

| "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 |

| tools/playwright-runner.ts | Browser automation (screenshot, console, network) | | tools/server-manager.ts | Dev server lifecycle (start, stop, detect port) |

| frontend-design | Initial implementation | | engineer agent | Escalate complex bugs | | design-iterator agent | Multiple visual refinements |

Streamlined UI development workflow with single-command feature implementation. Automates: dev server, browser, verification, error fixing, iteration loop. **Core Command:** "implement next feature" or "implement [feature description]" **What It Does:** 1. Starts dev server (auto-detects port from package.json) 2. Launches browser (visible by default, --headless available) 3. Implements feature via frontend-design skill 4. Verifies: console errors, TS errors, network failures, visual match 5. Fixes iteratively (max 5 iterations) 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" Source: multicam/qara.

View raw