Installation
npx skills add oakoss/agent-skills --skill ui-ux-polish 122
Installs
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 |
| Semantic HTML | Landmarks + heading hierarchy + native elements | Use <button> not <div role="button"> |
| Inclusive design | Multiple input methods + error forgiveness | Support keyboard, voice, and touch equally |
| Typography hierarchy | Consistent scale with clear levels | Font size, weight, and spacing rhythm |
| Spacing rhythm | Consistent padding and margin scale | Use design token multiples (4px, 8px, 16px) |
| Hover/focus states | Visible feedback on all interactive elements | Keyboard users need visible focus indicators |
| Animation/transitions | ease-out enter, ease-in exit, 100-300ms |
Prefer transform/opacity for GPU compositing |
| Micro-interactions | Button press, toggle, focus, success/error | Always respect prefers-reduced-motion |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Running polish on a broken app | Fix all functional bugs first, then apply iterative polish |
| Making one large pass instead of many small ones | Run 10+ iterations; incremental improvements compound |
| Optimizing desktop and mobile simultaneously | Treat each as a separate modality and optimize independently |
| Stopping after changes appear minimal | Keep iterating; subtle spacing and typography tweaks add up |
| Applying glassmorphism to all elements | Use glass effects strategically on cards and modals only |
| Neumorphism without accessibility borders | Add a 1px border for low-vision users (contrast requirement) |
Ignoring prefers-reduced-motion |
Always respect system motion preferences in CSS |
Using <div> with click handlers instead of <button> |
Use native semantic HTML elements for built-in accessibility |
Delegation
- Desktop and mobile polish in parallel: Use
Taskagent to run separate polish passes for each modality - Visual regression verification: Use
Exploreagent to check that polish iterations have not broken layout or accessibility - Design system alignment planning: Use
Planagent to establish spacing, typography, and color patterns before polishing - Full accessibility audits: Delegate to
accessibilityskill for in-depth WCAG compliance, ARIA patterns, focus management, and screen reader testing
References
- Polish Workflow -- The iterative polish prompt, why it works, iteration protocol, and multi-agent strategies
- Design Patterns -- Glassmorphism, neumorphism, bento grids with Tailwind implementations
- Accessibility -- WCAG 2.2 AA standards, semantic HTML, ARIA, inclusive design, and reduced motion
- Animation and Micro-interactions -- CSS transitions, loading states, spring animations, page transitions, and Tailwind animation utilities
Installs
Security Audit
View Source
oakoss/agent-skills
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install ui-ux-polish by running npx skills add oakoss/agent-skills --skill ui-ux-polish in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of ui-ux-polish, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
