Frontend Skill & Aesthetic Execution Guidelines

Description

# Frontend Skill & Aesthetic Execution Guidelines His skill enables the creation of **distinctive, production-grade frontend interfaces** that deliberately avoid generic “AI-slop” aesthetics. The focus is on **real, working code** with **exceptional attention to aesthetic detail and creative intent**. --- ## Input Context The user provides **frontend requirements**, which may include: - A component, page, application, or complete interface - Context about: - Purpose - Target audience - Technical or performance constraints --- ## Design Thinking (Before Writing Any Code) Before implementation, **commit to a bold and intentional design direction**. ### 1. Purpose - What problem does this interface solve? - Who is the primary user? - What emotional response should it evoke? ### 2. Tone (Choose an Extreme) Pick **one strong aesthetic direction** and fully commit to it: - Brutally minimal - Maximalist chaos - Retro-futuristic - Organic / natural - Luxury / refined - Playful / toy-like - Editorial / magazine - Brutalist / raw - Art-deco / geometric - Soft / pastel - Industrial / utilitarian > Inspiration is allowed. Indecision is not. > The goal is **intentionality**, not moderation. ### 3. Constraints - Frameworks (React, Vue, Vanilla, etc.) - Performance budgets - Accessibility requirements - Browser/device support ### 4. Differentiation Ask: > **What is the one unforgettable thing someone will remember about this UI?** This could be: - A signature interaction - A bold layout choice - A unique typographic moment - A dramatic motion sequence --- ## Implementation Requirements The resulting frontend must be: - **Production-grade and fully functional** - **Visually striking and memorable** - **Cohesive with a clear aesthetic point-of-view** - **Meticulously refined down to spacing, motion, and micro-details** --- ## Frontend Aesthetics Guidelines ### Typography - Choose **characterful, expressive fonts** - Avoid generic choices: - ❌ Inter - ❌ Roboto - ❌ Arial - ❌ System fonts - Prefer: - A distinctive **display font** - A refined, readable **body font** - Typography should *lead* the design, not decorate it --- ### Color & Theme - Commit to a **cohesive palette** - Use **CSS variables** for consistency - Favor: - Strong dominant colors - Sharp, intentional accents - Avoid: - Timid palettes - Evenly distributed colors - Overused purple-on-white gradients --- ### Motion & Interaction - Motion must feel **designed**, not decorative - Prefer **CSS-only animations** for HTML - Use **Motion libraries** (e.g., Framer Motion) for React when appropriate Focus on: - One powerful **page-load sequence** - Staggered reveals (`animation-delay`) - Scroll-triggered effects - Hover states that *surprise* > One memorable animation > ten forgettable ones --- ### Spatial Composition - Reject predictable layouts - Embrace: - Asymmetry - Overlapping elements - Diagonal flow - Grid-breaking components - Use: - Generous negative space **or** - Controlled, intentional density --- ### Backgrounds & Visual Detail Create **atmosphere and depth**: - Gradient meshes - Noise or grain overlays - Geometric patterns - Layered transparencies - Dramatic shadows - Decorative borders - Custom cursors (when justified) Avoid defaulting to flat solid colors unless conceptually aligned. --- ## Hard Rules (Non-Negotiable) - **NEVER** use generic AI-generated aesthetics - **NEVER** reuse the same fonts, palettes, or vibes across generations - **NEVER** converge on trendy defaults (e.g., Space Grotesk everywhere) - **EVERY DESIGN MUST FEEL CONTEXT-SPECIFIC** --- ## Complexity Matching - **Maximalist designs** → elaborate code, layered animations, rich visuals - **Minimalist designs** → restraint, precision, perfect spacing, subtle motion Elegance is not simplicity — **Elegance is correct execution of intent.** --- ## Final Reminder Do not hold back. This work should demonstrate what’s possible when: - Taste is sharp - Decisions are confident - Aesthetic vision is executed with discipline **Think like a designer. Build like an engineer. Ship like it matters.**

Security Status