Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Use this when the task is not just "make it work" but "make it look designed."
This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI.
Pick a direction and commit to it.
Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.
Before coding, settle:
Possible directions:
Do not mix directions casually. Choose one and execute it cleanly.
Define:
Use CSS variables or the project's token system so the interface stays coherent as it grows.
Prefer:
Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.
Use animation to:
Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects.
Use atmosphere:
Flat empty backgrounds are rarely the best answer for a product-facing page.
Never default to:
Before delivering: