VerifiedPlugin
agent-reviews
Manage GitHub PR review comments from the terminal and from AI coding agents. PR review bots (Copilot, Cursor Bugbot, CodeRabbit, etc.) leave inline comments on your pull requests.
3 skills277
@pbakausDesign
HotPlugin
impeccable
Design guidance for AI coding agents. 1 skill, 24 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design.
Plugin Signal81/100Strong
maintained100
capable37
documented100
adopted100
Install on Claude Code
> /plugin marketplace add pbakaus/impeccable> /plugin install impeccable@impeccable
Stats
70,875
Stars
4,303
Forks
Active
Maintenance
JavaScript
Language
Apache-2.0
License
7h ago
Last commit
10mo ago
Created
24d ago
Added
Repo: pbakaus/impeccable
What's inside
Agent(4 agents)
impeccable-asset-producerProduces clean reusable raster assets from approved Impeccable mock references without redesigning the direction.impeccable-documenterRecords DESIGN.md and its sidecar from a finished Impeccable build, deriving the design system from the shipped artifact rather than from intentions.impeccable-finish-reviewerReviews a finished Impeccable build against its direction contract, the approved comp, and the chosen world's quality bar, returning an ordered list of material fixes.impeccable-manual-edit-applierApplies leased Impeccable live manual copy-edit batches to source and returns canonical Apply results.
README
Impeccable
Design guidance for AI coding agents. 1 skill, 24 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design.
Quick start: From your project root, run
npx impeccable install, then run/impeccable initinside your AI coding tool. Full docs: impeccable.style.
Why Impeccable?
Anthropic's frontend-design was the first widely-used design skill for Claude. Impeccable started from there.
Every 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.
Impeccable adds:
- One setup flow.
/impeccable initrecords durable product truth inPRODUCT.md, so later commands know the audience, purpose, operating context, constraints, voice, and evidence without confusing those facts with surface-level visual direction. - 24 commands. A shared design vocabulary with your AI:
polish,audit,critique,distill,animate,bolder,quieter, and more. - 61 deterministic detector rules plus LLM-only critique checks. The CLI and browser extension run the deterministic rules with no LLM and no API key.
What's Included
The Skill: impeccable
The skill installs as one command:
/impeccable <command> <target>
Start every new project with:
/impeccable init
init inspects the project, asks only for material gaps in durable product truth, and writes PRODUCT.md. Visitor mode and visual direction are chosen later for each surface; incumbent or newly built visual systems are recorded separately in DESIGN.md.
24 Commands
All commands are accessed through /impeccable:
| Command | What it does |
|---|---|
/impeccable craft | Full shape-then-build flow with visual iteration |
/impeccable init | One-time setup: gather durable product context, write PRODUCT.md, configure live mode when applicable, recommend next steps |
/impeccable document | Generate root DESIGN.md from existing project code |
/impeccable extract | Pull reusable components and tokens into the design system |
/impeccable shape | Plan UX/UI before writing code |
/impeccable critique | UX design review: hierarchy, clarity, emotional resonance |
/impeccable audit | Run technical quality checks (a11y, performance, responsive) |
/impeccable polish | Final pass, design system alignment, and shipping readiness |
/impeccable bolder | Amplify boring designs |
/impeccable quieter | Tone down overly bold designs |
/impeccable distill | Strip to essence |
/impeccable harden | Error handling, i18n, text overflow, edge cases |
/impeccable onboard | First-run flows, empty states, activation paths |
/impeccable animate | Add purposeful motion |
/impeccable colorize | Introduce strategic color |
/impeccable typeset | Fix font choices, hierarchy, sizing |
/impeccable layout | Fix layout, spacing, visual rhythm |
/impeccable delight | Add moments of joy |
/impeccable overdrive | Add technically extraordinary effects |
/impeccable clarify | Improve unclear UX copy |
/impeccable adapt | Adapt for different devices |
/impeccable optimize | Performance improvements |
/impeccable live | Visual variant mode: iterate on elements in the browser |
/impeccable generate | Generate variants of a named element in the live browser, no manual picking |
Use /impeccable pin <command> to create standalone shortcuts (e.g., pin audit creates /audit).
Usage Examples
/impeccable audit blog # Audit blog hub + post pages
/impeccable critique landing # UX design review
/impeccable polish settings # Final pass before shipping
/impeccable harden checkout # Add error handling + edge cases
Or use /impeccable directly with a description:
/impeccable redo this hero section
Anti-Patterns
The skill includes explicit guidance on what to avoid:
- Don't use overused fonts (Arial, Inter, system defaults)
- Don't use gray text on colored backgrounds
- Don't use pure black/gray (always tint)
- Don't wrap everything in cards or nest cards inside cards
- Don't use bounce/elastic easing (feels dated)
See It In Action
Visit the Neo Mirai case study to see a before/after case study of a real project transformed with Impeccable commands.
Installation
The skill needs no runtime of its own. Every skill copy ships a small launcher (scripts/impeccable, plus impeccable.cmd for Windows) that runs the Impeccable engine, a self-contained binary that either sits next to the launcher or is downloaded once on first run into ~/.impeccable/bin/. Node is only involved if you use the npx impeccable installer, which is a shim around the same binary; the manual and Git options below work without it.
Option 1: CLI installer (Recommended)
From the root of your project, run:
npx impeccable install
This shows the harness folders or installed CLIs it detected (for example ~/.claude, ~/.codex, ~/.grok, ~/.hermes, ~/.veto, or project-local .cursor), lets you keep the detected set or customize providers, then asks whether to install into the current project or globally. Use --providers=claude,codex,cursor,grok,hermes,veto and --scope=project|global to skip those choices in scripts. On Claude Code, Cursor, Codex, GitHub Copilot, and Grok Build, it also installs the provider-native hook manifest for the current project. Veto receives the packaged skill under ~/.veto/skills/ and does not run native Impeccable edit hooks. Works with Cursor, Claude Code, Gemini CLI, Codex CLI, Grok Build, Hermes Agent, Veto, and every other supported tool. Reload your harness afterward.
To refresh an existing install, run:
npx impeccable update
Codex users should open /hooks after install or update and approve the project hook when prompted. Codex tracks trust by hook definition, so updates that change .codex/hooks.json can require approval again. Grok Build users need project folder trust (/hooks-trust or launch with --trust) before .grok/hooks/ scripts run.
See Allow the hook in your harness for harness-specific trust and verification steps.
Option 2: Git Submodule
For teams that want to keep Impeccable vendored and updated through Git, add this repo as a submodule and link the compiled provider build into your harness folders:
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
git add .gitmodules .impeccable .claude .cursor
git commit -m "Add Impeccable skills"
Use the providers your project needs, for example claude, cursor, gemini, codex, github, grok, hermes, opencode, pi, qoder, trae, trae-cn, rovo-dev, vibe, or veto. The command links individual skill folders from .impeccable/dist/universal/ and leaves existing real skill directories untouched unless you pass --force.
To update later:
git submodule update --remote .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
Option 3: Plugin install
GitHub Copilot in VS Code:
Install Impeccable from the Visual Studio Marketplace, or run:
code --install-extension renaissance-geek.impeccable
Requires VS Code 1.109.3+, Copilot Chat access, and a trusted local workspace. Open Chat in Agent mode and try /impeccable polish. This skill-only extension does not install automatic hooks; avoid a duplicate Impeccable skill in the same workspace/profile. See VS Code distribution details.
Claude Code:
/plugin marketplace add pbakaus/impeccable
Claude Code only. After adding the marketplace, open
/pluginand install Impeccable from the list.
Grok Build:
grok plugin install pbakaus/impeccable#plugin --trust
Grok Build only. The
#pluginsuffix installs the slim plugin package (skills, agents, and hooks) instead of the full monorepo. Then run/impeccable initin a Grok session. Project-scoped installs vianpx impeccable install --providers=grokalso work and write.grok/skills/plus.grok/hooks/impeccable.json.
Option 4: Download from Website
Visit impeccable.style, download the ZIP for your tool, and extract to your project.
Option 5: Copy from Repository
Cursor:
cp -r dist/cursor/.cursor your-project/
Note: Cursor skills require setup:
- Switch to Nightly channel in Cursor Settings → Beta
- Enable Agent Skills in Cursor Settings → Rules
Claude Code:
# Project-specific
cp -r dist/claude-code/.claude your-project/
# Or global (applies to all projects)
cp -r dist/claude-code/.claude/* ~/.claude/
OpenCode:
cp -r dist/opencode/.opencode your-project/
DeepSeek Harness:
# Project-specific
cp -r dist/dsh/.dsh your-project/
# Or global (applies to all projects)
mkdir -p "${DSH_HOME:-$HOME/.dsh}/skills"
cp -r dist/dsh/.dsh/skills/* "${DSH_HOME:-$HOME/.dsh}/skills/"
The CLI honors DSH_HOME only when it resolves inside your home directory (or to home itself); otherwise it uses ~/.dsh. An outside-home manual copy is not managed by impeccable install/update.
Hermes Agent:
# Global (applies to all projects; uses the active profile, or ~/.hermes by default)
cp -r dist/hermes/.hermes/skills/* "${HERMES_HOME:-$HOME/.hermes}/skills/"
# Or project-specific
cp -r dist/hermes/.hermes your-project/
Note: Hermes gates project-local skills behind a per-repo trust decision (they are procedure documents, so auto-loading them from any cloned repo is treated as a prompt-injection vector). After a project-scoped install, run
hermes skills trustonce from the project root. Global installs into the active$HERMES_HOME/skills/(or~/.hermes/skills/when unset) load without a trust step./impeccable <command>then routes through the skill's Commands table; the design hook does not install on Hermes (no hook surface).
Pi:
cp -r dist/pi/.pi your-project/
Gemini CLI:
cp -r dist/gemini/.gemini your-project/
Note: Gemini CLI skills require setup:
- Install preview version:
npm i -g @google/gemini-cli@preview- Run
/settingsand enable "Skills"- Run
/skills listto verify installation
Codex CLI:
# Project-local
cp -r dist/agents/.agents your-project/
mkdir -p your-project/.codex
cp dist/codex/.codex/hooks.json your-project/.codex/hooks.json
# Or install the skill user-wide. Copy .codex/hooks.json into each project
# where you want the design hook to run.
mkdir -p ~/.agents/skills
cp -r dist/agents/.agents/skills/* ~/.agents/skills/
The asset-producer subagent ships nested inside the skill's own
agents/folder, which Codex auto-discovers. No separate.codex/agents/copy is needed. The hook is project-local because Codex discovers hooks from.codex/hooks.jsonnext to trusted project config.
GitHub Copilot:
cp -r dist/github/.github your-project/
Trae:
File tree
Showing a partial view of a very large repo.
More plugins by @pbakaus.
View @pbakaus’s profile@pbakausFAQ
impeccable is a Claude Code plugin with 1 hand-picked skill for design work, indexed on Flowy. Install it with the command on its page. It includes impeccable. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is impeccable?
- Design guidance for AI coding agents. 1 skill, 24 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design.
- How do I install impeccable?
- Run these in Claude Code: /plugin marketplace add pbakaus/impeccable then /plugin install impeccable@impeccable. Then prompt normally.
- Does impeccable auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is impeccable free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it