skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

impeccable

Designs, audits, and refines production-grade frontend interfaces through structured commands.

1|Updated Jan 10, 2024
Search Tags:#typography#anti-patterns#accessibility#design system#frontend design#ui audit#ux review
One-click install
npx skills add https://github.com/noemdb/cfla --skill impeccable-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/impeccable
Command: npx skills add https://github.com/noemdb/cfla --skill impeccable-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Frontend interfaces built quickly often suffer from generic AI-generated aesthetics, weak visual hierarchy, accessibility gaps, and inconsistent design systems. This Skill provides a structured workflow for designing, critiquing, auditing, and refining UI so the output looks intentional and ships at production quality. ## Core Features & Use Cases - Command-driven design workflow: Over 20 sub-commands (craft, shape, audit, polish, bolder, quieter, distill, harden, animate, colorize, typeset, layout, clarify, adapt, optimize, and more) each load a dedicated reference file defining a step-by-step flow. - Register-aware guidance: Separates brand surfaces (landing pages, marketing sites) from product UI (dashboards, admin tools) with distinct typography, color, and motion rules for each. - Anti-slop enforcement: Explicit bans on saturated AI design tells such as gradient text, side-stripe borders, glassmorphism defaults, cream backgrounds, and reflex-picked fonts, plus a bundled detector script that scans local files for these patterns. - Use Case: A developer asks to audit a dashboard before release. The skill runs context detection, scores accessibility, performance, theming, responsiveness, and anti-patterns out of 20, then recommends prioritized follow-up commands like polish or adapt. ## Quick Start Ask the assistant to run $impeccable audit on your main page component to get a scored technical quality report with prioritized fixes.

Frequently Asked Questions about impeccable

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

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

Run the audit command, which scores five dimensions (accessibility, performance, theming, responsive design, anti-patterns) from 0-4 each and produces a report with P0-P3 severity-tagged findings. Each finding maps to a recommended follow-up command such as polish, adapt, or optimize.

How do I make a bland landing page design bolder without breaking the design system?▼

Use the bolder command, which amplifies the existing design language through stronger hierarchy, proportion, and contrast rather than adding new colors or effects. It treats documented tokens and components as the boundary and requires approval before expanding the system.

What is the difference between the brand and product registers in UI design?▼

Brand register covers surfaces where design is the product, like landing pages and marketing sites, permitting committed color strategies and ambitious motion. Product register covers app UI and dashboards where design serves the task, favoring restrained palettes and 150-250ms functional transitions.

Does this workflow require a PRODUCT.md file to work on existing code?▼

No. A missing PRODUCT.md only triggers the init flow for from-scratch build commands like craft or shape. Scoped requests against existing code proceed directly, using the existing files as context, with init offered once as an optional suggestion.

Why does AI-generated UI design look generic and how is it avoided?▼

Generic output comes from training-data reflexes like cream backgrounds, gradient text, eyebrow labels, and reflex-picked fonts such as Inter or Fraunces. The skill bans these patterns explicitly and runs a detector script over local files to flag remaining tells before shipping.

Related Skills

Explore More Design & Creative Skills→
CatsofsufferingCatsofsuffering
5

audit

Audit frontend components and pages with scored P0-P3 severity reports.

Community
Advanced
mostafalameymostafalamey

playwright-frontend-testing

Automate frontend testing and visual validation for the ML Extensions website.

Community
Intermediate
exceptionlessexceptionless
2.5k

tanstack-query

Manage server state and data fetching in Svelte with TanStack Query.

Official
Intermediate
zircotezircote
3

ui-styling

Compose accessible UI with shadcn/ui components and Tailwind utilities.

Community
Advanced