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。

原文を見る