mcpField
R
react-native-cursor-rules

react-native-cursor-rules

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

react-native-cursor-rules について

React Native 開発者向けの Cursor ルール集で、型安全な TypeScript、コンポーネント設計、性能改善を扱います。関数コンポーネント、リスト最適化、レスポンシブなスタイル、ナビゲーションを取り上げます。

主な機能

  1. 01型安全な TypeScript のコーディング規約
  2. 02関数コンポーネントとフックの指針
  3. 03機能単位の再利用可能なコンポーネント構成
  4. 04FlatList の性能改善案
  5. 05レスポンシブなスタイルとナビゲーションの実践

活用シーン

  1. 01React Native プロジェクトのコーディング規約策定
  2. 02モジュール化された TypeScript 画面の構築
  3. 03長いリストの描画性能改善
  4. 04レスポンシブレイアウトとディープリンクの実装

インストール

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

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

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

詳細

React Native Cursor Rules

Will Sims による React Native 開発の専門ガイドラインです。型安全な TypeScript コード、パフォーマンスの最適化、保守しやすいコンポーネントアーキテクチャに重点を置いています。

コードのスタイルと構成

  • 簡潔で型安全な TypeScript コードを書きます
  • クラスコンポーネントではなく、関数コンポーネントとフックを使用します
  • コンポーネントをモジュール化し、再利用しやすく、保守しやすいものにします
  • ファイルは機能ごとに整理し、関連するコンポーネント、フック、スタイルをまとめます

命名規則

  • 変数と関数には camelCase を使用します（例：isFetchingData、handleUserInput）
  • コンポーネントには PascalCase を使用します（例：UserProfile、ChatScreen）
  • ディレクトリ名は小文字とハイフンで表記します（例：user-profile、chat-screen）

TypeScript の使用

  • すべてのコンポーネントで TypeScript を使用し、props と state には interface を優先します
  • tsconfig.json で厳格な型チェックを有効にします
  • any 型を避け、できる限り正確な型を指定します
  • props を持つ関数コンポーネントの定義には React.FC を使用します

パフォーマンスの最適化

  • useEffect、useState、およびレンダー処理内での負荷の高い計算を最小限に抑えます
  • 静的な props を持つコンポーネントには React.memo() を使用し、不要な再レンダーを防ぎます
  • FlatLists は以下の props で最適化します：
    • removeClippedSubviews
    • maxToRenderPerBatch
    • windowSize
  • サイズが一定の FlatList アイテムには getItemLayout を使用します
  • renderItem やイベントハンドラーで無名関数を使わないようにします

UI とスタイリング

  • StyleSheet.create() または Styled Components を使い、一貫したスタイルを適用します
  • 画面サイズや向きの違いに対応するレスポンシブデザインを実現します
  • react-native-fast-image を使用して画像を最適化します

ベストプラクティス

  • スムーズなパフォーマンスを実現するため、React Native のスレッドモデルに従います
  • Expo の EAS Build と Over-The-Air アップデートを活用します
  • ナビゲーションとディープリンクには React Navigation を使用します

コメント

Markdown 対応