Skills impeccable
📦

impeccable

Low Risk ⚙️ External commands📁 Filesystem access

Build polished frontend interfaces with AI

AI-generated interfaces often look generic and templated. Impeccable guides the AI through expert design decisions, producing distinctive production-grade frontend code.

Supports: Claude Codex Code(CC)
🥉 75 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "impeccable". Create a hero section for a creative agency portfolio with bold typography and asymmetric layout

Expected outcome:

A responsive hero section with fluid display typography using clamp(), an asymmetric grid layout with varied spacing, a distinctive font pairing chosen through the font selection procedure, and a clear visual hierarchy that passes the squint test.

Using "impeccable". Extract reusable tokens from a page with inconsistent color values

Expected outcome:

A cohesive design token system with OKLCH-based primitive colors, tinted neutral scales, semantic color mappings for primary and status colors, and documented guidance on when to use each token.

Using "impeccable". Design an accessible contact form with proper validation

Expected outcome:

A form with visible labels, validation on blur, descriptive error messages with aria-describedby, proper focus rings using focus-visible, and appropriately sized touch targets for mobile users.

Security Audit

Low Risk
v1 • 4/16/2026

All 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.

11
Files scanned
1,591
Lines analyzed
3
findings
1
Total audits
Low Risk Issues (1)
External command execution via cleanup script
SKILL.md instructs the AI to run a Node.js cleanup script after skill updates. The script deletes deprecated skill directories and updates a lock file. This is a legitimate maintenance operation that runs only once per update, with explicit user notification beforehand. No network access or credential handling involved.
Audited by: claude

Quality Score

45
Architecture
100
Maintainability
87
Content
50
Community
88
Security
100
Spec Compliance

What You Can Build

Marketing site redesign

A startup founder wants their landing page to stand out from the sea of identical SaaS templates. Impeccable guides the AI through a bold aesthetic direction with distinctive typography and color choices.

Design system bootstrapping

A developer needs to extract consistent design tokens, components, and patterns from an existing codebase into a reusable design system. The extract mode identifies reusable patterns and formalizes them.

Accessible form and interaction design

A product team needs properly designed forms, focus states, loading patterns, and keyboard navigation. Impeccable provides reference material on WCAG compliance, the Popover API, and focus ring design.

Try These Prompts

Design context setup
Run /impeccable teach to gather design context for my project. Scan the codebase first, then ask me the questions you still need answered.
Build a feature from scratch
Run /impeccable craft a pricing page for a SaaS product. The target audience is small business owners who value clarity and speed. The brand tone is confident, practical, and no-nonsense.
Extract a design system
Run /impeccable extract the shared design tokens and reusable components from my existing component library. Focus on colors, spacing, typography, and button variants.
Design with specific constraints
Run /impeccable craft a dark-mode dashboard for an observability tool used by SREs. The interface needs to be information-dense but readable, with a muted color palette and strong data visualization hierarchy.

Best Practices

  • Always gather design context from the user before generating any design work. Check existing instructions, then .impeccable.md, then run the teach flow.
  • Commit to a bold aesthetic direction rather than retreating to safe, generic defaults. Both maximalism and minimalism work when executed with intentionality.
  • Run the AI slop test on every output: would someone immediately recognize this as AI-generated? If yes, the design needs more distinctive creative choices.

Avoid

  • Using reflex fonts like Inter, Fraunces, Space Grotesk, and Cormorant that create monoculture across AI-generated projects.
  • Defaulting to cyan-on-dark, purple-to-blue gradients, or glowing accents on dark backgrounds, which are the most recognizable AI design tells.
  • Using border-left accent stripes on cards, gradient text, and glassmorphism as decoration, which are explicitly banned as AI slop patterns.

Frequently Asked Questions

When should I invoke Impeccable?
Use Impeccable when building web components, pages, artifacts, posters, or applications. It is not needed for backend code, data processing, or non-visual tasks.
What is the difference between craft, teach, and extract modes?
Craft mode builds a feature through a structured design process. Teach mode gathers design context from you for the project. Extract mode pulls reusable components and tokens into a design system.
Does Impeccable work with React, Vue, or other frameworks?
The reference material is framework-agnostic and focuses on vanilla HTML, CSS, and JavaScript. The principles apply to any framework, but the output examples use plain web technologies.
How does Impeccable prevent generic AI-looking designs?
It enforces explicit bans on common AI design patterns, provides a font selection procedure that rejects reflex defaults, and includes an AI slop test quality gate for every output.
Can Impeccable help with accessibility compliance?
Yes. It includes reference material on WCAG contrast ratios, focus ring design, form accessibility, reduced motion support, keyboard navigation patterns, and touch target sizing.
What happens when I update to a new version of Impeccable?
A one-time cleanup script runs to remove deprecated skill files and lock entries. You are notified before it runs, and it only deletes files confirmed to belong to Impeccable.

Developer Details

Author

pbakaus

License

Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.

Ref

main