frontend-design

This skill guides the creation of distinctive, production-grade frontend interfaces. It implements real working code with exceptional attention to aesthetic details and creative choices, scaling from refined utility to immersive cinematic experiences.

Adaptive Design Tiers

Before coding, commit to an Aesthetic Intensity based on the project needs:

1. Refined Precision: (Default for tools/dashboards)

   • Focus: High-quality typography, generous negative space, and logical flow.
   • Vibe: Minimal, technical, and precise.
   • Tech: Clean CSS, subtle transitions.

2. Interactive Depth: (Default for modern marketing/landing pages)

   • Focus: Micro-interactions, custom textures, and nuanced motion.
   • Vibe: Premium, tactile, and professional.
   • Tech: CSS Variables, glassmorphism, subtle GSAP entries.

3. Immersive Kinetic: (For high-impact “Awwwards-level” experiences)

   • Focus: Choreographed storytelling, scroll-linked animations, and non-linear layouts.
   • Vibe: Cinematic, experimental, and unforgettable.
   • Tech: GSAP + ScrollTrigger, Lenis (Smooth Scroll), Shaders, Typography masking.

Frontend Aesthetics Guidelines

• Typography as Art: Move beyond basic fonts. Use variable font animations, vertical text, or text-masking for kinetic effects in Higher Tiers.
• Spatial Composition: Break the box. Use asymmetrical layouts, overlapping elements, and diagonal flows for Cinematic designs.
• Motion Logic: In Higher Tiers, treat every section as a “Scene.” Use staggered reveals and scroll-triggered physics.
• Atmospheric Backgrounds: Create depth using CSS filters, SVG noise, or gradient meshes rather than solid colors.

NEVER settle for “AI-generated” cliches (purple gradients, Inter font exclusively, standard 12-column grids). Push for a unique point-of-view in every generation.