senior-frontend

シニアフロントエンド

React/Next.js アプリケーション向けのフロントエンド開発パターン、パフォーマンス最適化、自動化ツールです。プロジェクトのひな形を作成し、コンポーネントやフックを生成し、バンドルサイズを分析して、アクセシビリティとテストを組み込んだ React/Next.js のパターンを適用します。

主な機能

• プロジェクトのひな形作成 — TypeScript、Tailwind、および認証/API/フォーム/テスト/Storybook のオプション機能を備えた Next.js 14+（App Router）または React+Vite プロジェクトを生成します。
• コンポーネント生成 — 確立されたパターンに沿ったテストファイルや Storybook ストーリーファイルとともに、クライアント／サーバーコンポーネントやカスタムフックを生成します。
• バンドル分析 — package.json とインポートを静的にスキャンしてバンドルの健全性をスコア化し、容量の大きい依存関係と、より軽量な代替手段を提示します。
• React パターン — 複合コンポーネント、カスタムフック、レンダープロップ、再利用可能な状態共有パターンに対応します。
• Next.js の最適化 — サーバーコンポーネントとクライアントコンポーネント、画像の最適化、Suspense を使用した並列／ストリーミングデータ取得に対応します。
• アクセシビリティとテスト — セマンティック HTML、ARIA、キーボード操作、フォーカス、および React Testing Library によるコンポーネント／アクセシビリティテストに対応します。

使用する場面

• ベストプラクティスを取り入れた基盤が必要な、新しい React/Next.js プロジェクトを始めるとき。
• 既存のアプリにコンポーネント、フック、テスト／ストーリーのひな形を追加するとき。
• バンドルサイズを最適化したり、容量の大きい依存関係を診断したりするとき。
• アクセシブルでパフォーマンスに優れたサーバー／クライアントコンポーネントのアーキテクチャを実装するとき。
• React/TypeScript/アクセシビリティのベストプラクティスに照らして、フロントエンドコードをレビューするとき。

先に確認すること

ひな形の作成や生成を始める前に、以下の入力内容を確定してください。未指定または曖昧な項目が結果に影響する場合は質問し、影響しない場合は妥当なデフォルトを使用して、その内容を伝えてください。

• テンプレート： Next.js（App Router）と React+Vite のどちらか（--template。生成されるプロジェクト構成が異なります）。
• 機能： auth / api / forms / testing / storybook（--features。生成する内容を決定します）。
• 生成対象： 新しいプロジェクトか、既存アプリ内のコンポーネント／フックか（frontend_scaffolder と component_generator のどちらを選ぶかを決定します）。

すべてを一度に尋ねるのではなく、リクエストに関係する重要な項目を2つか3つ確認してください。ユーザーがすぐに結果を求めている場合は、結果を提示し、冒頭で前提を明記してください。

ツール

ツール	用途	コマンド
frontend_scaffolder.py	TypeScript + Tailwind とオプション機能を備えた Next.js または React プロジェクトのひな形を作成します	python scripts/frontend_scaffolder.py my-app --template nextjs --features auth,api
component_generator.py	オプションでテストや Storybook ストーリーを付けて、コンポーネント／フックを生成します	python scripts/component_generator.py ProductCard --type client --with-test --with-story
bundle_analyzer.py	package.json とインポートからバンドルの健全性をスコア化し、容量の大きい依存関係を提示します	python scripts/bundle_analyzer.py /path/to/project --verbose

参考資料

タスクに合った参考資料を読み込みます。このファイルは簡潔に保ち、詳細は必要に応じて確認してください。

• references/tooling-guide.md — スキャフォールディング、コンポーネント生成、バンドル分析の全ワークフロー、オプション一覧、生成される構成、スクリプトごとのフラグリファレンス、トラブルシューティング表、成功基準を記載しています。ツールの実行時や CLI フラグの設定時に読んでください。
• references/code-patterns.md — インライン React パターン（複合コンポーネント、フック、レンダープロップ）、Next.js の最適化（サーバー／クライアント、画像、データ取得）、アクセシビリティとテストのスニペット、Next.js の設定／Tailwind／TypeScript のクイックリファレンスを記載しています。コンポーネントの作成時やページの最適化時に読んでください。
• references/react_patterns.md — React パターンの詳細なライブラリです。コンポーネント／状態のアーキテクチャを設計する際に読んでください。
• references/nextjs_optimization_guide.md — Next.js のパフォーマンスとレンダリングに関する詳細なガイドです。Next.js アプリを調整する際に読んでください。
• references/frontend_best_practices.md — アクセシビリティ、テスト、フロントエンド全般のベストプラクティスガイドです。コンポーネントをリリースする前に読んでください。

対象範囲と制限事項

このスキルの対象範囲：

• TypeScript と Tailwind CSS を使用した React および Next.js プロジェクトのスキャフォールディング
• 確立されたパターンに沿ったコンポーネント、フック、テスト、Storybook ストーリーの生成
• package.json の依存関係の検査とインポートパターンのスキャンに基づく静的バンドル分析
• サーバーコンポーネント、画像の最適化、データ取得、アクセシビリティに関するフロントエンド固有のベストプラクティス

このスキルの対象外：

• バックエンド API の開発、データベーススキーマの設計、サーバーインフラストラクチャ — senior-backend と senior-fullstack を参照してください
• Cypress または Playwright を使用したエンドツーエンドテスト — senior-qa を参照してください
• CI/CD パイプラインの設定と Docker のデプロイ — senior-devops を参照してください
• セキュリティ脆弱性のスキャンと侵入テスト — senior-secops と senior-security を参照してください

統合ポイント

スキル	統合	データフロー
senior-fullstack	スキャフォールディングされたフロントエンドプロジェクトは、API レイヤーの設定にフルスタックプロジェクト用スキャフォールダーを使用します	フロントエンドプロジェクトの構成を project_scaffolder.py に渡し、バックエンド、Docker、CI/CD の各レイヤーを追加します
senior-backend	API データを使用するコンポーネントは、バックエンドスキルで定義された REST／GraphQL の規約に従います	バックエンド API のレスポンスタイプを、このスキルが生成するフロントエンドの types/ ディレクトリにインポートします
senior-qa	生成されるテストファイル（--with-test）では、QA スキルのテスト戦略の基盤と同じ Testing Library の規約を使用します	コンポーネントのテストファイルを QA スキルに引き渡し、統合テストと E2E テストのカバレッジを拡張します
senior-devops	バンドルアナライザーの出力をビルドパイプラインの最適化判断に活用します	バンドルの健全性スコアと依存関係の警告を、DevOps スキルで設定された CI 品質ゲートに渡します
senior-secops	依存関係の分析により、セキュリティ監査が必要なパッケージを特定します	bundle_analyzer.py による、サイズが大きい依存関係や古い依存関係の警告を受けて、セキュリティレビューのワークフローを開始します
code-reviewer	生成されるコンポーネントは、コードレビュースキルによる検証対象のパターンに従います	コードレビュースキルは、このスキルの参考資料で定義された React／TypeScript のベストプラクティスに照らして、生成されたコンポーネントをチェックします