wireframer

wireframer

カタログの仮エントリー — スキルの完全版：agilek/wireframer-skill

判断ツリー

1. 完全版のスキルはすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/wireframer/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/wireframer/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは wireframer としてインストール済みです。呼び出して続行してください
   • pointer → ステップ2に進んでください

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

   [ -e ~/.agents/skills/wireframer ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add agilek/wireframer-skill --skill wireframer -g -y
   

   プロジェクト：

   npx skills add agilek/wireframer-skill --skill wireframer -y
   

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

Claude Code プラグインを使う方法：

/plugin marketplace add agilek/wireframer-skill
/plugin install wireframes-designer@wireframer

注意事項

• 必要なもの： プロジェクトの agents.md、CLAUDE.md、または .cursorrules を編集する権限（初回使用時、スキルはスタイルルールを追記するか、存在しない場合は agents.md を作成します）。生成されたプロトタイプの読み込みに必要な Google Fonts、wired-elements、react-doodle-icons へのネットワークアクセス
• ライセンス： リポジトリに LICENSE ファイルはありません

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

• スキル名：wireframer
• 起動フレーズ：「wireframe」「low fidelity」「lo-fi mockup」「UI structure」

概要

簡単な説明から、クリック可能な Balsamiq 風プロトタイプを生成します。厳密なグレースケールのスタイル、手描き風の wired-elements コンポーネント、落書き風アイコン、ラフな枠線を使ったシングルページアプリ（vanilla HTML/JS または React）を作成し、lorem ipsum ではなく現実的な文言を使用します。ビジュアルデザインを決める前に、レイアウト、コンテンツの階層、ナビゲーションを定めることで、コンテンツを先に考えるよう促し、早まったピクセル単位の調整を防ぎます。impeccable や ui-craft などのデザインスキルを使う前に活用してください。

把握しておきたい副作用： プロジェクトで初めて使用すると、スキルはAIの指示ファイルにスタイルルールを書き込みます（既存の agents.md、CLAUDE.md、.cursorrules などに追記するか、agents.md を作成します）。そのことはユーザーに通知されます。変更を望まない場合は、差分を確認してください。