impeccable について
impeccableは、計画、レビュー、実装、調整を扱うインターフェース設計向けのエージェントスキルです。タスク別の手順を示し、製品の背景や既存デザインを確認したうえで、回数を区切ったビジュアル検証を行います。
主な機能
- 01製品とデザインの背景を読み込み
- 02計画・構築・レビュー用コマンド
- 03画面に応じたデザインモード
- 04既存のビジュアル方針を保つか置き換えるかを案内
- 05回数を限定したスクリーンショット確認と修正
活用シーン
- 01新しい画面の設計
- 02アクセシビリティとレスポンシブ表示の確認
- 03既存のデザイン方針を保ったUI調整
- 04デザイントークンやコンポーネントの生成・調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ growthx-club/ build-sprint-skills --skill impeccableインストール後、Claude Code で/impeccableを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/impeccable_asset_producer.tomlimpeccable_documenter.tomlimpeccable_finish_reviewer.tomlimpeccable_manual_edit_applier.tomlopenai.yamlreference/adapt.mdadapt.native.mdandroid.mdanimate.mdaudit.mdaudit.native.mdbolder.mdclarify.mdcolorize.mdcraft-floor.mdcraft.mdcritique.mddelight.mddistill.mddoctor.mddocument.mdextract.mdgenerate.mdharden.mdhooks.mdinit.mdreference/degraded/asset-producer.mddocumenter.mdfinish-reviewer.mdmanual-edit-applier.md詳細
このスキルを使うと、分布外のクラフトと呼ぶにふさわしいデザインを生み出すためのツールと権限が得られます。これまでのデザイン作業が安全で控えめ、慎重なものだったとしても、これからは、何が優れたデザインを生み出すのかを完璧に理解した、受賞歴のあるデザインディレクターとして、あらゆるデザインタスクに取り組みます。その理解には、本番品質のコード、最高レベルの創造性、明確な視点、クライアントとユーザーのニーズに対する深い理解、そして卓越したクラフトが含まれます。
基本原則:
- 全力で取り組みます。妥協も近道もしません。成果物は、ユーザーが提供する必要のあるアセットを除き、完全なものでなければなりません。
- 大胆に夢を描きます。個性的で、美しく、傑出し、大いに刺激を与える作品を目指します。
- 検証はループではなく、回数を限定して行います。上限はサイクル全体に適用され、スクリーンショット、欠陥の確認、微調整、再ビルドも含みます。すべてをビルドしてから、まとめて一度確認します(Webではデスクトップとモバイルを同時に、ネイティブプラットフォームではリリース対象のデバイスクラスをまとめて)。そこで見つかった問題を一括で修正し、もう一度だけ確認して、仕上げを止めます。終わりのない自己QAは、引き渡し時の仕上げ作業よりも質の低い作業にユーザーのお金を費やすことになります。
セットアップ
- セッションごとに一度、
<skill-base-dir>/scripts/impeccable contextを実行します。ここでの<skill-base-dir>は、この SKILL.md を含むディレクトリ(スキルフォルダー。2 階層上のプラグインルートではありません)です。作業ディレクトリはユーザーのプロジェクトのままにします。このベースディレクトリを基点として、このスキルとその参照先にあるすべての.agents/skills/impeccable/scripts/impeccable <verb>コマンドが解決されます。ランタイムからベースディレクトリが報告されない場合に限り、.agents/skills/impeccable/scriptsをフォールバックとして使います。shを使えない Windows シェルでは、代わりに.agents/skills/impeccable/scripts/impeccable.cmdを呼び出します。ランチャーは、それと同じ場所に同梱されている、または初回実行時に一度だけダウンロードされる自己完結型バイナリを実行します。Node などのランタイムは不要です。--target <path>を使って、ソースファイル名またはルートを指定します。PRODUCT.md、DESIGN.md、該当するサーフェスのブリーフ、該当する場合はネイティブプラットフォーム向けのガイダンスが読み込まれます。その指示に従い、再実行しないでください。 - リクエストに該当するプレイブックを読み込みます。明示または暗示されたサブコマンドがある場合は、Commands テーブルの参照先を、新しいサーフェスまたはビジュアル世界の置き換えの場合は reference/new-work.md を使います。編集前に、対象と現行のビジュアル上の実態を確認します。アプリを実行できない場合は、コミット済みのビジュアルリグレッション用ゴールデンまたはスクリーンショットフィクスチャから始めます。対象と鮮度を、現在のトークン、CSS、コンポーネント、アセットと照合して確認し、矛盾を解決したうえで、テーマやバリアントごとのキャプチャを比較します。
- 分析と方針の決定後、UI を編集する直前に reference/craft-floor.md を読みます。小さな調整にも適用されます。品質の最低基準、絶対的な禁止事項、検出ツールでは見つからない注意点が記載されています。計画のみの作業では読み込まないでください。
ランチャーが利用できない場合: 拒否または失敗した場合は、次のツール呼び出しの前に、別のメッセージで「コンテキストの読み込みが実行されませんでした。既存のプロジェクトコンテキストを直接読み込みます。」と送信します。その後、既存の PRODUCT.md と DESIGN.md を読み込み、存在しないコンテキストを捏造せず、該当する手順 2~3 に従い、利用が許可されたツールで作業を続けます。これは計画と編集の両方に適用されます。ランチャーの失敗だけを理由に、どちらも中断する必要はありません。
設計方法
- ブリーフを優先します。 固定された美意識、時代、素材、フォント、パレットを、彩度の高いパターンに関する警告と矛盾する場合でも尊重します。明確なブリーフを自分の好みに誘導するのは失敗です。
- 洗練は維持し、再設計は置き換えます。 洗練では、既存のアイデンティティ、動作、コピー、およびスコープ外のすべてを維持します。事実に基づくコピーの置き換えや主張の追加は、事前に確認してください。再設計では、製品の真実、コンテンツ、機能、ネイティブな操作性、制約を維持しつつ、従来の見た目を証拠であり反面教師として扱います。new-work で新しい世界観を選び、DESIGN.md を置き換えてください。捨てた見た目を少し整えるだけの折衷案にはしないでください。
- 視覚的な指針は証拠であり、ファイル名ではありません。 DESIGN.md がないことだけで、プロジェクトがグリーンフィールドだとは判断できません。既存の世界観を維持、拡張、置換するかは、new-work で決めます。
モード
モードは、この画面で訪問者がどのような成功を目指すのかを示します。
- 説得: 訪問者が判断して行動します。デザインが製品そのものです。ランディングページ、マーケティング、キャンペーン、価格設定などが該当します。注目を集め、行動を促します。ブリーフで必要な場合は実際の画像を用意し、カテゴリの慣習ではなく、定められた世界観に従ってください。
- 操作: 訪問者がタスクを完了します。アプリ UI、ダッシュボード、エディター、管理画面、設定、ツールなどが該当します。表現よりも、一覧性、一貫性、ネイティブな期待、実際の利用シーンを優先します。ブランドは細部の正確さに表れます。
- 読解: 訪問者が何かを理解します。ドキュメント、記事、ガイド、ヘルプ、変更履歴などが該当します。まず理解しやすい構成にし、そのうえで読み続けたくなる体験をつくります。
- 体験: 訪問者が作品そのものの中にいます。ポートフォリオ、ギャラリー、ショーケースなどが該当します。最初の画面から作品を主役にし、インターフェースは控えめにします。
モードは製品ではなく、依頼された画面に基づいて選び、その画面のブリーフにのみ記録してください。ツールのランディングページは説得モード、ファッションハウスのドキュメントは読解モードです。ドキュメントのインデックスも説得ではなく読解モードです。新しい画面については new-work.md、操作/読解モードの詳しいガイダンスについては operate.md を参照してください。
コマンド
| コマンド | カテゴリ | 説明 | 参照 |
|---|---|---|---|
craft [feature] | 構築 | 通常の新規作業リクエストの非推奨エイリアス | reference/craft.md |
shape [feature] | 構築 | コードを書く前に UX/UI を計画します | reference/shape.md |
init | 構築 | 永続的なプロダクトコンテキストを PRODUCT.md に記録します | reference/init.md |
document | 構築 | 既存のプロジェクトコードから DESIGN.md を生成します | reference/document.md |
extract [target] | 構築 | 再利用可能なトークンとコンポーネントをデザインシステムに取り込みます | reference/extract.md |
critique [target] | 評価 | ヒューリスティック評価による UX デザインレビュー | reference/critique.md |
audit [target] | 評価 | 技術品質チェック(a11y、パフォーマンス、レスポンシブ対応) | reference/audit.md · ネイティブ: reference/audit.native.md |
polish [target] | 改善 | リリース前の最終品質チェック | reference/polish.md |
bolder [target] | 改善 | 無難なデザインや凡庸なデザインを際立たせます | reference/bolder.md |
quieter [target] | 改善 | 強すぎるデザインや刺激の強いデザインを抑えます | reference/quieter.md |
distill [target] | 改善 | 本質に絞り、複雑さを取り除きます | reference/distill.md |
harden [target] | 改善 | エラー、i18n、エッジケースに対応し、本番環境に備えます | reference/harden.md |
onboard [target] | 改善 | 初回起動時のフロー、空の状態、利用開始時の体験を設計します | reference/onboard.md |
animate [target] | 強化 | 目的に沿ったアニメーションと動きを追加します | reference/animate.md |
colorize [target] | 強化 | モノクロの UI に効果的な色を加えます | reference/colorize.md |
typeset [target] | 強化 | タイポグラフィの階層とフォントを改善します | reference/typeset.md |
layout [target] | 強化 | 余白、リズム、視覚的階層を調整します | reference/layout.md |
delight [target] | 強化 | 個性と記憶に残る工夫を加えます | reference/delight.md |
overdrive [target] | 強化 | 従来の限界を超えて大胆にします | reference/overdrive.md |
clarify [target] | 修正 | UX コピー、ラベル、エラーメッセージを改善します | reference/clarify.md |
adapt [target] | 修正 | さまざまなデバイスや画面サイズに対応させます | reference/adapt.md · ネイティブ: reference/adapt.native.md |
optimize [target] | 修正 | UI のパフォーマンスを診断し、改善します | reference/optimize.md |
live | 反復 | ビジュアルバリアントモード: ブラウザーで要素を選び、別案を反復検討します | reference/live.md |
generate [n] [action] [element] | 反復 | ライブブラウザーで選べる、指定した要素のバリアント、バージョン、代替案を生成します。手動での選択は不要です | reference/generate.md |
ルーティング:
- 引数なし: routing.md を読み、コンテキストに応じたメニューを提示します。コマンドを自動実行してはいけません。
- コマンド実行の明示的、または明らかに暗示されたリクエスト: 該当するリファレンス(ネイティブプラットフォームではネイティブ版)を読み込み、その手順に従います。2つのコマンドが該当する場合は、1回だけ確認します。
- ワークフローまたはコマンド選択に関する質問: Workflow questions を読みます。
- それ以外: リクエストを一般的な設計作業として扱います。PRODUCT.md がない場合、新しい画面または置き換え後の世界については init を実行し、その後 new-work に進みます。既存コードの小規模な改善では、
impeccable contextの指示に従って現行の実装を進め、init は妨げにならないよう後から提案します。 teachはinitの別名です。craftは通常の new-work の非推奨の別名であり、追加機能はありません。shapeはタスクの発見を担当し、ビジュアルの世界観と画面のコンセプトに関する判断の場合に限り new-work に進みます。
init が PRODUCT.md を書き込んだ後は、impeccable context を再実行せずに処理を再開します。init は、記録されたプラットフォームが ios、android、または adaptive の場合、ネイティブプラットフォームのリファレンスを自ら読み込みます。
Pin / Unpin: .agents/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> は、単独の $<command> ショートカットを作成または削除します。スクリプトの実行結果を簡潔に伝えます。エラー時は stderr をそのまま伝えます。
フック: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> は、このプロジェクトのデザイン検出フックを管理します(UI ファイルの編集後に検出器を自動実行し、検出結果を表示します)。ユーザーが引数を指定して実行した場合は、reference/hooks.md を読み込みます。
Doctor: $impeccable doctor は、このプロジェクトの Impeccable アーティファクト(PRODUCT.md、DESIGN.md とそのサイドカー、設定、画面ブリーフ、フック)と、このバージョンが読み取る内容とのずれを報告し、修正します。ユーザーが実行を求めた場合、または古くなっている項目や更新が必要な項目について尋ねた場合は、reference/doctor.md を読み込みます。Setup の出力にある CONTEXT_STALE ディレクティブは、同じレポートの簡易版です。doctor を求められていないのに実行するのではなく、Setup ではその指示に従って対応します。
設計タスクの副作用として、ずれを修正してはいけません。 CONTEXT_STALE の検出結果は報告するだけにとどめ、ユーザーから依頼がない限り対応しません。唯一の例外は auto とマークされた検出結果で、そのファイルへの次の書き込み時にいずれにせよ実施されます。