claude-wireframe-skill

claude-wireframe-skill

カタログ用のスタブ — スキルの全容はこちら：Magdoub/claude-wireframe-skill

判断ツリー

1. スキルの全体版はすでにインストールされていますか？ この場所にあるスキルに、まだ das: ブロックがあるか確認します：

   • グローバル：grep -q "^das:" ~/.agents/skills/claude-wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • プロジェクト：grep -q "^das:" .agents/skills/claude-wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • das: ブロックがない → スキルの全体版がインストール済みです。これを呼び出して続行します
   • das: ブロックがある → ステップ 2 に進みます

2. スコープを検出してからインストールします：

   スコープを検出するには：

   [ -e ~/.agents/skills/claude-wireframe-skill ] && echo "global" || echo "project"
   

   グローバル（-g を付けてインストール）：

   npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -g -y
   

   プロジェクト（-g を付けずにインストール）：

   npx skills add Magdoub/claude-wireframe-skill --skill claude-wireframe-skill -y
   

   Claude Code： 会話から離れずにコマンドを実行するには、どちらかのコマンドを ! で始まるチャットメッセージとして送信します。

インストール後の呼び出し

スキル名：claude-wireframe-skill、トリガー：「claude-wireframe-skill」、「5 UX approaches」、「exploratory wireframe」、「Magdoub wireframe」

機能

マルチエージェントのワイヤーフレーム作成ワークフローを開始し、任意の UI の課題に対して、5 つの異なる UX デザイン案を生成します。既存のデザインシステムを拡張する堅実な案が 1 つ、慣習にとらわれない探索的な案が 4 つです。まずコードベースをスキャンして、色、コンポーネント、パターンなどの永続的なデザインコンテキストを抽出します。次に白黒のワイヤーフレームを作成してから、カラー案を並行して生成します。単に最善と思われる案を 1 つだけ出すのではなく、多様な発想が必要な場合に便利です。

使用しない場合

• ワイヤーフレームを 1 つだけ出力する場合 — wireframe-skill または wireframer を使用します
• Excalidraw の図を作成する場合 — excalidraw-diagram を使用します
• 並列エージェントによるオーバーヘッドなしで、1 回の処理で素早く結果を得たい場合