platform-frontend について
platform-frontendは、フロントエンド開発におけるコード構成、状態管理、パフォーマンス最適化の指針を示すスキルです。機能単位の構成とローカル状態を優先し、計測してから最適化します。
主な機能
- 01ローカル状態を優先
- 02機能単位でコードを構成
- 03名前付きエクスポートを使用
- 04バレルファイルを避ける
- 05計測後に最適化
活用シーン
- 01Webアプリの状態境界を設計
- 02データ取得パターンを選択
- 03フロントエンドコードを構成
- 04性能最適化の必要性を判断
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ ravnhq/ ai-toolkit --skill platform-frontendインストール後、Claude Code で/platform-frontendを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
rules/_sections.mdcomponent-composition.mdcomponent-single-responsibility.mdcomponent-use-link.mddata-loading-states.mdorg-no-barrel-files.mdstate-server-vs-client.md詳細
原則
- ローカルの状態から始め、共有する場合にのみ持ち上げます
- 型ではなく機能ごとにコードを整理します
- リファクタリングと検索を容易にするため、名前付きエクスポートを使用します
- バレルファイル(index.ts による再エクスポート)は使用しません。ツリーシェイキングを妨げ、ビルドを遅くします
- メモ化の前に計測します。遅くないものを最適化しないでください
ルール
詳しいパターンについては、ルールの一覧を参照してください。
例
トリガーする例
ユーザー:「この Web アプリの状態の境界とデータ取得パターンを選んでください。」
期待される動作:platform-frontend のガイダンスを使用し、そのワークフローに従って、実行可能な結果を返します。
トリガーしない例
ユーザー:「スレッドセーフなキャッシュアクセスのための Swift actor を作成してください。」
期待される動作:platform-frontend を優先せず、より関連性の高いスキルを選ぶか、スキルなしで対応します。
トラブルシューティング
スキルがトリガーされない
- エラー:期待したときにスキルが選択されません。
- 原因:リクエストの表現が、説明に記載されたトリガー条件に明確に一致していません。
- 解決策:説明にあるドメインやタスクのキーワードを明示して言い換え、再試行します。
ガイダンスが別のスキルと競合する
- エラー:1つのタスクで複数のスキルの指示が競合しています。
- 原因:読み込まれたスキルの適用範囲が重複しています。
- 解決策:現在のステップでどのスキルを優先するかを示し、そのワークフローを先に適用します。
出力が一般的すぎる
- エラー:結果に具体性や実行可能な詳細がありません。
- 原因:タスクの入力にコンテキスト、制約、または出力形式が含まれていません。
- 解決策:具体的な制約(環境、範囲、形式、成功基準)を追加して再実行します。
ワークフロー
- リクエストが
platform-frontendの適用範囲とトリガーに明確に一致するかを確認します。 - スキルのルールと参照されているガイダンスを適用し、具体的な結果を作成します。
- 制約に照らして出力の品質を検証し、不足があれば明示的な前提を加えて一度だけ改善します。
コメント
Markdown 対応