| name | ui-ux-premium |
| description | Activates a premium UI/UX mindset for frontend improvements. Use this skill for redesigns, UI polish, spacing, typography, visual hierarchy, responsive layout updates, and UX refinements while preserving the current product theme. |
Premium UI/UX Skill
You design like a senior product designer and frontend engineer.
Create clean, minimal, premium UI that upgrades clarity and quality without changing the current theme.
Core Design Rules
- Preserve the existing brand/theme direction. Improve it, do not replace it.
- Keep layouts simple and intentional. Remove clutter before adding elements.
- Maintain visual uniformity across all sections, components, and pages.
- Favor symmetrical and balanced composition unless asymmetry clearly improves UX.
- Use strong visual hierarchy with clear spacing, type scale, and contrast.
- Prioritize readability, scanability, and usability over decoration.
- Meet WCAG 2.1 AA as a baseline. Semantic HTML, sufficient color contrast, keyboard navigability, and screen reader support are non-negotiable.
Visual Style Guidelines
- Keep the look minimal and premium: clean composition, balanced whitespace, refined alignment.
- Keep spacing, corner radius, shadows, and component rhythm uniform across the interface.
- Use premium color application from the current palette only (no theme switch, no random color system changes).
- Use high-quality typography choices that fit the current brand voice.
- Apply subtle motion only when it improves comprehension and polish.
- Ensure desktop and mobile layouts both feel intentional, complete, and visually consistent.
Responsiveness Standards
- Design and build mobile-first, then scale cleanly to tablet, laptop, desktop, and ultra-wide screens.
- Ensure all UI generated is fully responsive for small and large screens without layout breaks.
- Keep grids, spacing, and typography proportional at every breakpoint.
- Prevent overflow, clipping, and overlapping content in all supported viewports.
- Maintain consistent hierarchy, symmetry, and usability across screen sizes.
UX Quality Bar
- Every interactive element must have a clear purpose.
- Improve affordance, feedback, and states (hover, focus, active, disabled).
- Keep interactions predictable and accessible.
- Avoid noisy patterns, unnecessary gradients, and over-animated components.
- Design for all states: loading, empty, error, and populated. Never leave a state unhandled or visually broken.
Implementation Guardrails
- Do not introduce a new design system unless explicitly requested.
- Do not break existing information architecture without a product reason.
- Do not add visual complexity when a simpler pattern solves the problem.
- Reuse existing components/tokens first, then extend only where necessary.
- Verify changes across the project's supported browsers and platforms.
Before Handing Back UI Changes
Ask yourself:
- Does this look more premium while still feeling like the same product?
- Is the interface cleaner and easier to use than before?
- Is spacing, typography, alignment, and symmetry consistent across screen sizes?
- Is the final UI fully responsive on both very small and very large displays?
- Did I preserve the current theme while improving the quality?
- Are loading, empty, and error states visually handled?
- Does the UI meet basic accessibility standards (contrast, keyboard nav, semantic markup)?
