skills.rest
azigler
aziglerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

impeccable

Apply design foundations and refinement operations to improve frontend UI quality.

8|1|Updated Jan 21, 2024
Search Tags:#typography#accessibility#frontend#ux writing#design audit#ui design#visual polish
One-click install
npx skills add https://github.com/azigler/dotfiles --skill impeccable-azigler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/azigler/dotfiles/tree/main/agents/skills/impeccable
Command: npx skills add https://github.com/azigler/dotfiles --skill impeccable-azigler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you prevent “AI-slop” and upgrade frontend interfaces by improving design quality across foundations like typography, color, motion, interaction, and responsive layout, plus practical refinement operations.

Core Features & Use Cases

  • Design foundations on demand: Typography, color & contrast, motion, spatial design, interaction states, responsive behavior, and UX writing guidance to make better UI decisions.
  • Refinement operations: Run targeted passes such as audit, polish, typeset, colorize, distill, harden, normalize, optimize, clarify, critique, delight, arrange, and others to systematically improve quality dimensions.
  • When to use: Any time you’re building, redesigning, critiquing, or shipping web UI and need higher visual polish, better accessibility, clearer UX copy, stronger hierarchy, and more production-ready edge-case handling.

Quick Start

Use impeccable to polish the “settings page” so it looks intentional, accessible, and production-ready.

Frequently Asked Questions about impeccable

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

FAQPage Schema
How do I fix AI-slop in frontend UI and improve visual polish?▼

To fix AI-slop in frontend UI, apply design foundations and run targeted refinement operations like audit, polish, or typeset. This systematically reduces AI-generated interface anti-patterns to ensure accessible, production-ready web UI.

What is a UI design audit and how does it improve accessibility?▼

A UI design audit evaluates frontend interfaces against foundations like typography, color, and contrast. Running this operation identifies accessibility issues and visual anti-patterns, resulting in clearer UX copy and stronger visual hierarchy.

Can I use this to refine existing CSS and TSX components?▼

Yes, you can refine existing CSS and TSX components. The process applies design foundations and targeted operations directly to CSS/JSX/TSX work, handling edge cases and improving interaction states for production-ready web UI.

What's the best way to improve typography and UX writing in web UI?▼

The best way to improve typography and UX writing is running targeted operations like typeset and clarify. These apply specific design foundations to enhance text hierarchy, contrast, and copy clarity, reducing anti-patterns for better readability.

When do I need to run a distill or harden operation on my interface?▼

Run a distill or harden operation when your interface needs simplified visual hierarchy or stronger edge-case handling. These refinement operations systematically reduce anti-patterns and improve interaction states for production-ready web UI.

Related Skills

Explore More Design & Creative Skills→
ElwinLiuElwinLiu

web-design-guidelines

Automate UI code reviews against Web Interface Guidelines for accessibility and consistency.

Community
Intermediate
asalhamedasalhamed

ui-designer

Translate UX research into UI specifications with design tokens and accessibility guidance.

Community
Advanced
wpankwpank
11

design-system-creation

Create design systems with aesthetic foundations, token architectures, and CVA components.

Community
Advanced
RazisafirRazisafir
1

ui-audit

Audits UI/UX consistency using predefined prompts and Git operations.

Community
Advanced