Impeccable

1 skill · 20 commands · curated anti-patterns — by Paul Bakaus

1 — 概要
What is Impeccable?

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

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

1スキル
20コマンド
8対応ツール
2 — スキル構成
frontend-design スキル

コアスキル frontend-design は、デザイン方向性の決定・実装原則・品質チェック（AI スロップテスト）を LLM に伝える主ファイルと、7 つのドメイン別リファレンスで構成される。

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

ソースファイルは 1 つ。ビルド時に 8 つのプロバイダ向けフォーマットへ自動変換される。

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/skills/"]
3 — 20 コマンド一覧
コマンドリスト

コマンドはオプション引数で対象を絞り込める。例: /audit blog・/polish settings page。複数コマンドも連鎖可能: /audit /normalize /polish blog。

コマンド役割
/teach-impeccable初回セットアップ: デザインコンテキストを収集して設定ファイルに保存
/audita11y・パフォーマンス・レスポンシブの技術品質チェック（編集なし）
/critiqueUX デザインレビュー: ヒエラルキー・明確さ・感情的共鳴
/normalizeデザインシステム標準への整合
/polishリリース前の最終磨き上げ
/distill本質への削ぎ落とし
/clarify不明瞭な UX コピーの改善
/optimizeパフォーマンス改善
/hardenエラーハンドリング・i18n・エッジケース対応
/animate意図あるモーションの追加
/colorize戦略的な色の導入
/bolder凡庸なデザインを大胆に
/quieter過剰に大胆なデザインを落ち着かせる
/delight喜びの瞬間を追加
/extract再利用可能なコンポーネントへの抽出
/adapt異なるデバイスへの適応
/onboardオンボーディングフローの設計
/typesetフォント選択・ヒエラルキー・サイズの修正
/arrangeレイアウト・スペーシング・視覚的リズムの修正
/overdrive技術的に卓越したエフェクトの追加
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全体を均一スペーシングにする — リズムのないレイアウトは単調
コンテキスト収集が必須: デザインスキルはプロジェクトコンテキスト（ターゲット・ユースケース・ブランドトーン）なしでは汎用的な出力しか生成できない。/teach-impeccable を最初に実行するか、プロジェクトルートに .impeccable.md を置くこと。
5 — インストール
推奨: 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/codex/.codex/* ~/.codex/
Pi
cp -r dist/pi/.pi your-project/
Cursor の注意: Agent Skills を使うには Nightly チャンネルへの切り替えと、Cursor Settings → Rules で Agent Skills の有効化が必要。
公式