Menu
フロントエンド開発の TDD ワークフロー。Red-Green-Refactor サイクル、アウトサイドインアプローチ、コンポーネント設計。React/TypeScript のフロントエンド実装時に使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | developing-frontend |
| description | フロントエンド開発の TDD ワークフロー。Red-Green-Refactor サイクル、アウトサイドインアプローチ、コンポーネント設計。React/TypeScript のフロントエンド実装時に使用。 |
TDD サイクルに従ったフロントエンド開発を支援します。
Red-Green-Refactor サイクルを厳密に実行：
# 全テスト実行
cd apps/frontend && npm run test
# ウォッチモードでテスト実行
cd apps/frontend && npm run test:watch
# テストカバレッジ確認
cd apps/frontend && npm run test:coverage
# E2E テスト実行
cd apps/frontend && npm run test:e2e
長時間の開発セッションでは Context limit reached エラーを回避するため、タスクの区切りごとに /compact を実施してコンテキストを圧縮する。
/compact を実施するタイミング:
運用ルール:
/compact 実施前に、現在の作業状態と次のタスクをメモとして出力する/compact 実施後、次のタスクの作業を継続する/compact を検討するバックエンド開発の TDD ワークフロー。Red-Green-Refactor サイクル、インサイドアウトアプローチ、品質チェックリスト。Java/Spring Boot のバックエンド実装時に使用。
設計ドキュメントの一覧表示、進捗確認、内容参照、インデックス更新、Markdown Lint を実行。ドキュメント管理や整備時に使用。
分析フェーズ全体のワークフローをオーケストレーション。要件定義から非機能要件まで各 analyzing-* スキルの実行順序を案内。分析フェーズの開始や全体像の把握時に使用。
開発フェーズ全体の TDD ワークフローをオーケストレーション。バックエンド・フロントエンド開発の進め方、Codex 分業体制を案内。開発フェーズの開始や開発手法の確認時に使用。
計画・進捗管理フェーズ全体のワークフローをオーケストレーション。リリース計画、GitHub Project 同期、進捗追跡の実行順序を案内。プロジェクト管理の開始や全体像の把握時に使用。
アプリケーションのリリースワークフロー。品質ゲート、バージョンバンプ、CHANGELOG 生成、git commit + tag を一貫実行。リリース作業やバージョン管理時に使用。