name: base-react description: >- React(18/19)および Next.js コードの実装・リファクタリング・ デバッグ・テスト・レビュー時に使用する。 コンポーネントパターン、パフォーマンス最適化、テスト規約への参照を提供する。 user-invocable: false
React 言語コンテキスト
ワークスペースの React 固有のコンテキストを一元管理するリファレンススキル。 コンポーネントパターン・パフォーマンス最適化・テスト規約への参照を提供する。
参照ファイル
参照ファイルとその読み込みタイミングを次に示す。patterns は常に必要。
| 種別 | キー | パス | 読み込みタイミング |
|---|---|---|---|
| パターン | patterns |
./references/patterns.md |
すべての React ソースファイル(.tsx/.jsx)— 常に適用。 |
| コーディングスタイル | coding-style |
./references/coding-style.md |
ファイル・コンポーネント・フックの新規作成、命名・構成のレビュー時。 |
| フック | hooks |
./references/hooks.md |
useState/useEffect/メモ化/カスタムフックの実装・修正・レビュー時。 |
| セキュリティ | security |
./references/security.md |
ユーザー入力の描画・URL・Server Action・環境変数・認証を扱う時。 |
| パフォーマンス | performance |
./references/performance.md |
パフォーマンス改善・バンドル最適化・ウォーターフォール除去時。 |
| テスト | testing |
./references/testing.md |
tests/ 以下のすべてのテストファイル — 常に適用。 |
format と lint の実行
フォーマットと lint は以下の手順で実行する。
npx eslint --fix <対象> # 自動修正できる違反を解消
npx eslint <対象> # 残存違反を確認し、0 件になるまで手で修正
対象は自分が作成・編集したファイルに限定する(例: npx eslint src/components/Foo.tsx)。