Skip to content
Get packs

Impeccable Frontend Design Skill

Makes the agent design, critique, audit and polish frontend UI with a professional design-director standard.

Source Download skill
Repository
pbakaus/impeccable
Stars
99,937
Licence
Apache-2.0
Files
15 files

What it does

Once installed, when you ask the agent to design, redesign, critique, audit, polish, animate or otherwise improve a user interface (websites, landing pages, dashboards, forms, components, iOS or Android screens), it follows a structured design playbook. It first loads your project's product and design context, picks a suitable tone for the kind of surface, checks its work by looking at rendered results, and applies a quality checklist before editing UI code. It also has sub-commands for critique, audits, animation, colour, copy and similar tasks.

Great for

  • Developers who want more polished, consistent UI from an AI agent
  • Designers who want a structured critique or audit of an existing interface
  • Teams documenting or extracting a design system from existing code

Skip it if

  • Backend-only or non-visual tasks, which the skill itself says it does not cover
  • Projects where you need the agent to follow a strict existing brand without review, since the skill pushes for bold design choices and may conflict with it unless you pin your brief
  • Environments where the agent cannot run local scripts, since the context and verification steps depend on them

Try asking

  • “Critique the layout and hierarchy of my settings page and suggest fixes”
  • “Make this landing page bolder without changing the copy”
  • “Audit my dashboard for accessibility and responsive problems”
  • “Animate the onboarding screens with subtle motion”
Step-by-step guide: how to use Impeccable Frontend Design SkillInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the Apache-2.0 licence and an attribution note.

    impeccable.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip impeccable.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip impeccable.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Create a PRODUCT.md and DESIGN.md first so the agent has your real brand and product context.
  • Name the specific sub-command (critique, audit, polish) to get a focused result.
  • Review the agent's diffs before accepting, especially for redesigns that replace the existing look.

What's inside

  • reference/adapt.md
  • reference/adapt.native.md
  • reference/android.md
  • reference/animate.md
  • reference/audit.md
  • reference/audit.native.md
  • reference/bolder.md
  • reference/clarify.md
  • reference/colorize.md
  • reference/component-review.md
  • reference/craft-floor.md
  • reference/craft.md
  • reference/critique.md
  • reference/degraded/asset-producer.md
  • SKILL.md

Redistributed unmodified from pbakaus/impeccable under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.