mcpField
P
platform-frontend

platform-frontend

github.com/ravnhq開発1640 回インストール21 週間前に更新
リポジトリ

platform-frontend について

platform-frontendは、フロントエンド開発におけるコード構成、状態管理、パフォーマンス最適化の指針を示すスキルです。機能単位の構成とローカル状態を優先し、計測してから最適化します。

主な機能

  1. 01ローカル状態を優先
  2. 02機能単位でコードを構成
  3. 03名前付きエクスポートを使用
  4. 04バレルファイルを避ける
  5. 05計測後に最適化

活用シーン

  1. 01Webアプリの状態境界を設計
  2. 02データ取得パターンを選択
  3. 03フロントエンドコードを構成
  4. 04性能最適化の必要性を判断

インストール

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

$npx skills add https://github.com/ravnhq/ai-toolkit --skill platform-frontend

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

rules/
_sections.md
component-composition.md
component-single-responsibility.md
component-use-link.md
data-loading-states.md
org-no-barrel-files.md
state-server-vs-client.md

詳細

原則

  • ローカルの状態から始め、共有する場合にのみ持ち上げます
  • 型ではなく機能ごとにコードを整理します
  • リファクタリングと検索を容易にするため、名前付きエクスポートを使用します
  • バレルファイル(index.ts による再エクスポート)は使用しません。ツリーシェイキングを妨げ、ビルドを遅くします
  • メモ化の前に計測します。遅くないものを最適化しないでください

ルール

詳しいパターンについては、ルールの一覧を参照してください。

例

トリガーする例

ユーザー:「この Web アプリの状態の境界とデータ取得パターンを選んでください。」

期待される動作:platform-frontend のガイダンスを使用し、そのワークフローに従って、実行可能な結果を返します。

トリガーしない例

ユーザー:「スレッドセーフなキャッシュアクセスのための Swift actor を作成してください。」

期待される動作:platform-frontend を優先せず、より関連性の高いスキルを選ぶか、スキルなしで対応します。

トラブルシューティング

スキルがトリガーされない
  • エラー:期待したときにスキルが選択されません。
  • 原因:リクエストの表現が、説明に記載されたトリガー条件に明確に一致していません。
  • 解決策:説明にあるドメインやタスクのキーワードを明示して言い換え、再試行します。
ガイダンスが別のスキルと競合する
  • エラー:1つのタスクで複数のスキルの指示が競合しています。
  • 原因:読み込まれたスキルの適用範囲が重複しています。
  • 解決策:現在のステップでどのスキルを優先するかを示し、そのワークフローを先に適用します。
出力が一般的すぎる
  • エラー:結果に具体性や実行可能な詳細がありません。
  • 原因:タスクの入力にコンテキスト、制約、または出力形式が含まれていません。
  • 解決策:具体的な制約(環境、範囲、形式、成功基準)を追加して再実行します。

ワークフロー

  1. リクエストが platform-frontend の適用範囲とトリガーに明確に一致するかを確認します。
  2. スキルのルールと参照されているガイダンスを適用し、具体的な結果を作成します。
  3. 制約に照らして出力の品質を検証し、不足があれば明示的な前提を加えて一度だけ改善します。

コメント