impeccable

Impeccable — フロントエンドデザインスキル

本番環境向けの高品質なフロントエンドインターフェースを設計し、反復的に改善します。実際に動作するコード、確かなデザイン判断、卓越した仕上がりを実現します。

Anthropic の frontend-design スキル を基盤とする pbakaus/impeccable（Apache 2.0）に基づいています。

セットアップ

デザイン作業やファイル編集を始める前に、次の手順を実行します。

1. コンテキストを確認する — プロジェクトのルートにある PRODUCT.md / DESIGN.md を確認します。PRODUCT.md がない、またはプレースホルダー（200 文字未満）の場合は、最初に impeccable:teach を実行するようユーザーに提案します。
2. レジスターを特定する — デザインタスクはすべて、ブランド（マーケティング、ランディングページ、キャンペーン、ポートフォリオ：デザイン自体がプロダクト）か、プロダクト（アプリ UI、管理画面、ダッシュボード、ツール：デザインはプロダクトを支えるもの）のいずれかです。デザインを始める前に特定します。
3. レジスターのリファレンスを読み込む — レジスターに応じて、このスキルのリファレンスファイルからブランドまたはプロダクトのリファレンスを使用します。

コマンド

ユーザーが特定の impeccable コマンド（例：「このページを監査して」「チェックアウトを磨き上げて」）を実行した場合は、impeccable:<command> [target] のパターンに従います。各コマンドには、このスキルの reference ディレクトリにリファレンスファイルがあります。

コマンド	カテゴリ	説明
impeccable:craft [feature]	構築	ビジュアルな反復を含む、構成から構築までの完全なフロー
impeccable:teach	構築	初回セットアップ：デザインのコンテキストを収集し、PRODUCT.md と DESIGN.md を作成
impeccable:document	構築	既存のプロジェクトコードから DESIGN.md を生成
impeccable:extract [target]	構築	再利用可能なコンポーネントとトークンをデザインシステムに取り込む
impeccable:shape [feature]	構築	コードを書く前に UX/UI を計画
impeccable:critique [target]	評価	UX デザインレビュー：階層、明瞭さ、感情への訴求力
impeccable:audit [target]	評価	技術品質チェックを実施（アクセシビリティ、パフォーマンス、レスポンシブ対応）
impeccable:polish [target]	改善	最終調整、デザインシステムとの整合、リリース準備
impeccable:bolder [target]	改善	平凡なデザインを大胆にする
impeccable:quieter [target]	改善	大胆すぎるデザインを控えめにする
impeccable:distill [target]	改善	本質だけを残す
impeccable:harden [target]	改善	エラー処理、i18n、テキストのはみ出し、エッジケースに対応
impeccable:onboard [target]	改善	初回利用時のフロー、空の状態、利用開始までの導線
impeccable:animate [target]	強化	意図のある動きを追加
impeccable:colorize [target]	強化	戦略的に色を取り入れる
impeccable:typeset [target]	強化	フォントの選択、階層、サイズを調整
impeccable:layout [target]	強化	レイアウト、余白、視覚的なリズムを調整
impeccable:delight [target]	強化	喜びを感じる瞬間を加える
impeccable:overdrive [target]	強化	技術的に際立つエフェクトを追加
impeccable:clarify [target]	修正	分かりにくい UX の文言を改善
impeccable:adapt [target]	修正	さまざまなデバイスに対応
impeccable:optimize [target]	修正	パフォーマンスを改善
impeccable:live	反復	ビジュアルバリアントモード：ブラウザー上で要素を反復的に調整

ルーティング

• ターゲットが指定されていない場合：コマンドテーブルをカテゴリ別に表示し、何をしたいかユーザーに尋ねます。
• コマンドが一致する場合：このスキルの reference/ ディレクトリから該当するリファレンスファイルを読み込み、その指示に従います。
• 一致するコマンドがなく、デザインに関する依頼の場合：共通のデザイン原則とレジスターのリファレンスを直接適用します。

共通のデザイン原則

どちらのレジスターのデザインにも適用します。実装の複雑さを美的ビジョンに合わせます。プロジェクトごとに変化をつけ、同じ選択に収束させないでください。

色

• OKLCH を使用します。明度が 0 または 100 に近づくほど彩度を下げます。極端な明度で彩度を高くすると、けばけばしく見えます。
• #000 や #fff は決して使用しません。すべてのニュートラルカラーにブランドの色相を加えます（彩度は 0.005〜0.01 で十分です）。
• 色を選ぶ前に、カラーストラテジーを決めます。コミットメントの度合いは 4 段階です。
  • 控えめ: 色味を加えたニュートラルカラーに、アクセントカラーを 10% 以下で使用します。プロダクトのデフォルトや、最小限のブランド表現に適しています。
  • 強く打ち出す: 彩度の高い 1 色で、サーフェスの 30〜60% を占めます。ブランドアイデンティティを重視するページにおける、ブランドの標準です。
  • フルパレット: 3〜4 個の役割を定め、それぞれを意図的に使用します。ブランドキャンペーンや、プロダクトのデータビジュアライゼーションに適しています。
  • 全面的に色で覆う: サーフェスそのものを色で覆います。ブランドのヒーローセクションやキャンペーンページに適しています。
• 「アクセントカラーは 10% 以下」というルールは「控えめ」の場合に限ります。「強く打ち出す」「フルパレット」「全面的に色で覆う」では、意図的にその割合を超えます。

テーマ

ダークとライトに、デフォルトはありません。「ツールはダークなほうがかっこいいから」ダークにすることも、「無難だから」ライトにすることもありません。

選ぶ前に、誰が、どこで、どのような周囲の明るさのもと、どんな気分で使うのか、物理的な状況を一文で書きます。その文で答えが決まらないなら、具体性が足りません。答えが決まるまで詳細を加えます。

「オブザーバビリティダッシュボード」だけでは答えは決まりません。「薄暗い部屋で午前 2 時に、SRE が 27 インチモニターでインシデントの重大度をちらりと確認する」なら決まります。

タイポグラフィ

• 本文の行長は 65〜75ch に抑えます。
• スケールとウェイトのコントラストで階層を作ります（各段階の比率は 1.25 以上）。平坦なスケールは避けます。

レイアウト

• リズムをつけるため、余白に変化をつけます。どこも同じパディングでは単調になります。
• カードは安易な選択肢です。本当に最適な表現手段である場合に限り使用します。カードを入れ子にするのは常に誤りです。
• すべてをコンテナーで囲まないでください。大半の要素にコンテナーは不要です。

モーション

• CSS のレイアウトプロパティはアニメーションさせません。
• 指数関数的なカーブでイーズアウトします（ease-out-quart / quint / expo）。バウンスや弾性のある動きは使いません。

絶対禁止（アンチパターン）

該当したら書き直します。以下のいずれかを使おうとしているなら、別の構成にします。

• 側面だけに色を付けたボーダー。 カード、リスト項目、コールアウト、アラートのアクセントとして、1px を超える色付きの border-left または border-right を使用すること。全周のボーダー、背景色の色味、先頭の番号やアイコンを使うか、何も付けません。
• グラデーションテキスト。 background-clip: text とグラデーションの組み合わせです。装飾的で、意味を持たせるものではありません。単色を使い、ウェイトやサイズで強調します。
• デフォルトとしてのグラスモーフィズム。 装飾目的でブラーやガラス風カードを使うことです。まれに、明確な目的を持って使うか、使わないかのどちらかにします。
• ヒーローメトリックのテンプレート。 大きな数値、小さなラベル、補足的な統計、グラデーションのアクセントの組み合わせです。SaaS でよくある陳腐な表現です。
• 同一のカードグリッド。 同じサイズのカードにアイコン、見出し、テキストを並べ、延々と繰り返すことです。
• 最初にモーダルを考えること。 モーダルはたいてい手抜きです。まずインラインや段階的な代替手段を十分に検討します。

コピー

• すべての言葉に役割を持たせます。見出しの言い換えや、タイトルを繰り返す導入文は不要です。
• em ダッシュは使いません。 カンマ、コロン、セミコロン、ピリオド、または括弧を使います。

AI っぽさチェック

誰かがこのインターフェースを見て、疑いもなく「AI が作った」と言えるなら、失敗です。

カテゴリからの連想を確認する。次の 2 つの段階があります。

• 第 1 段階: カテゴリだけからテーマとパレットを推測できるなら（「オブザーバビリティ → ダークブルー」「ヘルスケア → 白とティール」「金融 → ネイビーとゴールド」「暗号資産 → 黒地にネオンカラー」）、それは学習データに引きずられた反射的な選択です。状況を説明する文とカラーストラテジーを見直し、ドメインだけでは答えが明らかにならないようにします。
• 第 2 段階: カテゴリと避けたい表現の組み合わせから美的な方向性を推測できるなら（「SaaS 風のクリーム色ではない AI ワークフローツール → エディトリアルなタイポグラフィ」「ネイビーとゴールドではないフィンテック → ターミナルを中心としたダークモード」）、これはさらに一段深い落とし穴です。最初の反射は避けられても、次の反射は避けられていません。どちらの答えも明らかではなくなるまで見直します。

参考ファイル

このスキルの reference/ ディレクトリには、各コマンドとデザイン領域の詳細な参考ファイルがあります。skill_view(name='impeccable', file_path='reference/<name>.md') を使って読み込んでください。

主要なデザイン領域の参考資料（詳しく調べる場合に読み込みます）：

• reference/brand.md — ブランドの表現：マーケティング、ランディングページ、キャンペーンページ
• reference/product.md — プロダクトの表現：アプリの UI、ダッシュボード、ツール
• reference/typography.md — タイポグラフィシステム、フォントの組み合わせ、モジュラースケール、OpenType
• reference/color-and-contrast.md — OKLCH、色味のあるニュートラルカラー、ダークモード、アクセシビリティ
• reference/spatial-design.md — 余白のシステム、グリッド、視覚的階層
• reference/motion-design.md — イージング曲線、段階的表示、動きを抑える設定
• reference/interaction-design.md — フォーム、フォーカス状態、読み込みパターン
• reference/responsive-design.md — モバイルファースト、流動的なデザイン、コンテナクエリ
• reference/ux-writing.md — ボタンラベル、エラーメッセージ、空の状態
• reference/cognitive-load.md — インターフェースの認知的負荷を軽減する
• reference/heuristics-scoring.md — ニールセン式ヒューリスティック評価基準

コマンド別の参考資料（対応するコマンドで読み込みます）：

• reference/craft.md — 形を整えてから構築する一連の手順
• reference/shape.md — コードを書く前の UX/UI 計画
• reference/teach.md — PRODUCT.md と DESIGN.md のセットアップ
• reference/document.md — 既存コードから DESIGN.md を生成する
• reference/extract.md — デザイントークンをデザインシステムに取り込む
• reference/critique.md — UX デザインレビュー
• reference/audit.md — 技術品質のチェック
• reference/polish.md — 最終的な品質チェック
• reference/bolder.md — 無難なデザインをより大胆にする
• reference/quieter.md — 主張の強いデザインを控えめにする
• reference/distill.md — 本質だけに絞り込む
• reference/harden.md — 本番環境への対応
• reference/onboard.md — 初回利用時のフローと空の状態
• reference/animate.md — 意図のあるアニメーション
• reference/colorize.md — 戦略的に色を取り入れる
• reference/typeset.md — タイポグラフィの修正
• reference/layout.md — レイアウトと余白の修正
• reference/delight.md — 個性と記憶に残る工夫
• reference/overdrive.md — 慣習的な限界を超える
• reference/clarify.md — UX コピーの改善
• reference/adapt.md — デバイスへの適応
• reference/optimize.md — UI パフォーマンス
• reference/live.md — ブラウザー上でのバリエーション反復

CLI ツール

Impeccable には、AI ハーネスを使わずに UI のアンチパターンを検出できるスタンドアロンの CLI も付属しています。

npx impeccable detect src/                   # scan a directory
npx impeccable detect index.html             # scan an HTML file
npx impeccable detect https://example.com    # scan a URL (requires Puppeteer)
npx impeccable detect --fast --json .        # regex-only, JSON output

HTML、CSS、JSX、TSX、Vue、Svelte ファイルをスキャンし、25 種類以上のアンチパターンを検出します。終了コード 0 は問題なし、2 は問題ありを示します。Node.js 18 以降が必要です。

ソース

オリジナル：github.com/pbakaus/impeccable ウェブサイト：impeccable.style