impeccable

Designs, critiques, and refines frontend interfaces through structured UX commands and design references.

1|Updated Feb 1, 2025
One-click install
npx skills add https://github.com/TiagoDanin/TiagoDanin.github.io --skill impeccable-tiagodanin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/TiagoDanin/TiagoDanin.github.io/tree/main/.claude/skills/impeccable
Command: npx skills add https://github.com/TiagoDanin/TiagoDanin.github.io --skill impeccable-tiagodanin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Frontend interfaces built without design discipline end up generic, inconsistent, or inaccessible. This Skill enforces a structured design workflow with context files, design laws, and specialized commands so UI work stays on-brand and production-grade. ## Core Features & Use Cases - Command-based design workflow: 23 sub-commands covering build (craft, shape, teach), evaluate (critique, audit), refine (polish, bolder, quieter, distill, harden), enhance (animate, colorize, typeset, layout, delight), and fix (clarify, adapt, optimize) tasks. - Project context enforcement: Loads PRODUCT.md and DESIGN.md before any design work so output matches the project's users, brand, and visual system instead of generic defaults. - Anti-pattern detection: Audits score accessibility, performance, theming, responsive design, and AI-slop tells with P0-P3 severity ratings and actionable fix recommendations. - Use Case: A developer asks to redesign a landing page. The Skill loads the project's brand context, runs a shape interview to confirm a design brief, then builds the page following color, typography, and layout laws, finishing with a polish pass. ## Quick Start Ask the assistant to use the impeccable skill to critique the current landing page and suggest improvements.

Frequently Asked Questions about impeccable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve a bland frontend design with AI?

Run the impeccable skill's bolder command on the target surface. It amplifies hierarchy, scale, and color commitment while rejecting generic AI aesthetics like purple-blue gradients and glassmorphism, then hands off to polish for a final pass.

How to audit a UI for accessibility and performance issues?

Use the audit command, which scores accessibility, performance, theming, responsive design, and anti-patterns on a 0-4 scale. It produces a report with P0-P3 severity ratings and recommends specific follow-up commands for each finding.

What are PRODUCT.md and DESIGN.md files used for?

PRODUCT.md captures users, brand, tone, and strategic principles; DESIGN.md captures colors, typography, and components. The skill loads both before any design work so output stays on-brand, and the teach command generates them through a discovery interview.

Does this skill work for backend or non-UI tasks?

No. The skill explicitly covers frontend interfaces only: websites, dashboards, components, forms, and empty states. Backend-only or non-UI tasks fall outside its scope and should use other tools.

Why does the skill block edits before running shape or teach?

The setup gates prevent generic output that ignores the project. Without confirmed PRODUCT.md context and a user-approved shape brief, the skill refuses to mutate files, ensuring design decisions are grounded in actual brand and user requirements.