Impeccable

1 skill · 23 commands · 24 detector issues — by Paul Bakaus

1 — 概要
What is Impeccable?

Impeccable は、LLM 搭載の開発ツール（Cursor・Claude Code・Gemini CLI など）向けに、フロントエンドデザインの品質を引き上げるスキル集とコマンドセット。すべての LLM は同じ凡庸なテンプレートを学習してきた。そのままでは「Inter フォント・紫グラデーション・カード入れ子・カラー背景にグレー文字」という予測可能な失敗を繰り返す。

Impeccable はそのバイアスを、拡張スキル + 23 のステアリングコマンド + 厳選アンチパターン + スタンドアロン検出 CLIで打ち破る。

1スキル
23コマンド
24検出項目
11対応ツール
2 — スキル構成
impeccable スキル

コアスキル impeccable は、デザイン方向性の決定・実装原則・品質チェック（AI スロップテスト）を LLM に伝える主ファイルと、7 つのドメイン別リファレンスで構成される。Anthropic の frontend-design を土台に、より強い事前ゲートとコマンドルーティングを足している。

typography.md
タイプスケール・フォントペアリング・モジュラースケール・OpenType 機能
color-and-contrast.md
OKLCH・ティントニュートラル・ダークモード・アクセシビリティ
spatial-design.md
スペーシングシステム・グリッド・視覚的ヒエラルキー
motion-design.md
イージングカーブ・スタガリング・モーション削減対応
interaction-design.md
フォーム・フォーカス状態・ローディングパターン
responsive-design.md
モバイルファースト・流動的デザイン・コンテナクエリ
ux-writing.md
ボタンラベル・エラーメッセージ・エンプティステート — すべてのワードに意味を持たせる
ビルドアーキテクチャ

ソースファイルは 1 つ。ビルド時に各プロバイダ向けフォーマットへ自動変換される。Cursor、Claude Code、OpenCode、Gemini CLI、Codex CLI、Pi、GitHub Copilot、Kiro、Trae、Rovo Dev、Qoder で使える。

flowchart TD SRC["source/skills/frontend-design/"] BUILD["bun run build"] SRC --> BUILD BUILD --> CUR["Cursor
.cursor/skills/"] BUILD --> CC["Claude Code
.claude/skills/"] BUILD --> OC["OpenCode
.opencode/skills/"] BUILD --> GEM["Gemini CLI
.gemini/skills/"] BUILD --> COD["Codex CLI
.codex/skills/"] BUILD --> KIR["Kiro
.kiro/skills/"] BUILD --> PI["Pi
.pi/skills/"] BUILD --> AG["Agents / Copilot
.agents / .github"] BUILD --> OTHER["Trae / Rovo / Qoder
provider bundles"]
3 — 23 コマンド一覧
コマンドリスト

メインの呼び出しは /impeccable <command>。/impeccable pin audit のようにピン留めすると、/audit などの単独ショートカットも作れる。

コマンド役割
/impeccable craftshape で合意したブリーフから実装まで進める
/impeccable shapeコード前に UX/UI の方針を固める
/impeccable teach初回セットアップ: PRODUCT.md / DESIGN.md の文脈を作る
/impeccable document既存コードから DESIGN.md を生成する
/impeccable extract再利用可能なコンポーネントとトークンを抽出する
/impeccable critiqueUX デザインレビュー: ヒエラルキー・明確さ・感情的共鳴
/impeccable audita11y・パフォーマンス・レスポンシブの技術品質チェック
/impeccable polishリリース前の最終磨き上げ
/impeccable bolder凡庸なデザインを大胆にする
/impeccable quieter過剰に大胆なデザインを落ち着かせる
/impeccable distill本質へ削ぎ落とす
/impeccable hardenエラーハンドリング・i18n・エッジケース対応
/impeccable onboard初回体験・空状態・アクティベーションを設計する
/impeccable animate意図あるモーションを追加する
/impeccable colorize戦略的な色を導入する
/impeccable typesetフォント選択・ヒエラルキー・サイズを修正する
/impeccable layoutレイアウト・スペーシング・視覚的リズムを修正する
/impeccable delight喜びの瞬間を追加する
/impeccable overdrive技術的に卓越したエフェクトを追加する
/impeccable clarify不明瞭な UX コピーを改善する
/impeccable adapt異なるデバイスや画面サイズへ適応する
/impeccable optimizeUI パフォーマンスを診断して改善する
/impeccable liveブラウザ上で要素を選び、代替案を HMR で試す
4 — アンチパターン
AI スロップテスト

「このインターフェイスを誰かに見せて AI が作った と言ったら、すぐに信じられるか?」— 信じられるなら、それが問題だ。

Impeccable は以下のアンチパターンを明示的に LLM へ伝える:

タイポグラフィ
  • NGInter・Roboto・Arial・Open Sans・system デフォルトを使う
  • NGmonospace フォントを「技術的な雰囲気」の手抜き表現に使う
  • NGすべての見出しの上に丸角アイコンを置く
カラー & テーマ
  • NGカラー背景にグレー文字（白抜き感が失われる）
  • NG純粋な黒 (#000) または純白 (#fff) — 自然界には存在しない
  • NGAI 御用達カラー: シアン・暗背景に紫→青グラデーション・ネオンアクセント
  • NGメトリクスや見出しへのグラデーションテキスト
  • NGグローエフェクト付きダークモード（実際のデザイン判断を回避）
レイアウト & スペーシング
  • NGすべてをカードに入れる — コンテナが必要でないものまで
  • NGカードの中にカードを入れる（視覚的ノイズ）
  • NG同じサイズのカードグリッド（アイコン＋見出し＋テキストの繰り返し）
  • NGヒーローメトリクスレイアウトテンプレート（大きい数値・小さいラベル・グラデーントアクセント）
  • NGすべてを中央揃えにする
  • NG全体を均一スペーシングにする — リズムのないレイアウトは単調
コンテキスト収集が必須: デザインスキルはプロジェクトコンテキスト（ターゲット・ユースケース・ブランドトーン）なしでは汎用的な出力しか生成できない。/impeccable teach を最初に実行して PRODUCT.md と DESIGN.md を用意する。
5 — CLI 検出
AI スロップを機械検出

Impeccable は AI ハーネス用スキルだけでなく、スタンドアロン CLI も提供する。ディレクトリ、単一 HTML、URL を対象に、AI スロップと一般的なデザイン品質の問題を検出できる。

npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect https://example.com
npx impeccable detect --fast --json .

検出対象は 24 種。side-tab borders、purple gradients、bounce easing、dark glows などの AI スロップに加え、行長、詰まりすぎた padding、小さい touch target、見出しスキップなども拾う。

6 — インストール
推奨: Web からダウンロード

impeccable.style にアクセスして、使用ツール向けの ZIP をダウンロード・展開するのが最もシンプル。

Cursor
cp -r dist/cursor/.cursor your-project/
Claude Code
cp -r dist/claude-code/.claude your-project/
OpenCode
cp -r dist/opencode/.opencode your-project/
Gemini CLI
cp -r dist/gemini/.gemini your-project/
Codex CLI
cp -r dist/agents/.agents your-project/
Pi
cp -r dist/pi/.pi your-project/
GitHub Copilot
cp -r dist/github/.github your-project/
Trae / Rovo Dev / Qoder
cp -r dist/<provider>/<config-dir> your-project/
Cursor の注意: Agent Skills を使うには Nightly チャンネルへの切り替えと、Cursor Settings → Rules で Agent Skills の有効化が必要。
公式