Ui Ux Polish

What it does

This skill, Ui Ux Polish, iteratively enhances working web applications to improve their visual quality and user experience. It focuses on refining existing designs, optimizing for both desktop and mobile, applying specific design patterns (like glassmorphism or neumorphism), and ensuring accessibility standards are met. The process emphasizes small, incremental improvements through repeated refinement cycles.

When to use it

• The application functions correctly but requires visual improvement beyond basic styling.
• You want to apply a particular design pattern like glassmorphism, neumorphism, or bento grids.
• You need to audit and improve the accessibility of an existing web application.
• You are looking for iterative refinement rather than a complete redesign.

Key capabilities

• Iterative Polish: Repeatedly applying small refinements to achieve significant visual improvements.
• Desktop/Mobile Optimization: Separately optimizing designs for desktop and mobile experiences.
• Design Pattern Application: Implementing specific design patterns such as glassmorphism, neumorphism, and bento grids.
• Accessibility Auditing & Improvement: Ensuring compliance with WCAG 2.2 AA accessibility standards (contrast ratios, target sizes, focus visibility).
• Respecting User Preferences: Adhering to the user's prefers-reduced-motion setting for animations.
• Semantic HTML Implementation: Utilizing proper HTML structure and elements for improved accessibility and SEO.

Example prompts

• "Polish this web application with a glassmorphism design."
• "Optimize this page for mobile viewing, focusing on spacing rhythm."
• "Audit the accessibility of this component and suggest improvements based on WCAG 2.2 AA guidelines."
• "Apply neumorphic styling to these buttons, ensuring sufficient contrast for accessibility."

Tips & gotchas

• Fix bugs first: This skill is intended for visual refinement after functional issues are resolved.
• Iterate frequently: Run the polish prompt multiple times (10+) to allow small improvements to compound.
• Separate desktop and mobile: Treat each platform as a distinct modality when optimizing designs.