impeccable

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

Updated Aug 5, 2024
One-click install
npx skills add https://github.com/nikhilkakarla/nikhilkakarla.github.io --skill impeccable-nikhilkakarla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/nikhilkakarla/nikhilkakarla.github.io/tree/main/.agents/skills/impeccable
Command: npx skills add https://github.com/nikhilkakarla/nikhilkakarla.github.io --skill impeccable-nikhilkakarla

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 project context files, shared design laws, and 23 specialized commands so UI work stays intentional, on-brand, and production-grade. ## Core Features & Use Cases - Command-driven 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, overdrive), and fix (clarify, adapt, optimize) tasks. - Project context system: Loads PRODUCT.md and DESIGN.md via a context script so every design decision reflects the actual brand, users, and design tokens rather than generic defaults. - Anti-pattern enforcement: Shared design laws ban AI-slop patterns like gradient text, side-stripe borders, glassmorphism, and identical card grids, with register-specific rules for brand vs product surfaces. - Use Case: A developer asks to redesign a landing page. The Skill loads the project's PRODUCT.md, classifies the work as brand register, applies typography and color strategy rules, and produces a distinctive page that passes the AI slop test. ## Quick Start Ask the agent to run $impeccable teach to set up your project's design context, then use $impeccable craft to build a new feature end-to-end.

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 or generic frontend design?▼

Run the bolder command to amplify safe designs with stronger hierarchy, committed color strategies, and dramatic scale, or use critique to get a scored UX review first. Both commands load your project's PRODUCT.md so changes stay on-brand.

How do I audit a UI for accessibility and performance issues?▼

Use the audit command, which runs technical checks across accessibility, performance, theming, responsive design, and anti-patterns. It produces a scored report out of 20 with P0-P3 severity ratings and recommends 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, while DESIGN.md records colors, typography, and components. The teach command creates them through a discovery interview, and every other command reads them before doing design work.

Does this work for both marketing pages and app dashboards?▼

Yes, the skill separates work into two registers: brand for marketing and landing pages where design is the product, and product for app UI where design serves the task. Each register has its own reference file with distinct typography, color, and motion rules.

When should I not use this frontend design skill?▼

Skip it for backend-only or non-UI tasks, since every command assumes a visual interface target. It also requires a project context setup step, so one-off throwaway mockups without a PRODUCT.md will trigger the teach interview first.