impeccable について
Impeccable は、コーディングエージェント向けの製品 UI 設計・実装スキルとコマンド群です。計画、改善、評価の手順を備え、描画結果の目視検証とプロジェクトのコンテキストを重視します。
主な機能
- 01設計と UI 改善のコマンド
- 02UX と技術品質のレビュー
- 03プロジェクト情報と設計ドキュメント
- 04描画結果の目視検証
- 05ネイティブプラットフォーム向けガイド
活用シーン
- 01新しい画面やページの計画
- 02アクセシビリティとレスポンシブ性の確認
- 03既存 UI の改善
- 04プロジェクトのデザインシステムの文書化
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ bastani-inc/ atomic --skill impeccableインストール後、Claude Code で/impeccableを入力して読み込まれたか確認します。
詳細
このスキルは、「分布外のクラフト」と呼ぶにふさわしいデザインを生み出すためのツールと裁量を与えます。受賞歴のあるデザインディレクターのように取り組んでください。プロダクション品質のコード、明確な視点、クライアントとそのユーザーのニーズへの深い理解、そして卓越したクラフトを備えた成果を目指します。
基本原則:
- 最後までやり遂げてください。妥協も近道もありません。ユーザーが提供する必要のあるアセットを除き、成果物を完成させてください。
- 表現方法に応じて、目指す水準を調整してください(「モード」を参照)。Persuade と Experience では全力を尽くし、明確な視点を持つ大胆で個性的な仕事にしてください。Operate と Read では、精度と抑制によって意欲を示し、訪問者に馴染みのあるパターンを採用するだけの価値があるものにしてください。
- 実際に表示される結果を、公開時のサイズで確認してください。また、確認はまとめて行ってください。調整のたびにスクリーンショットを撮るのではなく、一度見て分かった問題を修正してから、もう一度確認してください。
セットアップ
- セッションごとに一度、
<skill-base-dir>/scripts/impeccable contextを実行してください。ここでいう<skill-base-dir>は、この SKILL.md が含まれるディレクトリ(スキルフォルダーであり、2 階層上のプラグインルートではありません)です。実行中は cwd をユーザーのプロジェクトに保ってください。このベースディレクトリが、このスキルおよびその参照先にあるすべての.pi/skills/impeccable/scripts/impeccable <verb>コマンドの解決先になります。ランタイムからベースディレクトリが報告されない場合に限り、.pi/skills/impeccable/scriptsをフォールバックとして使用してください。Windows シェルにshがない場合は、代わりに.pi/skills/impeccable/scripts/impeccable.cmdを呼び出してください。ランチャーは、隣に同梱されている、または初回実行時に一度だけダウンロードされる自己完結型バイナリを実行します。Node などのランタイムは不要です。名前付きのソースファイルまたはルートを--target <path>として渡してください。ランチャーは PRODUCT.md、DESIGN.md、該当するサーフェスブリーフ、および該当する場合はネイティブプラットフォーム向けガイダンスを読み込みます。その指示に従い、再実行しないでください。 - リクエストに応じたプレイブックを読み込んでください。明示または暗黙のサブコマンドがある場合は、そのコマンド一覧の参照先を、新しいサーフェスや既存のビジュアル世界の置き換えの場合は 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つある場合は、一度だけ確認します。
- ワークフローやコマンドの選択に関する質問: ワークフローに関する質問 を読みます。
- それ以外: 一般的な設計作業として扱います。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: .pi/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> は、単独の /<command> ショートカットを作成または削除します。スクリプトの結果を簡潔に伝えます。エラーが発生した場合は、stderr をそのまま伝えます。
Hooks: /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 を求められていないのに実行するのではなく、そこでディレクティブ独自の指示に従って対処します。
設計タスクの副作用として、差異を修復してはいけません。 CONTEXT_STALE の検出結果は報告するだけにとどめ、ユーザーに求められない限り対処しません。例外は auto とマークされた検出結果です。この場合、次にそのファイルへ書き込む際に、自動的に処理されます。