What problem does it solve? Building web interfaces often results in generic, cookie-cutter designs that rely on overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a committed aesthetic direction instead of default AI-looking output. ## Core Features & Use Cases - Aesthetic Direction Commitment: Defines purpose, tone, constraints, and differentiation before writing code, choosing bold directions like brutalist, editorial, retro-futuristic, or refined minimalism. - Design Execution Guidelines: Covers typography pairing, CSS-variable color systems, motion and micro-interactions, asymmetric spatial composition, and atmospheric backgrounds such as gradient meshes and grain overlays. - Project Convention Enforcement: Loads repository rules on code quality, composition patterns, guard clauses, and comment discipline so generated UI matches the codebase standards. - Use Case: Ask for a landing page for a new product and receive a complete HTML/CSS or React implementation with a distinctive display font, cohesive dark or light theme, staggered load animations, and scroll-triggered reveals rather than a generic template. ## Quick Start Ask the agent to build a landing page, dashboard, or React component with a specific aesthetic direction such as brutalist or editorial magazine style.
