157 lines
4.8 KiB
Markdown
157 lines
4.8 KiB
Markdown
---
|
|
name: website
|
|
description: |
|
|
Cinematic website builder. Analyzes any business website, extracts brand intelligence, generates a premium scroll-driven Next.js site with GSAP animations, and deploys live to Vercel — four phases, fully agent-driven.
|
|
|
|
Trigger when user says:
|
|
- "build a website for [url or business]"
|
|
- "create a site for [business name]"
|
|
- "analyze this site and rebuild it"
|
|
- "generate a cinematic website"
|
|
- "redesign this business website"
|
|
- "make a landing page for [url]"
|
|
- "clone and improve [url]"
|
|
- "build me a premium site like [url]"
|
|
allowed-tools:
|
|
- Bash(firecrawl *)
|
|
- Bash(npx *)
|
|
- Bash(npm *)
|
|
- Bash(vercel *)
|
|
- Write
|
|
- Edit
|
|
- Read
|
|
- Glob
|
|
---
|
|
|
|
# Cinematic Website Builder
|
|
|
|
A 4-phase agent pipeline: **Extract → Animate → Build → Deploy**
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
```
|
|
Phase 1: Business Intelligence → firecrawl scrape + agent extraction → brand.json
|
|
Phase 2: Cinematic Hero → GSAP + ScrollTrigger hero component
|
|
Phase 3: Premium Full Site → Next.js App Router, shadcn/ui, all sections
|
|
Phase 4: Deploy → vercel --prod → live URL
|
|
```
|
|
|
|
Before starting, ask the user for the target URL if not provided.
|
|
|
|
---
|
|
|
|
## Phase 1 — Business Intelligence Extraction
|
|
|
|
Read [phases/01-extract.md](phases/01-extract.md) for full extraction protocol.
|
|
|
|
**Quick summary:**
|
|
```bash
|
|
firecrawl scrape "<url>" -o .firecrawl/homepage.md
|
|
firecrawl crawl "<url>" --limit 10 -o .firecrawl/sitemap.json
|
|
firecrawl agent "<url>" "Extract: business name, tagline, services list, brand colors as hex codes, brand tone (formal/casual/bold/playful), hero headline, primary CTA text, target audience description" -o .firecrawl/brand.json
|
|
```
|
|
|
|
Output a `brand.json` with this shape before proceeding:
|
|
```ts
|
|
{
|
|
name: string,
|
|
tagline: string,
|
|
services: string[],
|
|
colors: { primary: string, secondary: string, accent: string, bg: string },
|
|
tone: "formal" | "casual" | "bold" | "playful",
|
|
heroHeadline: string,
|
|
ctaText: string,
|
|
audience: string
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Phase 2 — Cinematic Hero Animation
|
|
|
|
Read [phases/02-hero.md](phases/02-hero.md) for full animation spec.
|
|
|
|
**Core pattern:**
|
|
- Framework: Next.js 15+ App Router, TypeScript, Tailwind
|
|
- Animation: GSAP `useGSAP` hook + ScrollTrigger
|
|
- Install: `npm install gsap @gsap/react lenis`
|
|
- Template: [templates/hero.tsx](templates/hero.tsx)
|
|
|
|
**Animation sequence (non-negotiable):**
|
|
1. Hero headline → word-by-word stagger reveal (`y: 60→0`, `opacity: 0→1`, `stagger: 0.08`, `ease: "power4.out"`)
|
|
2. Subheadline → fade-up `delay: 0.4`
|
|
3. CTA button → magnetic hover with spring physics
|
|
4. Background image → slow ken-burns (`scale: 1→1.06`, `duration: 8`, `repeat: -1`, `yoyo: true`)
|
|
5. ScrollTrigger → pin hero 100vh, scrub `0.5` on exit
|
|
|
|
---
|
|
|
|
## Phase 3 — Full Premium Site
|
|
|
|
Read [phases/03-sections.md](phases/03-sections.md) for all section specs.
|
|
|
|
**Site structure:**
|
|
```
|
|
app/
|
|
layout.tsx ← Geist font, CSS variables from brand.json
|
|
page.tsx ← assembles all sections
|
|
components/
|
|
HeroSection.tsx ← Phase 2 output
|
|
ServicesSection.tsx ← 2-col zig-zag bento
|
|
AboutSection.tsx ← editorial split with parallax
|
|
TestimonialsSection.tsx ← infinite marquee
|
|
ContactSection.tsx ← form with validation
|
|
FooterSection.tsx ← legal links
|
|
Nav.tsx ← floating glass pill nav
|
|
```
|
|
|
|
**Design constraints (mandatory):**
|
|
- Font: `Geist` or `Outfit` — never `Inter`
|
|
- Full-height: `min-h-[100dvh]` — never `h-screen`
|
|
- Hero layout: asymmetric split — never centered
|
|
- Grids: 2-col zig-zag or bento — never 3 equal columns
|
|
- Easing: `cubic-bezier(0.32, 0.72, 0, 1)` or spring — never `linear`/`ease-in-out`
|
|
- Black: Off-Black `#18181B` (Zinc-950) — never `#000000`
|
|
- Animations: `transform` + `opacity` only — never layout properties
|
|
- Scroll reveals: `IntersectionObserver` — never `window.addEventListener('scroll')`
|
|
- `backdrop-blur`: only on fixed/sticky elements (nav, overlays)
|
|
|
|
---
|
|
|
|
## Phase 4 — Deploy
|
|
|
|
Read [phases/04-deploy.md](phases/04-deploy.md) for full deploy checklist.
|
|
|
|
```bash
|
|
# Deploy preview
|
|
vercel
|
|
|
|
# Promote to production
|
|
vercel --prod
|
|
```
|
|
|
|
Output the live URL to the user at the end.
|
|
|
|
---
|
|
|
|
## Design Anti-Patterns (Banned)
|
|
|
|
These patterns fail the quality check — never generate them:
|
|
|
|
- `Inter` font anywhere
|
|
- Pure `#000000` — use `#18181B`
|
|
- `h-screen` — use `min-h-[100dvh]`
|
|
- Centered hero (`text-center` in hero)
|
|
- 3-column equal card grid for features
|
|
- `linear` or `ease-in-out` transitions
|
|
- Neon/outer glow shadows
|
|
- Emojis in any UI text
|
|
- Generic names: "John Doe", "Acme Corp"
|
|
- Round numbers: `99.99%`, `50%`
|
|
- AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
|
|
- `window.addEventListener('scroll')` for animations
|
|
- `top`/`left`/`width`/`height` animated properties
|
|
- `backdrop-blur` on scrolling containers
|