impeccable

Overview of impeccable skill

What impeccable is for

The impeccable skill is a UI design and frontend implementation skill for creating distinctive, production-grade interfaces that do not look like generic AI output. It is best for people building web components, pages, app surfaces, posters, or feature flows where visual quality, interaction detail, and system consistency matter as much as working code.

Who should install impeccable

Install impeccable if you already ship frontend code and want stronger design judgment built into the generation workflow. It is especially useful for product designers who code, frontend engineers, and agent users who need impeccable for UI Design rather than raw scaffolding. If you only want a quick placeholder layout, this skill is probably heavier than necessary.

What makes this skill different

The main differentiator is structure. impeccable does not just say “make it pretty”; it routes work through three modes: craft for shape-then-build, teach for design context setup, and extract for turning repeated UI patterns into reusable components and tokens. The repository also includes focused design references for color, spacing, typography, motion, interaction, responsive behavior, and UX writing, which is more actionable than a single long prompt.

What users care about before adopting

The real job-to-be-done is reducing guesswork: what to design first, which references to load, when to stop abstracting, and how to avoid common weak-AI UI habits. The tradeoff is that impeccable works best when you provide project context, existing patterns, and a concrete feature goal. It is not a magic replacement for brand direction or product decisions.

How to Use impeccable skill

Install context and first-run checks

A common install path is:
npx skills add pbakaus/impeccable --skill impeccable

After install, open .claude/skills/impeccable/SKILL.md first. This repo includes a one-time maintenance step after updates:
node .claude/skills/impeccable/scripts/cleanup-deprecated.mjs

Then read these files in order if you want fast orientation:

1. SKILL.md
2. reference/craft.md
3. reference/extract.md
4. reference/spatial-design.md
5. reference/typography.md

Add reference/color-and-contrast.md, reference/interaction-design.md, reference/motion-design.md, reference/responsive-design.md, and reference/ux-writing.md only when your task needs them.

Pick the right mode: craft, teach, or extract

Use impeccable craft when you need to build a feature or page. This is the default best choice for new UI work because it pushes a useful order: shape the design, load relevant references, then build structure, layout, type, color, and polish.

Use impeccable teach when the team or agent needs design context before implementation. Use impeccable extract when your repo already has repeated components, hard-coded values, or inconsistent variants and you want to consolidate them into a design system.

Give impeccable the inputs it actually needs

impeccable usage gets much better when your prompt includes:

• the feature goal
• target users
• screenshots or existing component paths
• brand constraints
• framework and styling stack
• responsive expectations
• accessibility requirements
• whether you want net-new UI or system extraction

Weak prompt:
“Make a dashboard look modern.”

Strong prompt:
“Use impeccable craft to design and implement a billing dashboard in React + Tailwind. Match our existing admin shell. Primary tasks: invoice status, failed payment recovery, recent usage. Brand should feel calm and premium, not playful. Mobile and desktop required. Keep keyboard focus visible and avoid card-overload. Reuse patterns from src/components/admin/*.”

That level of input helps the skill choose the right references and avoid default aesthetics.

Practical workflow for better output

A reliable impeccable guide is:

1. Start with craft and confirm the design brief before coding.
2. Load only the reference docs relevant to the brief.
3. Build the primary state semantically first.
4. Add spacing and hierarchy before decoration.
5. Design interactive states explicitly: hover, focus, active, disabled, loading, error, success.
6. If repeated patterns appear 3+ times, switch to extract.

One practical tip from the references: if color work matters, use OKLCH instead of reflexively generating HSL palettes. If responsiveness matters, use content-driven breakpoints and pointer/hover media queries, not only screen width assumptions.

impeccable skill FAQ

Is impeccable better than a normal UI prompt?

Usually yes, if quality matters. A plain prompt can generate usable markup, but impeccable adds decision rules and reference-backed standards for spacing, typography, interaction states, motion, and token extraction. That makes it more reliable for design-sensitive work, not just faster code output.

Is impeccable good for beginners?

Yes, with limits. Beginners can use impeccable skill as a guided workflow, especially craft and teach. But it assumes you can inspect your repo, judge fit, and answer clarification questions. If you cannot provide existing patterns or a clear brief, results may still feel generic.

When should I not use impeccable?

Skip impeccable for throwaway mocks, ultra-simple landing-page placeholders, or tasks where visual design quality is not important. It is also a poor fit when there is no product direction at all and you expect the skill to invent brand strategy from nothing.

Does impeccable fit existing design systems?

Yes, especially through extract. In fact, the skill is more useful in real repositories than blank demos because it can identify repeated components, hard-coded values, and inconsistent variants. If no design system exists, the repo guidance suggests clarifying preferred structure before inventing one.

How to Improve impeccable skill

Start with a better brief, not a longer one

The fastest way to improve impeccable output is to give sharper constraints. Include audience, success criteria, tone, existing UI references, and what must stay unchanged. “Premium but approachable for finance managers” is better than “clean and modern.” Good constraints reduce bland defaults.

Load the right references, not all of them

A common failure mode is overloading the run with every document. For impeccable usage, load the minimum useful references: spatial-design.md and typography.md almost always, then add color, motion, interaction, responsive, or UX writing only when the feature needs them. This keeps decisions focused.

Watch for the typical weak-output patterns

If results still look average, check for these issues:

• default blue/orange palette choices
• card-heavy layouts with weak hierarchy
• hover states without keyboard focus styles
• placeholder text used as labels
• premature extraction before a pattern repeats
• desktop-first layout assumptions on touch devices

These are exactly the areas the impeccable references try to correct.

Iterate after the first draft with targeted feedback

Do not ask for “make it better.” Ask for specific improvements tied to the repo guidance, such as:

• “Increase hierarchy using spacing and weight, not more cards.”
• “Retune the palette in OKLCH with tinted neutrals.”
• “Add all interactive states for form controls.”
• “Extract tokens only where repeated 3+ times.”

That kind of follow-up makes impeccable more valuable than a one-shot generator and is the best path to production-ready UI Design output.