From 6e59c1f922b65946d11c4d36444bf49dcb9a9a8e Mon Sep 17 00:00:00 2001 From: idevakk <219866223+idevakk@users.noreply.github.com> Date: Tue, 3 Mar 2026 02:11:34 +0530 Subject: [PATCH] chore: update boost guidelines and skills --- .../cinematic-landing-page-builder/SKILL.md | 202 ++++++++++++++++++ .../cinematic-landing-page-builder/SKILL.md | 156 ++++++++++++++ .../cinematic-landing-page-builder/SKILL.md | 202 ++++++++++++++++++ .junie/guidelines.md | 1 + .../cinematic-landing-page-builder/SKILL.md | 202 ++++++++++++++++++ CLAUDE.md | 1 + GEMINI.md | 1 + boost.json | 3 +- 8 files changed, 767 insertions(+), 1 deletion(-) create mode 100644 .agents/skills/cinematic-landing-page-builder/SKILL.md create mode 100644 .ai/skills/cinematic-landing-page-builder/SKILL.md create mode 100644 .claude/skills/cinematic-landing-page-builder/SKILL.md create mode 100644 .junie/skills/cinematic-landing-page-builder/SKILL.md diff --git a/.agents/skills/cinematic-landing-page-builder/SKILL.md b/.agents/skills/cinematic-landing-page-builder/SKILL.md new file mode 100644 index 0000000..4b06a14 --- /dev/null +++ b/.agents/skills/cinematic-landing-page-builder/SKILL.md @@ -0,0 +1,202 @@ +--- +name: cinematic-landing-page-builder +description: 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 `` 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 `` 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 `` 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." \ No newline at end of file diff --git a/.ai/skills/cinematic-landing-page-builder/SKILL.md b/.ai/skills/cinematic-landing-page-builder/SKILL.md new file mode 100644 index 0000000..04c9b09 --- /dev/null +++ b/.ai/skills/cinematic-landing-page-builder/SKILL.md @@ -0,0 +1,156 @@ +--- +name: cinematic-landing-page-builder +description: 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 `` 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 `` 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 `` 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." \ No newline at end of file diff --git a/.claude/skills/cinematic-landing-page-builder/SKILL.md b/.claude/skills/cinematic-landing-page-builder/SKILL.md new file mode 100644 index 0000000..4b06a14 --- /dev/null +++ b/.claude/skills/cinematic-landing-page-builder/SKILL.md @@ -0,0 +1,202 @@ +--- +name: cinematic-landing-page-builder +description: 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 `` 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 `` 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 `` 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." \ No newline at end of file diff --git a/.junie/guidelines.md b/.junie/guidelines.md index 7e347fe..bd83379 100644 --- a/.junie/guidelines.md +++ b/.junie/guidelines.md @@ -37,6 +37,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes. - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. +- `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. ## Conventions diff --git a/.junie/skills/cinematic-landing-page-builder/SKILL.md b/.junie/skills/cinematic-landing-page-builder/SKILL.md new file mode 100644 index 0000000..4b06a14 --- /dev/null +++ b/.junie/skills/cinematic-landing-page-builder/SKILL.md @@ -0,0 +1,202 @@ +--- +name: cinematic-landing-page-builder +description: 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 `` 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 `` 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 `` 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." \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 7e347fe..bd83379 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -37,6 +37,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes. - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. +- `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. ## Conventions diff --git a/GEMINI.md b/GEMINI.md index 7e347fe..bd83379 100644 --- a/GEMINI.md +++ b/GEMINI.md @@ -37,6 +37,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes. - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. +- `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. ## Conventions diff --git a/boost.json b/boost.json index 531150b..3e99269 100644 --- a/boost.json +++ b/boost.json @@ -20,6 +20,7 @@ "pest-testing", "tailwindcss-development", "filament-db-config", - "developing-with-fortify" + "developing-with-fortify", + "cinematic-landing-page-builder" ] }