impeccable-design-polish

Audits and polishes existing HTML artifacts for visual hierarchy, accessibility, and restrained motion.

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill impeccable-design-polish-webdevarif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: impeccable-design-polish
Source: https://github.com/webdevarif/claude-skills/tree/main/impeccable-design-polish
Command: npx skills add https://github.com/webdevarif/claude-skills --skill impeccable-design-polish-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing web or HTML artifacts often ship with generic AI-generated design tells, inconsistent spacing, weak hierarchy, and accessibility gaps. This Skill provides a structured post-generation pass that audits, critiques, polishes, animates, and hardens the current page without restarting the project. ## Core Features & Use Cases - Design Audit & Critique: Identifies high-impact issues in hierarchy, spacing, color, typography, interaction states, responsiveness, and accessibility, and explains what feels generic or inconsistent. - Polish & Harden: Directly edits the artifact to remove AI tells (purple-blue glow gradients, generic 3-card rows, oversized rounded cards), fix mobile overflow, contrast problems, missing states, and broken links. - Restrained Animation: Adds motion only where it improves feedback or storytelling, with reduced-motion fallbacks preserved. - Use Case: After generating a landing page prototype, run this Skill to tighten copy, fix responsive layout bugs, add subtle scroll animations, and prepare the page for a live share review. ## Quick Start Use impeccable-design-polish on the current HTML artifact to audit visual hierarchy, remove AI tells, add restrained motion, and harden responsive and accessibility issues.

Frequently Asked Questions about impeccable-design-polish

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

FAQPage Schema
How do I polish an AI-generated HTML page?

Run a design polish pass on the existing artifact: audit hierarchy, spacing, color, and type, then directly edit the top issues while preserving content and brand. Remove common AI tells like purple-blue glow gradients and generic 3-card feature rows.

What are common AI design tells in web pages?

Common AI tells include purple-blue glow gradients without product reason, generic 3-card feature rows, oversized rounded cards everywhere, empty marketing adjectives, inconsistent spacing and type scale, and decorative effects that do not support comprehension.

Does design polishing preserve accessibility features?

Yes, the polish pass explicitly preserves focus states, color contrast, semantic controls, readable text, and reduced-motion fallbacks. Accessibility hardening is part of the workflow, fixing contrast problems and missing interaction states.

When should I use a design polish skill instead of redesigning?

Use it when a web or HTML artifact already exists and needs refinement rather than a restart. It keeps existing content, brand, and scenario intact, preferring a few decisive fixes over broad cosmetic churn or a from-scratch redesign.

Can I add animations to a static HTML page without hurting usability?

Yes, add restrained motion only where it improves feedback or storytelling, and always include reduced-motion fallbacks. Avoid decorative effects that do not support comprehension, and pair with motion-focused skills for complex animation work.