frontend-design

Commit to a specific aesthetic direction before coding, then execute it with distinctive font pairings, a cohesive color palette using CSS variables, and intentional layout choices like asymmetry or generous negative space. Avoid default fonts like Inter and cliched purple gradients.

Generic output comes from overused font families such as Inter, Roboto, and Arial, cliched color schemes like purple gradients on white, predictable component patterns, and layouts lacking context-specific character. Intentional, differentiated choices fix this.

Yes, the skill supports HTML/CSS/JS, React, Vue, and other frameworks. For React projects it recommends the Motion library for animations, while plain HTML should prioritize CSS-only animation solutions.

Focus on high-impact moments such as one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggered effects and surprising hover states. Match animation complexity to the aesthetic vision, elaborate for maximalist designs and restrained for minimalist ones.

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details.