使い方ガイドへスキップ
impeccable作者 Paul Bakaus

Impeccable スキル。

Claude Code と Codex 向けのデザインレビュースキル:インターフェースのデザイン、批評、監査、洗練、アニメーション化、改善を一つのスキルで行います。

  • デザインレビュー & アクセシビリティ
  • UI コード
pbakaus/impeccable · plugin/skills/impeccable/SKILL.mdSKILL.md
--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, … --- ## Setup ## How to design ## Modes ## Commands
2026-09-14 にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全11,912文字

01 できること

Claude CodeとCodexにおいてimpeccableスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

Impeccableは、デザイン、批評、監査、仕上げ、アニメーション、リファインメントを通じてフロントエンドインターフェースを変革します。ウェブサイト、ランディングページ、ダッシュボード、プロダクトUI、コンポーネント、フォーム、設定、オンボーディング、空の状態をカバーし、UXレビュー、視覚的階層、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ設定、タイポグラフィ、スペーシング、レイアウト、色、モーション、マイクロインタラクション、デザインシステムを扱います。

このスキルは、プロダクショングレードのコード、最高レベルの創造性、明確なPOV、そして卓越したクラフトを通じて、常識を超えたクラフトを実現します。作業はPersuade、Operate、Read、Experienceという4つのモードと、20以上の専門コマンドを中心に整理されています。各セッションでは、ランチャースクリプトを介してプロダクトコンテキスト、ビジュアルワールド、サーフェスブリーフを読み込み、その後コマンド固有のプレイブックとクラフト品質のフロアに従います。

生成されるもの

  • initコマンドを介して永続的なプロダクトコンテキストを取得するPRODUCT.md
  • documentコマンドを介して既存のプロジェクトコードから生成されるDESIGN.md
  • extractコマンドを介してデザインシステムに取り込まれる再利用可能なトークンとコンポーネント
  • 完全な成果物、最高レベルの創造性、卓越したクラフトを備えたプロダクショングレードのUIコード
プロンプト例を見る ↗

仕組み

  1. 01
    セッションコンテキストを一度だけ読み込む

    impeccable スクリプトを、セッションごとに1回、スキルディレクトリからcontext引数を付けて実行します。

  2. 02
    依頼のPlaybookを読み込む

    明示的または暗黙のサブコマンドについてはCommandsテーブルのリファレンスを読み込み、新しいサーフェスや置き換えとなるビジュアルの世界観にはnew-work.mdを読み込みます。

  3. 03
    編集前にCraft Floorを読む

    分析と方向性の決定が済んだら、小さな調整も含めUIの編集を行う直前にcraft-floor.mdを読みます。

  4. 04
    サーフェスの種類からモードを選ぶ

    訪問者が意思決定して行動するランディングページやマーケティングにはPersuadeを選びます。訪問者がタスクを完了するアプリUIやダッシュボードにはOperateを選びます。

  5. 05
    範囲を限定したパスで検証する

    完全にビルドしたうえで、webではデスクトップとモバイルを合わせて、ネイティブでは出荷対象のデバイスクラスをまとめてカバーする一括ラウンドで一度検査します。

02 適合性を確認

impeccable スキルを使用するタイミング

この種のデザインレビューが必要な場合は、Claude Code または Codex で impeccable スキルを使用してください。適合性と制限はスキル自体のファイルから引用しています。

適している場合

  • ユーザーがフロントエンドインターフェースをデザイン、リデザイン、整形、批評、監査、洗練、明確化、抽出、堅牢化、最適化、適応、アニメーション化、色付け、抜き出し、その他の方法で改善したいとき
  • よりボールドで心地よいものにする必要がある平凡なデザイン
  • 静かにするべき、うるさいデザイン
  • UI要素に対するブラウザでのライブな反復作業
  • 技術的に非凡だと感じられるべき野心的なビジュアルエフェクト

境界を知る

  • バックエンドのみのタスク

提供すべきもの

  • 対象ファイルまたはルートcontextスクリプトを実行する際、--targetフラグにパス引数を付けて、名前付きのソースファイルまたはルートを渡します。
  • PRODUCT.mdランチャーが読み込む、永続的なプロダクトコンテキストファイルです。ランチャーが失敗した場合は、存在しないコンテキストを作り出すことなく、既存のファイルを直接読みます。
  • ビジュアルリグレッションのgoldenまたはスクリーンショットのフィクスチャアプリを実行できない場合は、コミット済みのビジュアルリグレッションgoldenやスクリーンショットのフィクスチャから始めます。

03 スキルの内部

impeccable スキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する6つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を変える部分です。

  1. ブリーフが優先されます

    固定されている美観、時代、素材、フォント、パレットは、それらが飽和パターンの警告と矛盾する場合でも尊重してください。明確なブリーフを自分の好みに引き寄せることは失敗です。

  2. リファインメントは保持し、リデザインは置き換える

    リファインメントは、既存のアイデンティティ、振る舞い、コピー、そしてスコープ外のすべてを保持します。

  3. ビジュアルの権威はエビデンスであり、ファイル名ではありません

    DESIGN.mdがないだけでは、プロジェクトがグリーンフィールドであるとは限りません。新規作業のプレイブックは、視覚的な証拠に基づいて、既存の世界を保持するか、拡張するか、置き換えるかを判断します。

  4. ループではなく、限定されたパスで検証してください

    この上限は、スクリーンショット、不具合スキャン、微調整、再構築を含むサイクル全体をカバーします。

  5. ドリフトを副作用として修復しないでください

    CONTEXT_STALEディレクティブは報告されるものであり、ユーザーが明示的に依頼しない限り対応してはいけません。唯一の例外は、autoとマークされた検出結果で、これはそのファイルへの次回の書き込み時にどのみち実行されます。

  6. ランチャーの失敗は作業を止めません

    スクリプトが拒否または失敗した場合は、別のメッセージを送信し、欠落しているコンテキストを作り出すことなく、既存のPRODUCT.mdとDESIGN.mdを直接読み込んでください。

04 実際に使う

Claude Code または Codex に impeccable をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに impeccable を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

plugin/skills/impeccable/SKILL.md用の汎用的なskills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初のデザインレビュータスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Audit [src/components/SettingsPanel.tsx] for accessibility and responsive behavior, then polish the form layout and typeset the section headings to improve visual hierarchy. The panel should feel confident but scannable for users managing account preferences.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • 最大でもあと1回のラウンドで確認し、それ以上の磨き込みはやめてください
  • 限定された検証サイクルの一部として不具合スキャンを実行してください
  • 現在のトークン、CSS、コンポーネント、またはアセットと対象および鮮度を照合してください
  • テーマシステムを扱う際は、テーマとバリアントのキャプチャを比較してください

OpenDesignではimpeccableが同梱されています。Plugins → Skillsで、上部バーから選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/pbakaus/impeccable ブランチ main
スキルファイル
plugin/skills/impeccable/SKILL.md 検証時にコンテンツチェックサムを記録。コミット cb56ed6
License
Apache-2.0 LICENSE より。SKILL.md には「Apache 2.0」と記載されています。
リポジトリスター数
67,876 pbakaus/impeccable リポジトリ全体の GitHub スナップショットを 2026-09-14 に取得。impeccable の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱(2026-08-28 確認)。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. セットアップセッションごとに一度コンテキストスクリプトを実行し、プレイブックを読み込み、編集前にクラフトフロアを確認してください
  2. デザインの仕方ブリーフが優先され、リファインメントはアイデンティティを保持し、リデザインは置き換えます。視覚的な権威はファイル名ではなく証拠に基づきます
  3. モードランディングページにはPersuade、ダッシュボードにはOperate、ドキュメントにはRead、ポートフォリオにはExperienceを使用します
  4. コマンドBuild、Evaluate、Refine、Enhance、Fix、Iterateのカテゴリに整理された20以上のコマンドと参照ファイル
スキル自身による説明
「ユーザーがフロントエンドインターフェースをデザイン、再デザイン、形成、批評、監査、洗練、明確化、抽出、強化、最適化、適応、アニメーション化、カラー化、抽出、またはその他の方法で改善したい場合に使用します。ウェブサイト、ランディングページ、ダッシュボード、プロダクト UI、アプリシェル、コンポーネント、フォーム、設定、オンボーディング、エンプティステートをカバーします。UX レビュー、視覚階層、情報アーキテクチャ、認知負荷、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ設定、アンチパターン、タイポグラフィ、フォント、スペーシング、レイアウト、配置、カラー、モーション、マイクロインタラクション、UX コピー、エラー状態、エッジケース、国際化、再利用可能なデザインシステムまたはトークンを扱います。また、より大胆で楽しいものにする必要がある平凡なデザイン、より静かにすべき派手なデザイン、UI 要素のライブブラウザでの反復、または技術的に驚異的であるべき野心的なビジュアルエフェクトにも使用します。バックエンドのみまたは UI 以外のタスクには使用しません。」

SKILL.md のフロントマター説明。完全なファイルは約 11,912 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

impeccableスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

どのコマンドを使うべきですか?

引数が指定されていない場合は、routing.mdを読み込み、そのコンテキストに応じたメニューを表示してください。コマンドを自動実行してはいけません。明示的または明確に暗示されたリクエストの場合は、Commandsテーブルの参照を読み込んでください。

ワークフローやコマンド選択に関する質問については、routing.md内のWorkflow questionsセクションを参照してください。それ以外の場合は、一般的なデザイン作業として扱ってください。

Impeccable

実際のデザインレビュータスクで impeccable を実行してください。

impeccable スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

ターミナル
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応