mcpField
R
react-app-dev

react-app-dev

github.com/xiaolai開発87854 回インストール今日更新
リポジトリ

react-app-dev について

react-app-dev は、React 19、Zustand v5、Tailwind v4、shadcn/ui を使う VMark のフロントエンド開発スキルです。コード構成、状態アクセス、機能境界、テストの規約を示します。

主な機能

  1. 01VMark のフロントエンド規約の適用
  2. 02ストアの分割代入ではなくセレクターを使用
  3. 03コードファイルを約 300 行に抑制
  4. 04機能ごとの境界を維持
  5. 05必要に応じたテスト更新とチェック実行

活用シーン

  1. 01VMark の React フロントエンド変更
  2. 02コンポーネント、フック、ストア、プラグインの整理
  3. 03機能追加に伴うテスト作成

インストール

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

$npx skills add https://github.com/xiaolai/vmark --skill react-app-dev

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

同梱ファイルreferences/paths.mdscripts/scan_react_usage.sh

詳細

React App Dev (VMark)

概要

React 19 + Zustand v5 + Tailwind v4 + shadcn/ui に VMark のフロントエンド規約を適用します。

ワークフロー

  1. 編集前に関連ファイル（コンポーネント、フック、ストア、プラグイン）を読みます。
  2. AGENTS.md の VMark ルールに従います（ストアの分割代入は禁止し、セレクターを使用します）。
  3. コードファイルは約300行以内に収め、必要に応じて分割します。
  4. ローカルの機能境界を優先し、機能をまたぐインポートは避けます。
  5. 新しい動作に合わせてテストを更新し、指示があれば pnpm check:all を実行します。

参考資料

  • 共通のソースの場所とスキャンについては references/paths.md を参照してください。
  • ドキュメントの一覧：dev-docs/README.md。

コメント

Markdown 対応