Find what weakens an existing screen
Use critique to review a page or component against usability heuristics and prioritize improvements. Use audit when you need technical findings about accessibility, performance, theming, or responsive behavior.
Overview
Impeccable gives AI coding agents guidance for building interfaces and improving existing ones. It covers visual hierarchy, typography, layout, motion, accessibility, and interface copy. Project context in PRODUCT.md and DESIGN.md helps the agent work from your product requirements and existing design system.
In supported tools, the agent can select the skill when your request matches its description, or you can invoke it explicitly and name a task and target. Specialist agents support asset production, documentation, finishing reviews, and live copy edits. When installed and allowed by your coding tool, hooks run design checks during the agent’s work.
- Web checks and native reviews The automatic detector checks web code and skips projects declared as iOS, Android, or adaptive; the skill provides separate guidance for native interface reviews.
- Optional image generation Image generation needs a supported image tool or provider credentials and approval; the design detector itself needs no API key.
Use Cases
Refine a design without replacing its identity
Target a component whose spacing, typography, color, or visual emphasis needs work. Impeccable’s refinement guidance preserves the existing identity and behavior while addressing the requested change.
Prepare an interface for difficult states
Use harden for errors, internationalization, overflow, and edge cases. For first-run experiences, onboard addresses onboarding flows and empty states.
Capture the design system already in use
Use document to derive DESIGN.md from existing project code, or extract to turn repeated patterns into reusable tokens and components.
Compare alternatives in a running page
Live mode opens your local development server with an overlay so you can select an element, compare variants, and write an accepted change back to source.
Use it on a local checkout. Applying copy edits can run the project’s optional validation script with your permissions. If no chat agent has polled for a minute, Apply can fall back to a local Codex or Claude CLI with approval and sandbox checks disabled. Review the live-mode controls before using Apply in an unfamiliar repository.
Components
The named design tasks belong to the Impeccable skill. Agents support particular workflows, while hooks run automatically at the events listed below. Which components are installed depends on the method and coding tool.
Skills
This plugin's skills 1impeccable
Guides interface design, review, refinement, and design-system work through named tasks.
Agents
4impeccable-asset-producer
Produces raster assets from approved references and constraints without changing the direction.
Produce assets from an approved direction
The Impeccable workflow hands this agent the approved reference, measured specification, output paths, and constraints. Asset production needs image-generation capability. For decision comparisons, it can instead receive a packet describing one comp to render. See the asset producer’s input requirements.
In Cursor, install the project build or use the local plugin preview, then reload Cursor. The plugin preview exposes the agent in Customize; its handoff must retain your project as the working directory. See Cursor installation and preview.
impeccable-documenter
Records a finished build’s design system from the implemented code.
Document the implemented system
The build workflow supplies the artifact paths, product context, documentation reference, and destination. If DESIGN.md already exists, the handoff must include your choice to refresh, overwrite, or merge it. The agent derives durable rules from the built code. See the documenter’s input requirements.
In Cursor, install the project build or use the local plugin preview and reload Cursor. The preview lists the agent in Customize. See Cursor installation and preview.
impeccable-finish-reviewer
Reviews supplied screenshots and build evidence, returning prioritized fixes without editing.
Review a finished build
Supply the original request, confirmed decisions, artifact paths, screenshots, direction contract, and existing detector findings. This agent has no browser and reviews the supplied files; missing or unsuitable captures require recapture. It returns a disposition and material fixes for the parent agent to address. See the finish reviewer’s evidence requirements.
In Cursor, install the project build or use the local plugin preview and reload Cursor. The preview lists the agent in Customize. See Cursor installation and preview.
impeccable-manual-edit-applier
Applies staged live copy edits to source and reports which changes landed.
Apply staged copy changes
The live workflow supplies a leased edit batch, repository root, page URL, script path, and source evidence. This agent edits only the assigned source changes and reports applied and failed entries; the parent thread handles live-session polling and replies. See the manual edit applier’s handoff.
In Cursor, install the project build or use the local plugin preview and reload Cursor. The preview lists the agent in Customize. Before using live Apply, review the permissions and fallback behavior.
Hooks
15Cursor plugin design check
Runs the design detector after Cursor’s Write tool completes.
Check the Cursor plugin hook
The native Cursor package declares this hook in its plugin manifest. It is a local preview, not a published marketplace listing. After loading the preview, inspect Customize → Hooks and the Hooks output channel for configured hooks, executions, and errors. To stop Impeccable’s checks for a project, use the off action in its hook controls.
The captured configuration runs after Write. The Cursor preview guide still describes an earlier pre-edit hook; do not expect this configuration to block a write before it happens.
Claude Code plugin session preparation
Calls Impeccable’s session-preparation handler when a Claude Code session starts.
Check session preparation
This hook comes from the installed Claude Code plugin’s hooks/hooks.json. Accept workspace trust, then open Claude Code’s hook browser to confirm it is registered. The plugin’s Installed panel provides disable and uninstall actions; Impeccable also has project-level hook controls.
Claude Code plugin edit check
Checks UI changes after Claude Code’s Edit or Write tool completes.
Check feedback after edits
The Claude Code plugin registers this hook for Edit and Write. Inspect it in the session’s hook browser. A quiet transcript alone does not establish whether it ran; use Claude Code’s hook debugging guidance when needed. Stop checks through Impeccable’s hook controls or disable the plugin in the Installed panel.
Claude Code plugin finishing check
Runs broader checks on touched UI files when Claude Code finishes responding.
Check the finishing pass
The Claude Code plugin registers this Stop hook for a broader pass over touched UI files, filtering previously reported findings. Confirm registration in the session’s hook browser. Use Impeccable’s hook controls to stop checks, or disable the plugin in the Installed panel.
Codex edit check
Checks UI changes after Codex uses Edit, Write, or apply_patch.
Allow Codex edit checks
Accept hook setup in the Impeccable installer. It writes the Codex hook with the installed skill’s launcher path; the repository’s template path is not the path to copy by hand. Review and trust the hook in Codex’s hook browser, or Settings → Hooks in the app. Changed definitions need review again. The same browser can disable individual non-managed hooks.
Codex finishing check
Runs broader checks on touched UI files when Codex finishes responding.
Allow the Codex finishing pass
The installer writes this Stop hook alongside the Codex edit hook. Review and trust it in Codex’s hook browser, or Settings → Hooks in the app. It checks touched UI files more broadly when the agent finishes responding. Disable it in the hook browser or use Impeccable’s project-level hook controls.
Cursor project design check
Runs the project’s design detector after Cursor’s Write tool completes.
Check the Cursor project hook
Accept hook setup in the project installer, then inspect the project’s .cursor/hooks.json in Customize → Hooks. The Hooks output channel shows executions and errors. Cursor watches hook configuration changes; restart it if the hook does not load. Use Impeccable’s hook controls to stop checks.
Claude Code project session preparation
Calls Impeccable’s session-preparation handler from Claude Code project settings.
Check project session preparation
This is the Claude Code project-settings form of the session hook. Use the installer to configure the appropriate project settings, then inspect registration in Claude Code’s hook browser. Use Impeccable’s hook controls to stop checks; to remove a settings-defined hook, delete its entry from the settings file.
Claude Code project edit check
Checks UI changes after Edit or Write through Claude Code project settings.
Check project feedback after edits
Accept hook setup in the installer and inspect the Edit/Write hook in Claude Code’s hook browser. Project installs normally use .claude/settings.local.json. Use Impeccable’s hook controls to stop checks, or remove the hook’s entry from its settings file.
Claude Code project finishing check
Runs the project’s broader UI checks when Claude Code finishes responding.
Check the project finishing pass
Accept hook setup in the installer and confirm the Stop hook in Claude Code’s hook browser. This pass checks touched UI files when the agent finishes responding. Use Impeccable’s hook controls to stop checks, or remove the hook’s entry from its settings file.
Gemini CLI shell-tool hook
Calls Impeccable’s hook handler before Gemini CLI runs a shell command.
Inspect the Gemini CLI shell hook
The Gemini build declares this BeforeTool hook in .gemini/settings.json for the shell-command tool. After setup, restart Gemini CLI and inspect its hooks panel. Gemini CLI provides individual and all-hook disable actions; see its hook controls.
Gemini CLI completion hook
Calls Impeccable’s hook handler after Gemini CLI finishes an agent turn.
Inspect the Gemini CLI completion hook
The Gemini build declares this AfterAgent hook in .gemini/settings.json. After setup, restart Gemini CLI and inspect its hooks panel. Use Gemini CLI’s individual or all-hook disable action to stop it; see the hook controls.
GitHub Copilot edit check
Runs the detector after supported edit, create, or apply_patch operations.
Check Copilot’s project hook
The project hook is declared in .github/hooks/impeccable.json. In Copilot CLI, accept folder trust, start a new session after configuration changes, and inspect the loaded environment’s hooks. Impeccable’s hook controls can stop its checks; GitHub also documents disabling hooks from a project hook file.
For VS Code’s Copilot harness, inspect Hooks in the Agent Customizations editor and confirm execution in a disposable session. The Impeccable VS Code extension installs the skill without this hook. See VS Code hook configuration.
Grok Build edit tracking
Tracks supported UI edits for feedback at the end of Grok Build’s turn.
Allow Grok Build edit tracking
The project build declares this hook in .grok/hooks/impeccable.json. Review and trust project hooks, then inspect the Hooks tab in Grok Build’s extensions modal. Findings are delivered at the end of the turn. Use Impeccable’s hook controls to stop checks.
Grok Build finishing check
Delivers design findings when Grok Build finishes its turn.
Check Grok Build’s finishing feedback
Review and trust the project hooks in .grok/hooks/impeccable.json, then inspect the Hooks tab in Grok Build’s extensions modal. This Stop hook delivers the design findings tracked during the turn. Use Impeccable’s hook controls to stop checks.
Install
Choose your coding tool, then an installation method. Plugin methods install the bundled components together; methods that install only the skill are identified below.
Claude Code
- 01
In an interactive Claude Code session, add the Impeccable marketplace.
/plugin marketplace add pbakaus/impeccable - 02
Open the plugin’s installation panel, choose the scope, and install Impeccable.
/plugin install impeccable@impeccable - 03
Follow the installation panel’s status. If it requests a reload, closing the panel normally applies it. Accept workspace trust and inspect the plugin’s registered hooks before unattended work: Claude Code command hooks can run even when you deny the model’s own commands.
/hooks - 04
Confirm Impeccable is installed and enabled in the Installed tab. Type a slash in chat and look for its skill under the plugin prefix.
/plugin
- 05
With Node.js available, run the installer from your project folder. Select Claude Code and project or global scope; accept the design hook if you want automatic checks.
npx impeccable install - 06
Reload Claude Code. Accept workspace trust and review the installed hooks before unattended work; command hooks can run outside the model’s command approvals.
/hooks - 07
Type a slash in chat and confirm Impeccable appears among the available skills.
This method installs the skill without Impeccable’s hooks or registered specialist agents.
- 05
From your project folder, run Skills CLI and select the Impeccable skill and Claude Code as the target.
npx skills add pbakaus/impeccable - 06
Confirm Impeccable is listed as installed, then reload Claude Code and look for it in the slash menu.
npx skills list
This method links skills for Claude Code and Cursor without installing hooks or registering specialist agents. It needs Git and Node.js.
- 05
From your project folder, add Impeccable as a submodule.
git submodule add https://github.com/pbakaus/impeccable vendor/impeccable - 06
Link the recorded checkout to Claude Code and Cursor. Existing skill directories stay in place unless explicitly replaced.
npx impeccable link --source=vendor/impeccable --providers=claude,cursor - 07
Commit .gitmodules, the submodule reference, and the generated links. Teammates fetch the recorded version with this command.
git submodule update --init --recursive - 08
Reload Claude Code and confirm Impeccable appears in its skill slash menu.
Requires VS Code 1.109.3 or later, Copilot Chat access, and a trusted local workspace. The extension installs the skill without automatic hooks or registered custom agents. Browser-only VS Code cannot run its native launcher.
- 05
Run this in your terminal to install the extension. Avoid another Impeccable skill installation in the same workspace or profile.
code --install-extension renaissance-geek.impeccable - 06
Open your trusted workspace, reload the VS Code window, and use Copilot Chat in Agent mode. Type a slash and confirm Impeccable appears in the skill picker.
- 05
With Node.js available, run the installer from your project folder. Select Antigravity and your installation scope.
npx impeccable install - 06
Reload Antigravity and look for Impeccable among its available skills. Use the Antigravity skills guide for the discovery locations and CLI refresh behavior.
- 05
In your terminal, add the marketplace. These commands combine GitHub’s documented plugin syntax with the names in Impeccable’s marketplace manifest.
copilot plugin marketplace add pbakaus/impeccable - 06
Install the Impeccable plugin.
copilot plugin install impeccable@impeccable - 07
Restart Copilot CLI and accept folder trust. Confirm Impeccable is installed with the plugin listing; inspect the session’s loaded environment if you also need to check its hooks.
copilot plugin list
The native Cursor plugin is still a local preview. Use the project installer for the documented project setup, and avoid keeping duplicate Impeccable installations.
- 05
With Node.js available, run this from your project folder and accept hook setup if you want automatic design checks.
npx impeccable install --providers=cursor --scope=project - 06
Reload Cursor and enable Agent Skills if needed. Type a slash in Agent chat and search for Impeccable. If you accepted the hook, inspect Customize → Hooks and the Hooks output channel. This configuration checks after Write, despite the earlier pre-edit behavior described in the Cursor guide.
This method links skills for Cursor and Claude Code without installing hooks or registering specialist agents. It needs Git and Node.js.
- 05
From your project folder, add Impeccable as a submodule.
git submodule add https://github.com/pbakaus/impeccable vendor/impeccable - 06
Link the recorded checkout to Cursor and Claude Code. Existing skill directories stay in place unless explicitly replaced.
npx impeccable link --source=vendor/impeccable --providers=claude,cursor - 07
Commit .gitmodules, the submodule reference, and the generated links. Teammates fetch the recorded version with this command.
git submodule update --init --recursive - 08
Reload Cursor, type a slash in Agent chat, and search for Impeccable.
- 05
With Node.js available, run the installer from your project folder. Select Devin and your installation scope.
npx impeccable install - 06
Reload Devin Desktop. In the Agents window, open Customize → Skills and confirm Impeccable is loaded. See Devin customizations.
- 05
With Node.js available, run the installer from your project folder. Select Codex and project or global scope; accept hook setup if you want automatic checks.
npx impeccable install - 06
Reload Codex. In the CLI, open the hook browser and review and trust Impeccable’s hooks; in the app, use Settings → Hooks. Updates that change the hook require review again.
/hooks - 07
In the CLI or IDE extension, type a dollar sign and look for Impeccable among the skills. In the desktop app, check Skills in the sidebar.
Use Codex CLI for this plugin method. The IDE extension supports standalone skills but does not support plugin installation.
- 05
In your terminal, register the marketplace. This command combines Codex’s documented marketplace syntax with Impeccable’s marketplace manifest.
codex plugin marketplace add pbakaus/impeccable - 06
In Codex CLI, open the plugin browser and install Impeccable from the registered marketplace.
/plugins - 07
Start a new session. Review and trust any supplied hooks in the hook browser, then confirm Impeccable is installed in the plugin browser and available in the skill picker.
/hooks
- 05
With Node.js available, run the installer from your project folder and select OpenCode and your installation scope.
npx impeccable install - 06
Reload OpenCode. Its documentation does not provide a skill-listing check; ask the agent to load the Impeccable skill by its ID and confirm it can read the installed skill. See OpenCode skill discovery.
- 05
Review the plugin before running this command in your terminal: it installs the skill, agents, and hook with trust enabled.
grok plugin install pbakaus/impeccable#plugin --trust - 06
Open Grok Build’s extensions modal and confirm Impeccable is present under plugins and skills. Inspect the Hooks tab for its loaded hook. If you later install project hooks without trust, review and trust them before expecting checks to run.
/hooks-trust
- 05
With Node.js available, run the installer from your project folder. Select Gemini CLI and your installation scope.
npx impeccable install - 06
Restart Gemini CLI and enable Agent Skills if needed. List the session’s skills and confirm Impeccable appears. If hooks were configured, inspect the hooks panel and review any trust prompt.
/skills list
- 05
With Node.js available, run the installer from your project folder. Select Hermes Agent and your installation scope. Project-local skills also require Hermes’ project skill trust step; global skills do not.
npx impeccable install - 06
If you accepted the design hook, enable its Hermes plugin once. Copying the plugin during installation does not enable it.
hermes plugins enable impeccable-design-hook - 07
Start a new Hermes session and confirm Impeccable appears in its skill list. If you enabled the hook, check that impeccable-design-hook is listed as enabled.
hermes plugins list
- 05
With Node.js available, run the installer from your project folder. Select Pi and your installation scope.
npx impeccable install - 06
Start Pi from the project and grant project trust where required. Reload its resources, then inspect startup diagnostics and the command menu for Impeccable’s skill entry.
/reload
- 05
With Node.js available, run the installer from your project folder. Select Qoder and your installation scope.
npx impeccable install - 06
Start a new Qoder session. In Qoder CLI, open the skill list and confirm Impeccable appears. See Qoder’s skill discovery and refresh guidance.
- 05
Run the installer from your project folder with Node.js available. Select Replit Agent and project scope.
npx impeccable install - 06
Reload your coding tool, then open the Skills pane in Replit’s Project Editor and look for Impeccable. Installed project skills persist across chat sessions; see Replit’s skill installation guidance.
- 05
With Node.js available, run the installer from your project folder. Select Kiro and your installation scope.
npx impeccable install - 06
Reload Kiro, then ask it which skills are available and confirm Impeccable is included. See Kiro’s skill discovery guidance.