Map

impeccable

Toolbox toolboxai-agentsskillsdesignfrontendlintingTypeScriptApache-2.0 ↳ show in map Markdown
title
impeccable
type
toolbox
summary
Design-skill bundle plus a 25-rule deterministic linter that flags AI-generated UI clichés
tags
ai-agents, skills, design, frontend, linting
language
TypeScript
license
Apache-2.0
created
2026-04-22
updated
2026-04-22

A skill-and-CLI bundle that tries to fix the "why does every AI-generated UI look the same" problem two ways: by loading design vocabulary into the agent's context so it can be asked sensible design questions, and by running a deterministic lint over the output to catch the clichés anyway.

The two halves

Teach/impeccable teach loads seven dimensions of design knowledge (typography, color, layout, motion, hierarchy, interaction, quality) plus Nielsen's 10 heuristics into the agent context. The claim is that most people asking LLMs for UI work don't have the vocabulary to ask precisely, and without that vocabulary the model reverts to its trained defaults. This is the same "skills are knowledge, not capability" argument from mcp-vs-skills, applied to a domain (visual design) where the monoculture problem is especially visible.

Detect — 25 deterministic rules, no LLM calls, that scan HTML/CSS/JSX/TSX/Vue/Svelte and live URLs (Puppeteer) for known AI-generated tells: purple gradients, nested card-inside-card, overused Inter, gradient text, insufficient contrast, generic-template layouts. Handles modern color spaces (oklch, oklab, lch, lab). Invoked as npx impeccable detect or via a Chrome DevTools extension.

18 commands

The skill bundle installs 18 slash commands. The ones the marketing page surfaces:

  • /polish, /audit, /critique — quality gates; /critique scores against Nielsen heuristics
  • /typeset, /bolder, /shape — typography, emphasis, and layout operations
  • /overdrive, /distill, /harden — broader refactors
  • /impeccable teach — load design context for the project
  • /impeccable craft, /impeccable extract — project-setup helpers

Full reference is in the repo's cheatsheet.

Install

npx skills add pbakaus/impeccable

This drops .cursor/, .claude/, .gemini/, .codex/, and .agents/ directories into the project at once, so the same commands work across every major agent harness without per-tool config. Also available as a Claude Code plugin and as a global CLI (npm i -g impeccable) for the scanner.

Supported harnesses: Cursor, Claude Code, Gemini CLI, Codex, VS Code Copilot, Antigravity, Kiro, OpenCode, Pi.

Why the deterministic detector matters

The interesting design choice is that detect is rules-based, not LLM-based. The argument implicit in that choice: an LLM scoring an LLM's output on "is this a generic AI-looking page" runs into the same training-data bias that created the problem. A rule that says "gradient from a purple to a slightly different purple is banned" doesn't share the bias. Cheap to run, explainable when it fires, and survives being wrong about taste because you can delete the rule.

The 25-rule count is small by design — this is a blocklist of specific visual tics, not a substitute for design judgment.

Limitations

  • The taxonomy of anti-patterns is opinionated. If the project's aesthetic is "modern SaaS" the detector will fight it.
  • Skill bundles are large context; loading all seven dimensions burns tokens that might be better spent on the actual task.
  • Live-URL scanning via Puppeteer needs a Chromium download.
  • The quality of the "teach" output depends entirely on the underlying model — Impeccable can load vocabulary but can't make a weak model taste good.

Repo

github.com/pbakaus/impeccable — 21.3k stars, Apache-2.0. Related: mcp-vs-skills (skills-as-knowledge argument), vamp-ai-frontend (different attack on the same "LLM-generated frontend is bad" problem — framework shape instead of visual taste), clean-code-coding-agents (code-structure angle on agent output quality).