impeccable について
impeccable は、UI/UX デザインに取り組むエージェントスキルで、インターフェースの計画、レビュー、改善を行うプロダクトやデザインチーム向けです。デザイン批評、アクセシビリティ、パフォーマンス、レスポンシブ対応のチェックを提供し、PRODUCT.md に製品の背景を記録します。
主な機能
- 01UX/UI の計画と製品背景の記録
- 02ヒューリスティック評価によるデザインレビュー
- 03アクセシビリティ、性能、レスポンシブ対応の監査
- 04目的に応じたインターフェースの改善
- 05デザインのアンチパターン検出
活用シーン
- 01UI 実装前のインターフェース体験の計画
- 02既存画面のデザインと技術品質の確認
- 03製品のデザインドキュメント作成
- 04特定の画面要素を対象にしたデザイン反復
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill impeccableインストール後、Claude Code で/impeccableを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
impeccable
カタログ用スタブ — スキルの全内容:pbakaus/impeccable
判断ツリー
-
スキルの全内容はすでにインストールされていますか?
- グローバル:
f=~/.agents/skills/impeccable/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - プロジェクト:
f=.agents/skills/impeccable/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ スキルはimpeccableとしてインストール済みです。これを呼び出して続行しますpointer→ 手順 2 に進みます
- グローバル:
-
スコープを検出してから、インストールします:
[ -e ~/.agents/skills/impeccable ] && echo "global" || echo "project"グローバル:
npx skills add pbakaus/impeccable --skill impeccable -g -yプロジェクト:
npx skills add pbakaus/impeccable --skill impeccable -yClaude Code: 会話を離れずにコマンドを実行するには、
!で始まるコマンドをチャットメッセージとして送信します。
Claude Code プラグインを使う方法:
/plugin marketplace add pbakaus/impeccable
/plugin install impeccable@impeccable
注意事項
- 必要なもの: スキルのランチャー(scripts/impeccable)は、初回実行時にネイティブエンジンのバイナリを ~/.impeccable/bin にダウンロードします。匿名の利用状況テレメトリーはデフォルトで有効です(IMPECCABLE_NO_TELEMETRY=1 または DO_NOT_TRACK=1 でオプトアウトできます)
- ライセンス: Apache-2.0
- 大容量のダウンロード(約 854 MB): skills CLI は 300 秒後にクローンを中断します。タイムアウトした場合は、
SKILLS_CLONE_TIMEOUT_MS=900000を指定して再試行してください。
インストール後の呼び出し
- スキル名:
impeccable /impeccable <command> <target>を実行します。また、各プロジェクトで一度/impeccable initを実行し、PRODUCT.md を作成します- インストール後、スキルとコマンドを読み込むためにエージェントのセッションを再起動してください
npx skills add はスキルのみをインストールします。上流のインストーラー(npx impeccable install)は、UI ファイルの編集後にデザイン検出を実行する編集フックも登録します。使用する前に、これらのフックを確認してください。
概要
/impeccable <command> としてコマンドを呼び出す単一のスキルです:
| コマンド | 目的 |
|---|---|
shape | コードを書く前に UX/UI を計画します |
init / document | プロダクトのコンテキスト(PRODUCT.md)を記録し、既存のコードから DESIGN.md を生成します |
critique | ヒューリスティック評価による UX デザインレビュー |
audit | 技術品質チェック(アクセシビリティ、パフォーマンス、レスポンシブ対応) |
polish | リリース前の最終品質チェック |
bolder / quieter / distill | デザインを強調したり、落ち着かせたり、シンプルにしたりします |
animate / colorize / typeset / layout / delight | 対象を絞った改善 |
harden / onboard / clarify / adapt / optimize | エッジケース、初回起動時のフロー、UX コピー、レスポンシブ対応、パフォーマンス |
live / generate | ブラウザーで要素を選択し、バリエーションを反復作成します |
| + その他 | 上流の README とスキルのコマンド一覧を参照してください |
コマンドラインから実行できる、デザインのアンチパターン検出ツールも含まれています。コマンドは継続的なプロダクトのコンテキストを得るために PRODUCT.md を読み込みます。PRODUCT.md がない場合、スキルは推測せず、新しい画面に対して init を実行します。
使用しないケース
- バックエンド、API、データパイプラインの作業
- UI 以外のタスク(ルーティング、認証、データベース)
- OKLCH パレットの生成など、色彩科学に関する高度な作業(
color-expertを使用してください)
コメント
Markdown 対応