nachopalmeri

ui-refine

"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."

nachopalmeri 0 Updated 4w ago

Resources

1
GitHub

Install

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

Categories