---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with Adaptive Complexity. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that leverages Antigravity tools for Awwwards-level execution where appropriate.
license: Complete terms in LICENSE.txt
---

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.