build-frontend

What problem does it solve?

Build cinematic animated frontends that feel like digital instruments — every scroll intentional, every animation weighted and choreographed, every interaction purposeful. Not templates. Not static pages. Experiences.

Stack: React + Vite + Tailwind CSS + GSAP. Always. No exceptions.

Core Features & Use Cases

• Cinematic landing pages and marketing sites
• Product launch pages that need to make an impression
• Animated showcases and interactive experiences
• Portfolio sites where motion IS the product
• Campaign micro-sites and product drops
• Any frontend that should feel alive

NOT for: Full-stack apps with databases, user auth, or backend logic — use build-app (ATLAS). Also not for simple static content pages that don't need animation — this skill builds premium animated experiences, not brochure sites.

Companion use: build-app (ATLAS) can reference this skill's Gesture and Tokens phases when its frontend layer needs premium treatment.

The STAGE Framework

| Phase | Name | Purpose | Output | | ----- | ---- | ------- | ------ | | S | Scope | Brand, audience, CTA, aesthetic direction | Creative brief (user-confirmed) | | T | Tokens | Design system from preset | Tailwind config + CSS custom properties | | A | Architect | Section structure, component patterns, copy | Section spec with copy (user-confirmed) | | G | Gesture | Motion design, animation choreography | Animation plan | | E | Execute + Elevate | Build + QA | Working site passing quality gates |

Quick Start

Scaffold a STAGE frontend project and begin building a cinematic React site with Vite, Tailwind, and GSAP.