Skill.md検索

ナビゲーション設定（navigation.ts）とルーティング（App.tsx）を自動で追加し、新しい教材ページを作成できます。手作業の設定漏れを防げます。 CodeBlock、CodePreview、CodingChallenge（プレビュー付き）、Quiz、InfoBox など教材に必要なコンポーネントを含めたページテンプレートを自動生成できます。 ページ作成後、自動的にテスト（navigation.test.ts のページ数期待値更新）を実行し、ビルド検証までを一貫して行えます。 既存ページのパターンに準拠した統一的なページ構造を保ちながら、新規教材を効率的に追加できます。 React ベースの教材サイトで新しいコース・セクションを頻繁に追加する教育プラットフォーム運営者 ページ作成時の設定漏れやテスト漏れを減らしたい開発チーム CodeBlock やプレビュー機能を活用した対話的な教材を数多く作成したいコンテンツ制作者 統一されたコンポーネント構成を保ちながら教材を増やしたい教育サービス ページ作成6ステップ：(1) client/src/lib/navigation.ts にセクション（必要なら）とページ定義追加。(2) client/src/App.tsx に lazy import + Route 追加。(3) client/src/pages/{manual}/{section}/{PageName}.tsx ファイル作成（既存ページパターン準拠、step-badge と PageNavigation 含める）。(4) CodeBlock / CodePreview / CodingChallenge（preview=true で有効なJSX initialCode）/ Quiz / InfoBox / PageNavigation 要素を含める。(5) navigation.test.ts のページ数期待値更新。(6) ビルド + テスト通過確認。禁止パターン：CodingChallenge initialCode 内で /* */ コメント非使用、text-black / bg-white 直接使用禁止（CSS変数使用）、ポエム調コピー回避。

npx vitest runで Unit テスト（176 テスト）とnpx playwright testで E2E テスト（14 テスト）を一括実行し、全体的な品質を一度に確認できます。 テスト失敗時にエラーメッセージを自動分析し、原因（コード変更の影響・テスト期待値の不整合・環境問題）を特定して修正案を提示します。 E2E テスト実行時に dev サーバー（port 3000）をplaywright.config.tsで自動起動するため、手動サーバー起動の手間を削減できます。 テスト全通過まで修正→実行を繰り返し自動化し、手動確認の時間を短縮できます。 Unit テストと E2E テストの両方を管理している開発者 テスト失敗時の原因特定に時間がかかっている人 デプロイ前に品質保証を自動化したい人 Vitest と Playwright の両方を導入しているプロジェクトの開発者 実行手順は①npx vitest runで Unit テスト実行②npx playwright testで E2E テスト実行（dev サーバー必要）③失敗時にエラーメッセージを分析して原因特定④修正案を提示して修正⑤再度テスト実行して全通過確認です。テスト構成は Unit テストをclient/src/lib/*.test.ts（176 テスト）、E2E テストをe2e/*.spec.ts（14 テスト）で管理し、E2E は dev サーバー（port 3000）が必要でplaywright.config.tsで自動起動設定がされています。