ui-ux-polish
UI/UX Polish
Iterative enhancement workflow that takes working web applications from decent to world-class. Covers desktop and mobile optimization as separate modalities, visual design patterns, and accessibility standards.
When to use: The app works correctly with basic styling in place and you want to improve visual quality through iterative refinement. Also use for applying specific design patterns (glassmorphism, neumorphism, bento grids) or auditing accessibility.
When NOT to use: The app is broken or buggy (fix bugs first), styling is fundamentally wrong (needs complete overhaul), or no basic design system exists yet.
Quick Reference
| Pattern | Technique | Key Point |
|---|---|---|
| Iterative polish | Run the same polish prompt 10+ times | Small improvements compound dramatically |
| Desktop/mobile split | Optimize each modality independently | Prevents compromises that hurt both |
| Glassmorphism | backdrop-blur-xl + bg-white/70 + border |
Functional depth with legibility |
| Neumorphism | Dual-direction box shadows | Best in light mode; use borders for a11y |
| Bento grid | CSS Grid with rounded-3xl cells |
Hero cell spans multiple columns/rows |
| WCAG 2.2 AA | Contrast ratios + target sizes + focus visible | 4.5:1 text, 3:1 UI, 24x24px targets |
| Reduced motion | prefers-reduced-motion: reduce |
Disable animations for motion-sensitive users |
More from oakoss/agent-skills
playwright
|
200find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78content-humanizer
>
77