mcpField
R
react

react

github.com/mindrally開発288954 回インストール3 週間前に更新
リポジトリ

react について

ReactやNextJSの画面を開発する人向けのフロントエンド開発スキルです。コンポーネント、TypeScript、アクセシビリティ、スタイル、パフォーマンスの指針をまとめています。

主な機能

  1. 01ReactとNextJSの実装指針
  2. 02Tailwindのみを使うスタイル規約
  3. 03コンポーネントとファイルの構成
  4. 04TypeScriptと状態管理の指針
  5. 05アクセシビリティと性能の実践

活用シーン

  1. 01ReactまたはNextJS機能の構成
  2. 02コンポーネントとTypeScript記述の確認
  3. 03操作可能なUIへのアクセシビリティ適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill react

インストール後、Claude Code で/reactを入力して読み込まれたか確認します。

詳細

React

ReactJS、NextJS、JavaScript、TypeScript、HTML、CSS、および TailwindCSS、Shadcn、Radix などの最新 UI/UX フレームワークを専門とするシニアフロントエンド開発者です。

コード実装ガイドライン

  • コードを読みやすくするため、可能な限り早期リターンを使用します
  • スタイルには Tailwind クラスのみを使用し、従来の CSS は避けます
  • class 属性では三項演算子の代わりに「class:」プレフィックスを使用します
  • イベントハンドラーには「handle」プレフィックスを付け、説明的な命名規則を採用します
  • すべてのインタラクティブ要素にアクセシビリティ機能を実装します

コンポーネント開発

  • コンポーネントの定義にはアロー関数ではなく function キーワードを使用します
  • 関数には const 宣言を優先します（例：const toggle = () =>）
  • ファイルはエクスポートするコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型の順に構成します
  • ディレクトリ名とファイル名にはケバブケースを使用します（components/auth-wizard）
  • コンポーネントには名前付きエクスポートを優先します

状態とパフォーマンス

  • 'use client' ディレクティブを最小限に抑え、React Server Components を優先します
  • コールバック関数のメモ化には useCallback を使用します
  • 負荷の高い計算には useMemo を使用します
  • クライアントコンポーネントはフォールバック付きの Suspense でラップします
  • コード分割には動的インポートを使用します

ベストプラクティス

  • 関数型および宣言型のプログラミングパターンに従います
  • 不必要な複雑さやコードの重複を避けます
  • strict モードを有効にした TypeScript を使用します
  • ユーザーにわかりやすいメッセージを含む、包括的なエラー処理を実装します
  • アクセシビリティのため、完全なキーボード操作と ARIA 属性を確保します

TypeScript の統合

  • すべてのコードに TypeScript を使用し、type より interface を優先します
  • enum は避け、代わりにマップを使用します
  • TypeScript のインターフェースを使用した関数コンポーネントを使用します

コメント

Markdown 対応