playful-design-router

Playful Design Router

ほかのスキルを把握しているスキルです。依頼を読み、適用するデザインスキルを判断して、適切な順序で使用します。Playful Design が厳選しています（playfuldesign.app/skills）。

1. インストール済みのスキルを確認する

ルーティングの前に、次のスキルが存在するか確認してください。プロジェクト内の .claude/skills/、.agents/skills/、.cursor/skills/ と、~/ 以下の同じフォルダーを調べます。存在するスキルのみをルーティング先にしてください。明らかに役立つスキルが見つからない場合は、そのことを一度だけ伝え、末尾の表にあるインストールコマンドを提示してください。許可を求めずにインストールしてはいけません。

2. 常に適用する（標準）

すべてのインターフェイス変更に適用します。これらを名指しする必要はありません。

• scope：依頼された内容だけを変更し、正常に機能している部分は維持し、すべての項目を完了します。
• restraint：目的を果たす最小限のものを提供し、誰からも求められていないものは削除します。
• reuse：まずプロジェクト独自のコンポーネントを使い、次にメンテナンスされているライブラリ、それからネイティブ機能を使います。
• copy：インターフェイスのラベルは短く、わかりやすくします。
• defaults：フォーカス、フォーム、読み込み、ダイアログ、スクロール端、文字組みには、プロジェクトの標準設定を適用します。
• color：コントラストは正確な比率を保ち、色は役割別トークンを通じて指定し、実用的なダークパレットを用意します。
• motion または emil-design-eng：アニメーション対象、イージング、時間、スプリング、動きを抑える設定を扱います。両方がインストールされている場合は、アニメーションに関する判断に emil-design-eng を使い、プロジェクトの標準値には motion を使います。

プロジェクト独自の規約（CLAUDE.md、AGENTS.md、デザイントークン、スタイルガイド）が、これらすべてに優先します。ルールが競合する場合は、どのルールに従ったかを伝えてください。

3. 意図に応じて振り分ける

リクエストの内容	使用するもの
デザイン前に参考資料やインスピレーションを探す	gather
ひとことのモーションやアニメーションのアイデアを詳細なプロンプトにする	blank-page
名前が指定されたサイト、画面、コンポーネントをコピーまたは再現する	match
架空またはモックのプロダクト UI、ヒーローや機能カードのイラスト、ベンツーグリッド、カーソルやプロダクトデモのアニメーション	stageshow
Web 上で新しいアニメーションやトランジションを作る	animate（負荷が高い場合は続けて animation-performance）
React Native または Expo のアニメーション	animate-expo
ジェスチャー、スプリング、シート、マテリアル、Apple らしい操作感	apple-design
「もっと生き生きした感じにして」または「何をアニメーションさせるべき？」	find-animation-opportunities
「動きが遅い」または「アニメーションが多すぎる」	remove-animations
アプリ全体のモーションを修正する計画	improve-animations
モーション効果を正確に依頼できるように名前を付ける	animation-vocabulary
スマートフォンでネイティブアプリのように感じられる Web アプリ	mobile-native
最悪のデータ条件で画面をストレステストする	break-ui
UI ライブラリ（チャート、OTP、トースト、コマンドメニュー）を選ぶ	/pick-ui-library を提案する
Sonner のトースト	ask-sonner
Swift コード	write-swift
方向性を比較する（「いくつか試して」「選択肢を見せて」）	/prototype を提案する（Raphael のビルドでは 1 ページにバリアントを並べ、Emil のビルドではライブピッカーの背後に配置します。名前が共通のため、インストールできるのは 1 つだけです）
実際のコンポーネントのすべての状態とバリアントを確認する	/lab を提案する
オブジェクトをもとにマスコットやキャラクターを作る	/avatar を提案する
既存のアイコンセットに合わせる必要がある、不足しているアイコン	icons
毎日行う、小規模なインタラクション実験	/sketchbook を提案する
既存のアニメーションやインタラクションを理解する	/deconstruct を提案する
長文の執筆：投稿、ケーススタディ、デザインノート	prose
アクセシビリティ、フォーカス、フォーム、モーション、パフォーマンスの観点から UI コードをレビューする	web-design-guidelines
モーションコードを厳密にレビューする	/review-animations を提案する
実行中のアプリで変更が実際に動作するか確認する	verify
レスポンシブレイアウト、オーバーフロー、クリッピング、拡大表示されたテキスト	viewports
わずかにずれているピクセル配置、余白、角丸	/alignment を提案する
キーボード操作とフォーカス順序	/keyboard を提案する
カクつき、フレーム落ち、入力の遅延	animation-performance。計測したトレースには /frames を提案する
ユーザーが繰り返し指摘する修正事項	rule
「すべてレビューして」またはタスク終了時のデザイン確認	/audit を提案する
コミット、マージ、リリース	ユーザーがリリースを依頼した場合に限り、/ship を提案する
Grok Bots のポートフォリオページ	/bots を提案する

「提案」と記されたスキルは、ユーザーが名前を指定して呼び出した場合にのみ実行します（disable-model-invocation）。コマンド名と実行内容を伝え、自分で実行しようとしないでください。

4. 作業の順序

1 行で修正できる範囲を超える作業では、次の手順に従います。

1. 構築前： 参考資料が重要な場合は gather または match を使い、方向性が定まっていない場合は /prototype を提案します。
2. 構築中： 常時適用される基準を守り、架空の UI やマーケティング用ビジュアルには stageshow を、新しいモーションには animate または animate-expo を使います。
3. 完了を伝える前： 実行中のアプリで verify を行い、レイアウト変更には viewports、データ量の多い画面には break-ui、変更した UI ファイルには web-design-guidelines を使います。変更内容が該当する領域に関わる場合は、/alignment、/keyboard、または /frames を提案します。
4. その後： 修正事項が 2 回出てきた場合は rule を使います。/ship は依頼された場合に限ります。

作業の規模に見合った対応にします。文言の微調整なら、パイプライン全体ではなく scope と copy を使います。

5. 使用したスキルを報告する

使用したスキルを、短い 1 行で伝えます。例：「ヒーローのモックに stageshow を使い、verify と viewports で確認しました。」

インストールコマンド

スキル	インストール
すべて（このルーターと以下のすべてのスキル）	npx skills add playful-design/router
このルーターのみ	npx skills add playful-design/router --skill playful-design-router
stageshow（Benji Taylor）	npx skills add benjitaylor/skills --skill stageshow
Emil Kowalski のコレクション	npx skills add emilkowalski/skills
Emil のスキルのいずれか	npx skills add emilkowalski/skills --skill <name>
web-design-guidelines（Vercel）	npx skills add vercel-labs/agent-skills --skill web-design-guidelines
blank-page（Stewdio）	npx skills add StewdioAI/blank-page
Raphael Salaja のコレクション	npx skills add raphaelsalaja/skills
その中のスキルのいずれか	npx skills add raphaelsalaja/skills --skill <name>

各スキルのクレジットは、その作者に帰属します。このルーターは道案内のみを行います。