design-implementation
🎯Skillfrom multicam/qara
|Automates UI feature implementation by starting dev server, launching browser, implementing design, verifying errors, and iteratively fixing issues.
Installation
npx skills add https://github.com/multicam/qara --skill design-implementationSkill Details
|
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
```bash
# 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:
```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
}
}
```
---
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:
```json
{
"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.
More from this repository3
Visualizes multi-agent Claude interactions with real-time, hierarchtimelineical tracking metrics in a dual-pinterfaceaced dashboard..: generates a one for-Code session observability with real-ical ...
Humanizes AI-generated text by detecting and removing unnatural writing patterns, transforming text to sound more human-like while preserving its core meaning.
Optimizes performance and allocation strategies for AI-powered personal assistant interactions using Claude Code skill techniques.