DevvGwardo/impeccable

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

プロダクショングレードのフロントエンドインターフェースを設計・反復します。実際に動作するコード、確固たるデザイン選択、卓越したクラフトマンシップ。

pbakaus/impeccable（Apache 2.0）をベースにしており、Anthropicのフロントエンドデザインスキルを発展させたものです。

セットアップ

デザイン作業やファイル編集の前に：

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

コマンド

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

コマンド	カテゴリ	説明
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]	洗練	エラーハンドリング、国際化、テキストオーバーフロー、エッジケース
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段階：
  • 控えめ（Restrained）：着色された中間色＋1つのアクセントカラー ≤10%。プロダクトのデフォルト。ブランドミニマリズム。
  • コミット済み（Committed）：1つの彩度の高い色が表面の30～60%を占めます。アイデンティティ重視のページにおけるブランドデフォルト。
  • フルパレット（Full Palette）：3～4の名前付きロールをそれぞれ意図的に使用。ブランドキャンペーン、プロダクトのデータ可視化。
  • 浸透（Drenched）：表面そのものが色です。ブランドヒーロー、キャンペーンページ。
• 「1つのアクセントカラー ≤10%」ルールは控えめのみに適用されます。コミット済み、フルパレット、浸透は意図的にこれを超えます。

テーマ

ダークとライトは決してデフォルトではありません。「ツールはダークの方がカッコよく見えるから」ダークにするのでもなく、「無難だから」ライトにするのでもありません。

選択する前に、物理的なシーンを一文で書きます：誰が、どこで、どのような環境光のもとで、どのような気分でこれを使用するのか。その一文が答えを強制しない場合、具体性が足りません。答えが出るまで詳細を追加します。

「可観測性ダッシュボード」は答えを強制しません。「SREが薄暗い部屋で午前2時に27インチモニターでインシデントの重大度を一目確認している」なら強制します。

タイポグラフィ

• 本文の行長を65～75文字に制限します。
• スケールとウェイトのコントラスト（段階間の比率 ≥1.25）で階層を表現します。フラットなスケールは避けます。

レイアウト

• リズムのためにスペーシングを変化させます。どこも同じパディングは単調です。
• カードは安易な答えです。本当に最良のアフォーダンスである場合にのみ使用します。ネストされたカードは常に間違いです。
• すべてをコンテナで囲まないでください。ほとんどのものはコンテナを必要としません。

モーション

• CSSレイアウトプロパティをアニメーションさせないでください。
• 指数曲線（ease-out-quart / quint / expo）でイーズアウトします。バウンスやエラスティックは使用しません。

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

一致したら拒否します。これらを書こうとした場合は、別の構造で書き直します。

• サイドストライプボーダー。カード、リストアイテム、コールアウト、アラートに、彩色されたアクセントとして1pxを超える border-left または border-right を使用すること。代わりに、フルボーダー、背景色、先頭の数字/アイコン、または何も使用しないでください。
• グラデーションテキスト。background-clip: text + グラデーション。装飾的で、意味がありません。単一の無地色を使用します。強調はウェイトかサイズで行います。
• デフォルトとしてのグラスモーフィズム。装飾的に使用されるぼかしとガラスカード。まれで目的がある場合のみ、または使用しない。
• ヒーローメトリクステンプレート。大きな数字、小さなラベル、補足統計、グラデーションアクセント。SaaSの決まり文句。
• 同一カードグリッド。アイコン＋見出し＋テキストの同じサイズのカードが延々と繰り返される。
• 最初の考えとしてのモーダル。モーダルはたいてい怠惰です。まずインラインやプログレッシブな代替手段を尽くしてください。

コピー

• すべての言葉は価値ある場所を占めます。見出しの言い換え、タイトルを繰り返すイントロは禁止。
• emダッシュは禁止。代わりにカンマ、コロン、セミコロン、ピリオド、括弧を使用します。

AIスロップテスト

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

カテゴリ反射チェック — 2つのレベル：

• 第一段階：カテゴリだけでテーマとパレットが推測できる場合（「可観測性 → ダークブルー」「ヘルスケア → 白＋ティール」「金融 → ネイビー＋ゴールド」「暗号通貨 → 黒地にネオン」）、それはトレーニングデータの反射です。シーンの文とカラー戦略を、答えがドメインから自明でなくなるまで練り直します。
• 第二段階：カテゴリとアンチリファレンスから美的ファミリーが推測できる場合（「SaaSクリームではないAIワークフローツール → エディトリアルタイポグラフィック」「ネイビー＆ゴールドではないフィンテック → ターミナルネイティブダークモード」）、それは一段階深い罠です。最初の反射は避けられましたが、2番目は避けられていません。両方の答えが自明でなくなるまで練り直します。

リファレンスファイル

このスキルの 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/                   # ディレクトリをスキャン
npx impeccable detect index.html             # HTMLファイルをスキャン
npx impeccable detect https://example.com    # URLをスキャン（Puppeteerが必要）

HTML、CSS、JSX、TSX、Vue、Svelteファイルを25以上のアンチパターンについてスキャンします。終了コード0 = クリーン、2 = 問題あり。Node.js 18+ が必要です。

ソース

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