skills.rest
dudleypeacockqa
dudleypeacockqaCOMMUNITY
Explore all skills by this author →
GitHub

build-frontend

Create cinematic React frontends with Vite, Tailwind CSS, and GSAP.

Updated Aug 27, 2026
Search Tags:#architecture#frontend#react#animation#vite#tailwind#gsap
One-click install
npx skills add https://github.com/dudleypeacockqa/leverage_flo_website_marketing_agency --skill build-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-frontend
Source: https://github.com/dudleypeacockqa/leverage_flo_website_marketing_agency/tree/main/.bible/aios/skills/build-frontend
Command: npx skills add https://github.com/dudleypeacockqa/leverage_flo_website_marketing_agency --skill build-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about build-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a cinematic animated frontend with React and GSAP?▼

This Skill builds cinematic animated frontends using React, Vite, Tailwind CSS, and GSAP. It is designed for marketing sites, product launches, interactive showcases, and portfolio projects that require motion-rich, choreographed interfaces and digital experiences.

Can I use this to build a full-stack app with user authentication?▼

No, this is not for full-stack apps with databases, user auth, or backend logic. It is strictly for building premium animated frontend experiences using React, Vite, Tailwind, and GSAP, not full-stack applications or simple static brochure sites.

What is the STAGE framework for frontend development?▼

The STAGE framework is a five-phase process for building cinematic frontends: Scope, Tokens, Architect, Gesture, and Execute. It delivers creative briefs, Tailwind design tokens, architecture specs, animation plans, and QA gates to automate motion-rich web experiences.

How do I generate design tokens and animation plans for a React landing page?▼

You generate design tokens and animation plans by running the STAGE framework's Tokens and Gesture phases. The Tokens phase outputs Tailwind config and CSS custom properties, while the Gesture phase delivers the motion design and animation choreography plan.

When should I not use a cinematic frontend approach for my website?▼

You should not use this cinematic frontend approach for simple static content pages that do not need animation, or for full-stack apps requiring backend logic. It is specifically built for premium, motion-rich experiences that feel alive, not standard brochure sites.

Does this frontend builder work with Vue or other frameworks besides React?▼

No, this frontend builder works exclusively with React, Vite, Tailwind CSS, and GSAP. The stack is fixed with no exceptions, ensuring every animation and choreographed interface aligns with these specific technologies.

Related Skills

Explore More Software Engineering Skills→
simplysmartaisimplysmartai

Website Builder

Build cinematic landing pages with React, Tailwind CSS, and GSAP.

Community
Advanced
tech-with-sethtech-with-seth
4

react-router-framework-mode

Build full-stack React applications with React Router framework mode.

Official
Advanced
47thtechcorner47thtechcorner
21

gsap-timeline

Orchestrate GSAP animation sequences with tweens, labels, and nested timelines.

Community
Intermediate
NweremizuNweremizu

gpt-taste

Design motion-rich web interfaces with GSAP ScrollTrigger and AIDA structure.

Community
Advanced