Skip to content
Get packs

Guide · Agent skill

How to use the Impeccable Frontend Design Skill agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

Impeccable is an agent skill from the pbakaus/impeccable project that gives an AI coding agent a structured design playbook for frontend work. This guide explains what an agent skill is, how to install the impeccable skill, how to ask for it in plain language, and what it needs to run. By the end you will be able to ask your agent for a design review, a redesign, or a polish pass and know what the skill does while it works.

Impeccable Frontend Design Skillpbakaus/impeccable · Apache-2.0

Quick start

  1. 1Download the skill. Download the impeccable skill ZIP from this directory page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside one project.
  3. 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill there.
  4. 4Confirm Node or the launcher works. Make sure Node is available for npx, or allow the bundled launcher to download on first run.
  5. 5Make a design request. Ask for a critique, audit, redesign or polish of a named file, route or screen in your local project.
  6. 6Review the rendered result. Check the screenshots and the changes the agent made, and ask for fixes in one batch.

What is an agent skill, and what does impeccable do?

An agent skill is a folder of instructions and optional scripts that an AI agent loads when a task matches the skill's description. The skill is the set of instructions, not a separate app you open.

The impeccable skill covers requests to design, redesign, shape, critique, audit, polish, simplify, harden, animate or otherwise improve a user interface. The source lists websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states and native iOS or Android screens. It also covers UX review, hierarchy, layout, typography, colour, motion, UX copy, accessibility, responsive behaviour and edge cases. It is not for backend-only or non-UI tasks.

  • It first loads your project's product and design context by running its context command.
  • It picks a tone suited to the kind of surface, such as a marketing page versus an app dashboard.
  • It checks its work by looking at rendered results at the sizes the interface ships at.
  • It applies a quality checklist before editing UI code.
  • It offers sub-commands such as critique, audit, animate, colour, copy and polish.

Install the impeccable skill in Claude

There are two routes. For Claude Code, download the skill ZIP from this directory page and unzip it into your user skills folder at ~/.claude/skills/, or into a single project's .claude/skills/ folder if you want the skill only for that project.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills. Check that the skill appears in your list before you start a task.

  • User-wide: ~/.claude/skills/
  • Single project: .claude/skills/ inside the project folder
  • Claude apps: Settings → Capabilities → Skills

Check what the skill needs before you start

The skill needs Node available through npx, or it can use the bundled self-contained binary launcher, which is downloaded once on the first run. You also need a local project to edit and a way to render screenshots so the agent can verify its results.

The skill runs scripts and uses the network, so review those points in the safety section below. If your environment cannot run local scripts, the skill is not a good fit, because its context and verification steps depend on them.

  • Node via npx, or the bundled launcher (downloaded once on first run)
  • A local project the agent can edit
  • Rendering of screenshots to verify results
  • Runs scripts: yes. Uses network: yes.

Trigger the skill with a natural request

You do not need a special command to start. Describe the interface and the outcome you want, using verbs from the skill's description. The agent matches your request to the skill and follows its playbook.

If you want a specific sub-command, name it in your request. The skill lists commands including critique, audit, polish, bolder, quieter, distill, harden, onboard, shape, init, document and extract. Pass a file or route as the target when you can, so the agent knows what to work on.

  • "Critique the checkout form in src/components/Checkout.tsx and score it against usability heuristics."
  • "Audit the settings page for accessibility and responsive issues."
  • "Make this landing page bolder; it feels generic."
  • "Polish the dashboard before we ship it."

Understand the setup step the skill runs

On the first use in a session, the skill runs its context command once, from the skill folder, while the working directory stays at your project. The command loads PRODUCT.md, DESIGN.md, the matching surface brief and native-platform guidance where it applies. If you have no such files, the agent reads any existing product and design notes directly and does not invent missing context.

On Windows shells without sh, the skill uses a .cmd version of the launcher instead.

  • Pass a named source file or route with --target <path>.
  • If the launcher cannot run, the agent says so and reads the existing project context directly.
.agent/skills/impeccable/scripts/impeccable context

Tips for better results

The skill treats a clear brief as binding. If you have a fixed brand, fonts or palette, state them in your request or in your project's design notes. Otherwise the skill may push bold choices that conflict with your brand.

Keep refinement and redesign separate in your request. Refinement keeps the existing identity and copy, while redesign replaces the look. Say which one you want.

  • Pin brand, fonts and palette in your request or in DESIGN.md.
  • Ask for a critique first, then a fix, to review the reasoning before code changes.
  • Name the surface type (marketing page, app screen, docs) so the skill chooses the right tone.

What people use it for

  • Get a heuristic critique of a dashboard or form before a design review.
  • Run an accessibility, responsive and performance audit of a settings page.
  • Make a generic landing page bolder, or make a loud interface quieter.
  • Design first-run onboarding flows and empty states for a product screen.
  • Capture or document a design system as DESIGN.md and reusable tokens from existing code.

Frequently asked questions

How do I install the impeccable skill?

Download the skill ZIP from this directory page and unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside a single project. In the Claude apps, you can upload it under Settings → Capabilities → Skills instead.

Is the impeccable skill free to use?

The source lists the licence as Apache-2.0. Check the licence file in the project for the full terms. This page does not state any price.

What does impeccable need to run?

It needs Node available through npx, or the bundled self-contained launcher, which is downloaded once on first run. You also need a local project to edit and a way to render screenshots for verification.

Does impeccable run scripts and use the network?

Yes. The source says it runs scripts and uses the network. Review the scripts and the network use before you install it in a sensitive environment, and do not use it where the agent cannot run local scripts.

Why does the agent ignore my brand colours or fonts?

The skill pushes for bold design choices, so it may conflict with a strict brand. State your brand, fonts and palette clearly in the request or in your project's design notes, since a clear brief is meant to win.

Can impeccable work on native iOS and Android apps?

Yes. The skill covers native iOS and Android screens and has platform guidance for them. It is not for backend-only or non-UI tasks.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use impeccable if you build or review frontend UI with an AI agent and want a structured critique, audit or polish process with checks on rendered results. Skip it if your work is backend-only, if you cannot run local scripts, or if you need the agent to follow a strict existing brand without review.

Download the skill