skills/website/SKILL.md

name	description	allowed-tools
website	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]"	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 for full extraction protocol.

Quick summary:

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:

{
  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 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

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 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 for full deploy checklist.

# 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