discover-frontend

フロントエンドスキルの検出

包括的なフロントエンド開発スキルを自動的に利用できるようにします。

このスキルが有効になるタイミング

次の作業を行うと、このスキルが自動的に有効になります。

• React コンポーネントの開発
• Next.js アプリケーションと App Router
• 状態管理（Context、Zustand、Redux）
• データ取得（SWR、React Query、Server Actions）
• フォームの処理と検証
• Web アクセシビリティ（WCAG、ARIA）
• フロントエンドのパフォーマンス最適化
• SEO とメタデータ
• UI/UX デザインの実装
• ターミナルユーザーインターフェース
• TUI
• Bubble Tea
• Ratatui
• ターミナル UI
• テキストベースのインターフェース
• ncurses

利用可能なスキル

クイックリファレンス

フロントエンドカテゴリには、2 つのサブカテゴリにわたる 16 個のスキル（＋ elegant-design）が含まれています。

フロントエンド（11 個のスキル）：

1. react-component-patterns - コンポーネントの設計、合成、フック、パフォーマンス
2. nextjs-app-router - Next.js 14+ App Router、サーバーコンポーネント、ルーティング
3. react-state-management - Context、Zustand、Redux Toolkit のパターン
4. react-data-fetching - SWR、React Query、Server Actions、データパターン
5. react-form-handling - React Hook Form、Zod による検証、フォームのパターン
6. web-accessibility - WCAG 2.1 AA 準拠、ARIA、キーボードナビゲーション
7. frontend-performance - バンドルの最適化、Core Web Vitals、コード分割
8. nextjs-seo - Next.js での SEO、メタデータ API、構造化データ
9. web-workers - Web Workers API、メッセージの受け渡し、計算処理のオフロード
10. browser-concurrency - Service Workers、SharedWorkers、Worklets、PWA
11. elegant-design/SKILL.md - 世界水準のアクセシブルなインターフェース（独立した Agent Skill）

TUI（5 個のスキル）： ../tui/INDEX.md を参照してください。

カテゴリの詳細をすべて読み込む

../frontend/INDEX.md を読む ../tui/INDEX.md を読む

よくあるワークフロー

新しい Next.js アプリケーション

順序：App Router → コンポーネント → データ取得

../frontend/nextjs-app-router.md を読む # ルーティングとレイアウトを設定 ../frontend/react-component-patterns.md を読む # コンポーネントを構築 ../frontend/react-data-fetching.md を読む # データを取得

洗練された UI デザイン

順序：デザインシステム → コンポーネント → アクセシビリティ

注：elegant-design は独立した Agent Skill として自動的に有効になります

デザイン中心の作業（shadcn/ui、アクセシブルなインターフェースなど）向け

../frontend/react-component-patterns.md を読む ../frontend/web-accessibility.md を読む

フォームの実装

順序：フォーム処理 → 状態管理

../frontend/react-form-handling.md を読む # フォームを構築 ../frontend/react-state-management.md を読む # フォームの状態を管理

本番環境向けの最適化

順序：パフォーマンス → アクセシビリティ → SEO

../frontend/frontend-performance.md を読む # バンドルを最適化 ../frontend/web-accessibility.md を読む # アクセシビリティを確保 ../frontend/nextjs-seo.md を読む # SEO を最適化

CPU 負荷の高い機能と PWA

順序：Workers → 並行処理 → パフォーマンス

../frontend/web-workers.md を読む # 負荷の高い計算処理をオフロード ../frontend/browser-concurrency.md を読む # Service Workers、オフラインサポート ../frontend/frontend-performance.md を読む # 全体的なパフォーマンスを最適化

スキル選択ガイド

React コンポーネントのパターン → react-component-patterns.md:

• コンポーネントのアーキテクチャと合成
• カスタムフック
• パフォーマンスの最適化（memo、useMemo、useCallback）
• デザインパターン（複合コンポーネント、レンダープロパティ、HOC）

Next.js App Router → nextjs-app-router.md:

• サーバーコンポーネントとクライアントコンポーネントの違い
• ルーティングとレイアウト
• データ取得のパターン
• ストリーミングとSuspense
• ルートハンドラーとAPIルート

状態管理 → react-state-management.md:

• Contextと外部状態管理ライブラリの使い分け
• シンプルなグローバル状態にはZustand
• 複雑な状態にはRedux Toolkit
• サーバー状態とクライアント状態

データ取得 → react-data-fetching.md:

• クライアント側のデータ取得にはSWR
• 高度なパターンにはReact Query（TanStack Query）
• Next.js Server Actions
• データ変更のパターン
• キャッシュ戦略

フォーム → react-form-handling.md:

• パフォーマンス向上にはReact Hook Form
• バリデーションにはZod
• フォーム状態の管理
• エラー処理
• ファイルのアップロード

アクセシビリティ → web-accessibility.md:

• WCAG 2.1 AAへの準拠
• ARIA属性
• キーボード操作
• スクリーンリーダーのサポート
• 色のコントラストとフォーカス管理

パフォーマンス → frontend-performance.md:

• バンドルサイズの最適化
• コード分割と遅延読み込み
• Core Web Vitals
• 画像の最適化
• フォントの最適化
• 実行時パフォーマンス

SEO → nextjs-seo.md:

• Next.js Metadata API
• Open GraphとTwitterカード
• 構造化データ（JSON-LD）
• サイトマップとrobots.txt
• 動的メタデータ

Web Workers → web-workers.md:

• 負荷の高い計算処理のオフロード
• Web Workers APIとメッセージの受け渡し
• コピーなしのデータ転送に使うTransferableオブジェクト
• カスタムフックによるReactとの連携
• 並列処理のためのワーカープール
• TypeScriptの型安全性

ブラウザーの並行処理 → browser-concurrency.md:

• オフラインサポートとPWA向けのService Workers
• タブ間で状態を共有するSharedWorkers
• Audio／Paint／Animation Worklets
• バックグラウンド同期とプッシュ通知
• キャッシュ戦略
• タブ間のメッセージングに使うBroadcastChannel

他のスキルとの連携

フロントエンドスキルは、以下と組み合わせて使用することがよくあります。

APIスキル（discover-api）:

• REST APIの利用
• GraphQLクライアントとの連携
• UIでのAPIエラー処理
• 認証フロー

テストスキル（discover-testing）:

• コンポーネントテスト
• Playwrightを使ったE2Eテスト
• ビジュアルリグレッションテスト
• アクセシビリティテスト

デザイン（elegant-design Agent Skill）:

• shadcn/uiコンポーネント
• アクセシブルなデザインパターン
• チャット／ターミナル／コードのUI
• ストリーミングインターフェース
• デザインシステム

データベーススキル（discover-database）:

• データベースクエリを使ったServer Actions
• Server ComponentsでのORM連携
• リアルタイムのデータ更新

デプロイスキル（discover-deployment）:

• Vercelへのデプロイ
• Netlifyへのデプロイ
• パフォーマンスの監視
• CDNの設定

段階的な読み込み

このゲートウェイスキルを使うと、段階的に読み込めます。

• レベル1：ゲートウェイが自動的に読み込まれます（現在ここです）
• レベル2：カテゴリのINDEX.md（約4Kトークン）を読み込み、概要全体を確認します
• レベル3：必要に応じて個別のスキル（それぞれ約3～4Kトークン）を読み込みます

コンテキストの合計：2K + 4K + スキル（複数可）= 6～12Kトークン。インデックス全体を読む場合の25K+トークンと比べて節約できます。

クイックスタートの例

「App RouterでNext.jsアプリを構築する」: ../frontend/nextjs-app-router.mdを読み込みます。

「再利用可能なReactコンポーネントを作成する」: ../frontend/react-component-patterns.mdを読み込みます。

「グローバルな状態管理を実装する」: ../frontend/react-state-management.mdを読み込みます。

「バリデーション付きのフォームを作成する」: ../frontend/react-form-handling.mdを読み込みます。

「アプリのパフォーマンスを最適化する」: ../frontend/frontend-performance.mdを読み込みます。

「アプリをアクセシブルにする」: ../frontend/web-accessibility.mdを読み込みます。

「SEOを改善する」: ../frontend/nextjs-seo.mdを読み込みます。

「負荷の高い計算処理をオフロードする」: ../frontend/web-workers.mdを読み込みます。

「オフライン対応のPWAを構築する」: ../frontend/browser-concurrency.mdを読み込みます。

React と Next.js の選択

React（Vite）を使用する場合：

• SPA やクライアント主体のアプリを構築する
• SSR や SSG が不要
• ルーティングを完全に制御したい
• コンポーネントライブラリを構築する

Next.js を使用する場合：

• SEO（サーバーサイドレンダリング）が必要
• ファイルベースのルーティングを使用したい
• API ルートが必要
• フルスタックアプリを構築する
• すぐに最適なパフォーマンスを実現したい

状態管理の選択

コンポーネントの状態（useState）を使用する場合：

• 状態がコンポーネント内に限定される
• 共有する必要のないシンプルな状態

Context を使用する場合：

• 少数のコンポーネント間で状態を共有する
• テーマ、認証、ユーザー設定
• 更新頻度が高くない

Zustand を使用する場合：

• グローバル状態が必要
• シンプルな API を使いたい
• 状態の更新頻度が中程度

Redux Toolkit を使用する場合：

• 複雑な状態ロジック
• ミドルウェア（sagas、thunks）が必要
• 確立されたパターンを持つ大規模チーム
• タイムトラベルデバッグが必要

詳しいガイダンス： Read ../frontend/react-state-management.md

データ取得方法の選択

サーバーコンポーネント（Next.js App Router）：

• Next.js 14 以降でのデフォルトの選択肢
• サーバーで取得し、クライアント側の JavaScript はゼロ
• データベースに直接アクセス

サーバーアクション（Next.js）：

• ミューテーションやフォーム処理に使用
• プログレッシブエンハンスメント
• TypeScript による型安全性

SWR：

• クライアント側のデータ取得
• キャッシュ機能を内蔵
• 楽観的更新
• ユーザー体験を重視

React Query：

• 高度なキャッシュ戦略
• 複雑なデータ依存関係
• オフライン対応
• デバッグ用 DevTools

詳しいパターン： Read ../frontend/react-data-fetching.md

使用方法

1. 自動有効化：Claude Code がフロントエンドの作業を検知すると、このスキルが自動的に読み込まれます
2. スキルを参照する：カテゴリ全体の概要を確認するには、Read ../frontend/INDEX.md を実行します
3. 特定のスキルを読み込む：上記の bash コマンドを使用して、個別のスキルを読み込みます
4. ワークフローに従う：一般的なパターンには、推奨される手順を使用します
5. elegant-design：elegant-design は UI デザイン作業で自動的に有効になる、独立した Agent Skill です

次のステップ：Read ../frontend/INDEX.md を実行してカテゴリの詳細を確認するか、上記の bash コマンドを使用して特定のスキルを読み込みます。