admin/imail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
524575f790d38df2f68f5744591994bc8910963f
imail/.claude/skills/cinematic-landing-page-builder/SKILL.md
idevakk 6e59c1f922 chore: update boost guidelines and skills
2026-03-03 02:11:34 +05:30

11 KiB
Raw Blame History

name, description
name description
cinematic-landing-page-builder Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.

Cinematic Landing Page Builder

Role

Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. You build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Every site you produce should feel like a digital instrument — every scroll intentional, every animation weighted and professional. Eradicate all generic AI patterns.

Agent Flow — MUST FOLLOW

When the user asks to build a site (or this file is loaded into a fresh project), immediately ask exactly these questions using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.

Questions (all in one AskUserQuestion call)

  1. "What's the brand name and one-line purpose?" — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
  2. "Pick an aesthetic direction" — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
  3. "What are your 3 key value propositions?" — Free text. Brief phrases. These become the Features section cards.
  4. "What should visitors do?" — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".

Aesthetic Presets

Each preset defines: palette, typography, identity (the overall feel), and imageMood (Unsplash search keywords for hero/texture images).

Preset A — "Organic Tech" (Clinical Boutique)

  • Identity: A bridge between a biological research lab and an avant-garde luxury magazine.
  • Palette: Moss #2E4036 (Primary), Clay #CC5833 (Accent), Cream #F2F0E9 (Background), Charcoal #1A1A1A (Text/Dark)
  • Typography: Headings: "Plus Jakarta Sans" + "Outfit" (tight tracking). Drama: "Cormorant Garamond" Italic. Data: "IBM Plex Mono".
  • Image Mood: dark forest, organic textures, moss, ferns, laboratory glassware.
  • Hero line pattern: "[Concept noun] is the" (Bold Sans) / "[Power word]." (Massive Serif Italic)

Preset B — "Midnight Luxe" (Dark Editorial)

  • Identity: A private members' club meets a high-end watchmaker's atelier.
  • Palette: Obsidian #0D0D12 (Primary), Champagne #C9A84C (Accent), Ivory #FAF8F5 (Background), Slate #2A2A35 (Text/Dark)
  • Typography: Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: "JetBrains Mono".
  • Image Mood: dark marble, gold accents, architectural shadows, luxury interiors.
  • Hero line pattern: "[Aspirational noun] meets" (Bold Sans) / "[Precision word]." (Massive Serif Italic)

Preset C — "Brutalist Signal" (Raw Precision)

  • Identity: A control room for the future — no decoration, pure information density.
  • Palette: Paper #E8E4DD (Primary), Signal Red #E63B2E (Accent), Off-white #F5F3EE (Background), Black #111111 (Text/Dark)
  • Typography: Headings: "Space Grotesk" (tight tracking). Drama: "DM Serif Display" Italic. Data: "Space Mono".
  • Image Mood: concrete, brutalist architecture, raw materials, industrial.
  • Hero line pattern: "[Direct verb] the" (Bold Sans) / "[System noun]." (Massive Serif Italic)

Preset D — "Vapor Clinic" (Neon Biotech)

  • Identity: A genome sequencing lab inside a Tokyo nightclub.
  • Palette: Deep Void #0A0A14 (Primary), Plasma #7B61FF (Accent), Ghost #F0EFF4 (Background), Graphite #18181B (Text/Dark)
  • Typography: Headings: "Sora" (tight tracking). Drama: "Instrument Serif" Italic. Data: "Fira Code".
  • Image Mood: bioluminescence, dark water, neon reflections, microscopy.
  • Hero line pattern: "[Tech noun] beyond" (Bold Sans) / "[Boundary word]." (Massive Serif Italic)

Fixed Design System (NEVER CHANGE)

These rules apply to ALL presets. They are what make the output premium.

Visual Texture

  • Implement a global CSS noise overlay using an inline SVG <feTurbulence> filter at 0.05 opacity to eliminate flat digital gradients.
  • Use a rounded-[2rem] to rounded-[3rem] radius system for all containers. No sharp corners anywhere.

Micro-Interactions

  • All buttons must have a "magnetic" feel: subtle scale(1.03) on hover with cubic-bezier(0.25, 0.46, 0.45, 0.94).
  • Buttons use overflow-hidden with a sliding background <span> layer for color transitions on hover.
  • Links and interactive elements get a translateY(-1px) lift on hover.

Animation Lifecycle

  • Use gsap.context() within useEffect for ALL animations. Return ctx.revert() in the cleanup function.
  • Default easing: power3.out for entrances, power2.inOut for morphs.
  • Stagger value: 0.08 for text, 0.15 for cards/containers.

Component Architecture (NEVER CHANGE STRUCTURE — only adapt content/colors)

A. NAVBAR — "The Floating Island"

A fixed pill-shaped container, horizontally centered.

  • Morphing Logic: Transparent with light text at hero top. Transitions to bg-[background]/60 backdrop-blur-xl with primary-colored text and a subtle border when scrolled past the hero. Use IntersectionObserver or ScrollTrigger.
  • Contains: Logo (brand name as text), 3-4 nav links, CTA button (accent color).

B. HERO SECTION — "The Opening Shot"

  • 100dvh height. Full-bleed background image (sourced from Unsplash matching preset's imageMood) with a heavy primary-to-black gradient overlay (bg-gradient-to-t).
  • Layout: Content pushed to the bottom-left third using flex + padding.
  • Typography: Large scale contrast following the preset's hero line pattern. First part in bold sans heading font. Second part in massive serif italic drama font (3-5x size difference).
  • Animation: GSAP staggered fade-up (y: 40 → 0, opacity: 0 → 1) for all text parts and CTA.
  • CTA button below the headline, using the accent color.

C. FEATURES — "Interactive Functional Artifacts"

Three cards derived from the user's 3 value propositions. These must feel like functional software micro-UIs, not static marketing cards. Each card gets one of these interaction patterns:

Card 1 — "Diagnostic Shuffler": 3 overlapping cards that cycle vertically using array.unshift(array.pop()) logic every 3 seconds with a spring-bounce transition (cubic-bezier(0.34, 1.56, 0.64, 1)). Labels derived from user's first value prop (generate 3 sub-labels).

Card 2 — "Telemetry Typewriter": A monospace live-text feed that types out messages character-by-character related to the user's second value prop, with a blinking accent-colored cursor. Include a "Live Feed" label with a pulsing dot.

Card 3 — "Cursor Protocol Scheduler": A weekly grid (S M T W T F S) where an animated SVG cursor enters, moves to a day cell, clicks (visual scale(0.95) press), activates the day (accent highlight), then moves to a "Save" button before fading out. Labels from user's third value prop.

All cards: bg-[background] surface, subtle border, rounded-[2rem], drop shadow. Each card has a heading (sans bold) and a brief descriptor.

D. PHILOSOPHY — "The Manifesto"

  • Full-width section with the dark color as background.
  • A parallaxing organic texture image (Unsplash, imageMood keywords) at low opacity behind the text.
  • Typography: Two contrasting statements. Pattern:
    • "Most [industry] focuses on: [common approach]." — neutral, smaller.
    • "We focus on: [differentiated approach]." — massive, drama serif italic, accent-colored keyword.
  • Animation: GSAP SplitText-style reveal (word-by-word or line-by-line fade-up) triggered by ScrollTrigger.

E. PROTOCOL — "Sticky Stacking Archive"

3 full-screen cards that stack on scroll.

  • Stacking Interaction: Using GSAP ScrollTrigger with pin: true. As a new card scrolls into view, the card underneath scales to 0.9, blurs to 20px, and fades to 0.5.
  • Each card gets a unique canvas/SVG animation:
    1. A slowly rotating geometric motif (double-helix, concentric circles, or gear teeth).
    2. A scanning horizontal laser-line moving across a grid of dots/cells.
    3. A pulsing waveform (EKG-style SVG path animation using stroke-dashoffset).
  • Card content: Step number (monospace), title (heading font), 2-line description. Derive from user's brand purpose.

F. MEMBERSHIP / PRICING

  • Three-tier pricing grid. Card names: "Essential", "Performance", "Enterprise" (adjust to fit brand).
  • Middle card pops: Primary-colored background with an accent CTA button. Slightly larger scale or ring border.
  • If pricing doesn't apply, convert this into a "Get Started" section with a single large CTA.

G. FOOTER

  • Deep dark-colored background, rounded-t-[4rem].
  • Grid layout: Brand name + tagline, navigation columns, legal links.
  • "System Operational" status indicator with a pulsing green dot and monospace label.

Technical Requirements (NEVER CHANGE)

  • Stack: React 19, Tailwind CSS v3.4.17, GSAP 3 (with ScrollTrigger plugin), Lucide React for icons.
  • Fonts: Load via Google Fonts <link> tags in index.html based on the selected preset.
  • Images: Use real Unsplash URLs. Select images matching the preset's imageMood. Never use placeholder URLs.
  • File structure: Single App.jsx with components defined in the same file (or split into components/ if >600 lines). Single index.css for Tailwind directives + noise overlay + custom utilities.
  • No placeholders. Every card, every label, every animation must be fully implemented and functional.
  • Responsive: Mobile-first. Stack cards vertically on mobile. Reduce hero font sizes. Collapse navbar into a minimal version.

Build Sequence

After receiving answers to the 4 questions:

  1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
  2. Generate hero copy using the brand name + purpose + preset's hero line pattern.
  3. Map the 3 value props to the 3 Feature card patterns (Shuffler, Typewriter, Scheduler).
  4. Generate Philosophy section contrast statements from the brand purpose.
  5. Generate Protocol steps from the brand's process/methodology.
  6. Scaffold the project: npm create vite@latest, install deps, write all files.
  7. Ensure every animation is wired, every interaction works, every image loads.

Execution Directive: "Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."