"Use to refine an existing UI: audit, critique, polish, animate, adapt to devices, harden, simplify (distill/quieter), make bolder or more delightful, fix colors or onboarding."
Resources
1Install
npx skillscat add nachopalmeri/agents-system/ui-refine Install via the SkillsCat registry.
SKILL.md
UI refine
Una sola entrada para las 16 operaciones de refinamiento de interfaces. Elegí el modo que pide la tarea (o encadená pocos: normalmente audit o critique primero) y seguí su guía completa. Para diseño nuevo desde cero usá frontend-design; para evitar el look genérico de IA, anti-slop-design.
| Modo | Qué hace | Guía |
|---|---|---|
adapt |
Adapt designs to work across different screen sizes, devices, contexts, or platforms. | references/adapt/GUIDE.md |
animate |
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. | references/animate/GUIDE.md |
audit |
Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. | references/audit/GUIDE.md |
bolder |
Amplify safe or boring designs to make them more visually interesting and stimulating. | references/bolder/GUIDE.md |
clarify |
Improve unclear UX copy, error messages, microcopy, labels, and instructions. | references/clarify/GUIDE.md |
colorize |
Add strategic color to features that are too monochromatic or lack visual interest. | references/colorize/GUIDE.md |
critique |
Evaluate design effectiveness from a UX perspective. | references/critique/GUIDE.md |
delight |
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. | references/delight/GUIDE.md |
distill |
Strip designs to their essence by removing unnecessary complexity. | references/distill/GUIDE.md |
extract |
Extract and consolidate reusable components, design tokens, and patterns into your design system. | references/extract/GUIDE.md |
harden |
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. | references/harden/GUIDE.md |
normalize |
Normalize design to match your design system and ensure consistency | references/normalize/GUIDE.md |
onboard |
Design or improve onboarding flows, empty states, and first-time user experiences. | references/onboard/GUIDE.md |
optimize |
Improve interface performance across loading speed, rendering, animations, images, and bundle size. | references/optimize/GUIDE.md |
polish |
Final quality pass before shipping. | references/polish/GUIDE.md |
quieter |
Tone down overly bold or visually aggressive designs. | references/quieter/GUIDE.md |