OpenSource-Hub

impeccable

CLI ツール

pbakaus/impeccable

AI フロントエンドデザイン言語とコマンドセット。

概要

Impeccable は、共有のデザイン語彙、ドメインリファレンス、アンチパターンルールを提供し、AI モデルのフロントエンドデザイン出力を強化します。23 個のコマンドが含まれており、さまざまなコーディングアシスタントのスキルとして使用できます。

README プレビュー

# Impeccable\n\nThe vocabulary you didn't know you needed. 1 skill, 23 commands, and curated anti-patterns for impeccable frontend design.\n\n> **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles.\n\n## Why Impeccable?\n\nAnthropic's [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) was the first widely-used design skill for Claude. Impeccable started from there.\n\nEvery model trained on the same SaaS templates. Skip the guidance and you get the same handful of tells on every project: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, the rounded-square icon tile above every heading.\n\nImpeccable adds:\n- **7 domain reference files** ([view source](skill/)). Typography, color, motion, spatial, interaction, responsive, UX writing. Load on every command, alongside a brand-vs-product register that adjusts the defaults.\n- **23 commands.** A shared design vocabulary with your AI: `polish`, `audit`, `critique`, `distill`, `animate`, `bolder`, `quieter`, and more.\n- **27 deterministic anti-pattern rules** plus a 12-rule LLM critique pass. CLI and browser extension run the deterministic ones with no LLM and no API key. Each is tied to specific design guidance the skill teaches against.\n\n## What's Included\n\n### The Skill: impeccable\n\nA comprehensive design skill with 7 domain-specific references ([view skill](skill/SKILL.src.md)):\n\n| Reference | Covers |\n|-----------|--------|\n| [typography](skill/reference/typography.md) | Type systems, font pairing, modular scales, OpenType |\n| [color-and-contrast](skill/reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility |\n| [spatial-design](skill/reference/spatial-design.md) | Spacing systems, grids, visual hierarchy |\n| [motion-design](skill/reference/motion-design.md) | Easing curves, staggering, reduced motion |\n| [interaction-design](skill/refer

FAQ (5)

トラブル対応
impeccableのdetect.mjsを実行する際に、'bundled detector not found'エラーが発生するのはなぜですか?

このエラーは、npx skillsインストーラがスキルサブツリーのみを提供し、detectorエンジンが欠落していたために発生しました。最新リリースで問題は修正されていますので、スキルを更新してください。更新できない場合は、以下の回避策を使用してください: mkdir -p .agents/skills/impeccable/scripts/detector && ln -sf "$(pwd)/node_modules/impeccable/cli/engine/detect-antipatterns.mjs" .agents/skills/impeccable/scripts/detector/detect-antipatterns.mjs。これにより、impeccable npmパッケージ内のエンジンが期待される場所にシンボリックリンクされます。

参照 Issue #168
トラブル対応
Windows 上で critique-storage.mjs スクリプトが出力を返さないのはなぜですか?

スクリプトのエントリポイントガードは、import.meta.url(Windows上ではフォワードスラッシュを使用)とfile://${process.argv[1]}(バックスラッシュ)を比較したため、等価性チェックが失敗し、main()が呼び出されませんでした。このバグはv3.1.1で、セパレータを正規化するpathToFileURL(process.argv[1]).hrefに切り替えることで修正されました。次のコマンドでスキルを更新してください:npx skills add pbakaus/impeccable

参照 Issue #155
トラブル対応
pnpm workspace 内で impeccable live-server --background がタイムアウトを報告し、'stop' でサーバーが見つからないのはなぜですか?

既知のルート解決バグ(skill 4.6.0 / engine 0.1.15): pnpm ワークスペース内では、親プロセスとデタッチされたバックグラウンド子プロセスが異なるプロジェクトルートを解決してしまうため、server.json がコマンドを実行したディレクトリではなく、兄弟ワークスペースアプリ(例: apps/web/.impeccable/live/server.json)に書き込まれます。親プロセスはその後誤ったパスをポーリングし、Timed out waiting for live server to start. と表示して終了コード 1 で終了します。これはサーバーが正常(curl http://127.0.0.1:8400/health が ok を返す)であっても発生します。--target . を渡しても効果はありません。このフラグは子プロセスが生成される前に消費されるためです。

回避策:
1. 状態ファイルが実際にどこに作成されたかを確認する: find . -path '*/.impeccable/live/server.json'
2. そのディレクトリ(兄弟アプリ)から stop を実行して、孤立したサーバーを停止する: cd apps/web && impeccable live-server stop --keep-inject
3. またはポートを指定して終了させる: lsof -nP -iTCP:8400 -sTCP:LISTEN で PID を取得し、kill <PID> を実行する。
4. 問題を完全に回避するには、ワークスペースルートから impeccable live-server を起動するか、静的モックファイルを pnpm ワークスペース外の独立したディレクトリに移動してください。そこではこのバグは発生しません。

注意: 兄弟アプリからオプションなしの stop を実行すると、誤ったプロジェクトのエントリファイルに対して live-inject --remove も実行されてしまうため、クリーンアップ時には --keep-inject を使用してください。

参照 Issue #1086
トラブル対応
impeccable detect が、パディングのない内部ラッパーを含むラッパーに対して cramped-padding の誤検知を報告するのはなぜですか?

impeccable ≤4.1.0 では、cramped-padding の flush チェックは直接の子要素のみを測定します。色付きラッパーの唯一の子要素が、透明でテキストを含まない内部 div(例: コンテナクエリのサイジング用ラッパー)である場合、その内部ボックスは四辺すべてに接しているため、テキストを持つ孫要素に通常のパディングがあったとしてもルールが発動します。回避策: ファイルスコープの ignore を追加してください — ignore-value cramped-padding "*" --file <glob> — ただし、これによりそれらのファイル内の正当な cramped-padding の指摘も抑制されることに注意してください。恒久対応: PR #1059 では、子要素が実際に積み重なる(block/flow-root または column flex。row-flex の子要素は上下に flush にならない)透明でテキストを含まないラッパー1つを見通し、代わりにそれらの子要素の位置で inset を測定するようルールが修正されます。その PR がリリースされたら impeccable をアップグレードしてください。

参照 Issue #963
ハウツー
Impeccableの批評結果をセッション間で永続化して、解決済みの問題を再提起しないようにするには?

手動でCRITIQUE.mdファイルを作成し、以前の批評出力を保存します。新しい/impeccable critiqueを実行する前に、エージェントにCRITIQUE.mdを読んでコンテキストを把握するよう指示し、レビュー後にそれを更新します。この回避策は、組み込みの永続化機能が実装されるまで、提案された機能を模倣します。

参照 Issue #128