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 |

단일 명령 기능 구현으로 간소화된 UI 개발 워크플로우. 자동화: 개발 서버, 브라우저, 확인, 오류 수정, 반복 루프. **핵심 명령:** "다음 기능 구현" 또는 "[기능 설명] 구현" **기능:** 1. 개발 서버 시작(package.json에서 포트 자동 감지) 2. 브라우저 실행(기본적으로 표시됨, --headless 사용 가능) 3. 프론트엔드 디자인 스킬을 통한 기능 구현 4. 확인: 콘솔 오류, TS 오류, 네트워크 오류, 시각적 일치 5. 반복적으로 수정합니다(최대 5회 반복). 6. 완료를 보고하거나 세부 보고서로 에스컬레이션합니다. **트리거:** - "다음 기능 구현", "히어로 섹션 구현" - "이 구현을 확인하세요", "UI를 확인하세요" - "오류를 수정하세요", "이것을 반복하세요" - "개발 서버 시작", "서버 관리" 출처: multicam/qara.

원본 보기