Impeccable
A frontend design Skill for AI coding agents with 23 interface workflows, live browser iteration, and 61 deterministic detector rules, plus local hooks that surface findings during edits.
Project overview
Impeccable is a frontend design Skill for AI coding agents that connects product context, visual direction, interface review, focused refinement, live browser iteration, and mechanical checks. The current public release documents 23 commands and 61 deterministic detector rules. This page is based on a pinned GitHub commit and public release records rather than hands-on testing.
Core capabilities
Context and visual direction
Init, document, teach, and shape workflows create PRODUCT.md, DESIGN.md, and surface-specific strategy so interface work stays grounded in product facts.
Interface review and refinement
Critique, audit, polish, distill, clarify, bolder, quieter, and related commands target visual, accessibility, responsive, copy, and complexity issues.
Live browser iteration
Live mode uses a local development server and browser to explore directions, annotate pages, and apply selected variants back to local source.
Mechanical anti-pattern detection
The CLI, browser extension, and local hooks share 61 deterministic rules with no LLM or API key and can emit CI-friendly JSON.
Installation and usage
Run `npx impeccable install` from the project root, select detected agents and project or global scope, then run `/impeccable init`. Codex also requires approval of the project hook in `/hooks`.
Let an AI Agent install it
Send this prompt to Codex, Claude Code, or another AI agent that can work with your local environment.
Help me install Impeccable in the current project from https://github.com/pbakaus/impeccable. First read README.md, package.json, .agents/skills/impeccable/SKILL.md, and .codex/hooks.json at pinned commit 36e4cea. Explain the Skill, hook, .impeccable paths, and first-run engine download that will be written or used. Confirm Node.js is at least 22.18.0, then run `npx impeccable install`. Do not use --force or overwrite an existing Skill or malformed hook manifest; show me the hook command before enabling it. For Codex, remind me to approve it in /hooks. Finally run /impeccable init and one /impeccable audit on a nonsensitive test page. Do not change a production page or start live mode without separate confirmation.- Node.js 22.18.0 or newer for the npx installer only
- A supported AI coding agent
- Write access to the target project's Skill, hook, and configuration paths
- Permission for a first-run pinned engine download from GitHub Releases
npx impeccable install- 1Review the environment and write scope
Confirm the Node.js version, target agent, project or global scope, and the Skill and hook files that will be created or merged.
- 2Run the documented installer
From the project root, run: npx impeccable install
- 3Approve hooks and initialize
In Codex, review and approve the project hook in /hooks. Then run /impeccable init and confirm PRODUCT.md and configuration reflect the actual project.
- 4Run a minimal audit
Run /impeccable audit on a nonsensitive test page and confirm the result includes priorities, affected files or selectors, and concrete recommendations before using polish or live.
Confirm the host discovers the Impeccable Skill, run `/impeccable init` to create or confirm PRODUCT.md, then run `/impeccable audit` on a nonsensitive test page and check for a prioritized report with file or selector evidence. Codex users should also confirm hook approval in /hooks.
- Interactive installation recommends hooks by default; --no-hooks skips them for that run
- The installer cannot replace Codex hook approval
- Review a foreign project's impeccable:manual-edit-validate package script before using live mode
Use cases
Direct a new interface
Establish product truth and a visual world before the agent generates and implements a new page.
Review an existing page
Turn visual hierarchy, responsive, accessibility, and performance concerns into an evidence-backed fix list.
Add an edit-time quality gate
Use provider-native hooks to run deterministic checks on changed files and surface common anti-patterns in the agent workflow.
Assessment
Impeccable joins design context, workflow instructions, browser feedback, and repeatable mechanical rules in one frontend delivery path. Its hooks and CLI can catch common problems early, but mechanical checks do not replace human visual or accessibility review. This assessment uses public code and documentation only.
Why it may be useful
- Twenty-three commands cover a continuous path from product context through critique, refinement, and visual-direction changes.
- Sixty-one rules run without an LLM or API key and can be repeated through hooks, the CLI, and CI.
- It supports many coding agents and provides provider-native hooks for Codex, Claude Code, Cursor, and others.
What to know first
- A clean detector result does not prove overall interface quality, usability, or accessibility.
- Hooks execute a local binary and read changed files, requiring user review and host trust.
- This entry did not test installation, hooks, live mode, or a real frontend task.
README
Impeccable
Overview
A frontend design Skill for AI coding agents with 23 interface workflows, live browser iteration, and 61 deterministic detector rules, plus local hooks that surface findings during edits. Design guidance for AI coding agents. 1 skill, 23 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design.
Getting started
- Run `npx impeccable install` from the project root, select detected agents and project or global scope, then run `/impeccable init`. Codex also requires approval of the project hook in `/hooks`.
- Focus: frontend design guidance for AI coding agents, with 23 workflows, live browser iteration, and 61 deterministic rules.
- Setup: /impeccable init inspects the project and writes PRODUCT.md; incumbent or new design systems are recorded separately in DESIGN.md.
- Confirm the host discovers the Impeccable Skill, run `/impeccable init` to create or confirm PRODUCT.md, then run `/impeccable audit` on a nonsensitive test page and check for a prioritized report with file or selector evidence. Codex users should also confirm hook approval in /hooks.
Configuration
npx impeccable install