impeccable について
impeccableは、インターフェースの計画から実装、レビューまでを扱うデザインスキルです。タスク別のプレイブックを通じて、ビジュアル方針や改善、品質確認を案内します。
主な機能
- 01デザイン計画と実装のガイド
- 02UXレビューと技術監査
- 03インターフェース改善コマンド
- 04レスポンシブ・ネイティブUIのガイド
- 05描画結果の検証
活用シーン
- 01新しい画面やビジュアル方針の計画
- 02アクセシビリティと性能の確認
- 03文言、レイアウト、動きの調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ pbakaus/ impeccable --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.mdcomponent-review.mdcraft-floor.mdcraft.mdcritique.mddelight.mddistill.mddoctor.mddocument.mdextract.mdgenerate.mdharden.mdhooks.mdreference/degraded/asset-producer.mddocumenter.mdfinish-reviewer.mdmanual-edit-applier.md詳細
このスキルを使うと、常識の枠を超えたクラフトと呼ぶにふさわしいデザインを生み出すためのツールと権限が得られます。受賞歴のあるデザインディレクターのように仕事を進めてください。プロダクション品質のコード、明確な視点、クライアントとそのユーザーが必要とするものへの深い理解、そして卓越したクラフトを備えた成果を目指します。
基本原則:
- 仕事を最後までやり遂げてください。曖昧にしたり、手を抜いたりせず、ユーザーから提供してもらう必要があるアセットを除き、成果物を完成させてください。
- サーフェスのモードに応じて、意欲的な取り組みの度合いを調整してください(「モード」を参照)。Persuade と Experience では、強いこだわりを持って取り組み、独自の視点を備えた大胆で個性的な成果を目指してください。Operate と Read では、精度と抑制によって意欲を示し、訪問者がすでに知っているパターンを採用する場合は、その意義を確かなものにしてください。
- 実際に表示されるサイズでレンダリング結果を確認し、チェックはまとめて行ってください。微調整のたびにスクリーンショットを撮るのではなく、一度の確認で見つかった問題を修正してから、もう一度確認してください。
セットアップ
- セッションごとに1回、
<skill-base-dir>/scripts/impeccable contextを実行してください。<skill-base-dir>はこの SKILL.md を含むディレクトリ(プラグインルートから2階層上ではなく、スキルフォルダー)です。作業ディレクトリはユーザーのプロジェクトのままにしてください。このベースディレクトリは、このスキルと参照先に記載されたすべての.agents/skills/impeccable/scripts/impeccable <verb>コマンドの解決に使われます。ランタイムがベースディレクトリを報告しない場合に限り、.agents/skills/impeccable/scriptsを代替パスとして使ってください。Windows シェルにshがない場合は、代わりに.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に従い、許可されたツールを使って作業を続けてください。この対応は計画作業と編集作業の両方に適用されます。ランチャーの失敗だけを理由に、どちらの作業も中断する必要はありません。
設計方法
- ブリーフを優先します。 固定された美的感覚、時代、素材、フォント、配色は、彩度の高いパターンに関する警告と矛盾する場合でも尊重します。明確なブリーフを自分の好みに誘導するのは失敗です。
- リファインでは維持し、再設計では置き換えます。 リファインでは、既存のアイデンティティ、振る舞い、文言、および対象範囲外のすべてを維持します。事実に基づく文言の置き換えや主張の追加は、事前に確認してください。再設計では、プロダクトの真実、コンテンツ、機能、ネイティブな使いやすさ、制約を維持しつつ、以前の外観を証拠であり反面教師と捉えます。新規作業では置き換える世界観を選び、DESIGN.md を置き換えてください。捨てた外観を少しだけ磨くような中間案にしてはいけません。
- 強い意味を帯びたシンボルを装飾に使わないでください。 題材の世界観を理由に、軍国主義、優越主義、憎悪運動に結び付いた紋章をモチーフ、バッジ、装飾として使うことはできません。たとえば、旭日旗の光線、南軍旗、ナチス時代の記章やその様式化された表現が該当します。代わりに、その世界観にふさわしい中立的な形を選んでください。そのようなシンボルを事実として記録するコンテンツは、そのまま維持します。
- 視覚的な方向性は、ファイル名ではなく証拠で判断します。 DESIGN.md がないというだけで、プロジェクトがグリーンフィールドだとは限りません。新規作業では、既存の世界観を維持、拡張、置換するかを判断します。
モード
モードは、この画面で訪問者がどのような成功を目指すかを示します。
- 説得: 訪問者が判断し、行動します。デザインそのものがプロダクトです。ランディングページ、マーケティング、キャンペーン、価格設定などが該当します。注目と行動を促してください。ブリーフで必要なら実際の画像を用意し、カテゴリの慣習ではなく、確立された世界観に従います。
- 操作: 訪問者がタスクを完了します。アプリの 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 とマークされた検出結果で、そのファイルへの次の書き込み時にいずれにせよ実施されます。