cinematic-web 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pushkar Verma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/CLAUDE.md

@@ -0,0 +1,150 @@
+# Cinematic Landing Page Builder — Claude Code Edition
+
+## 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. If the user provides a reference website, first go to it to understand the content and data context (ignoring the design entirely), then execute the other steps to build the full site from the answers. Do not ask follow-ups. Do not over-discuss. Build.
+
+### Questions (all in one AskUserQuestion call)
+
+1. **"How would you like to execute this script? Option A: Normal execution. Option B: Provide a reference website. (If Option B, please paste the URL)"** — Free text. Note: The reference website is strictly to understand the content, purpose, and data of the site, and will NOT be used for the design system at all.
+2. **"What's the brand name and one-line purpose?"** — Free text. Example: "Nura Health — precision longevity medicine powered by biological data."
+3. **"Pick an aesthetic direction"** — Single-select from the presets below. Each preset ships a full design system (palette, typography, image mood, identity label).
+4. **"What are your 3 key value propositions?"** — Free text. Brief phrases. These become the Features section cards.
+5. **"What should visitors do?"** — Free text. The primary CTA. Example: "Join the waitlist", "Book a consultation", "Start free trial".
+6. **"Do you have any special requests, custom features, or on-demand requirements?"** — Free text. Use this to adapt the design or functionality beyond the standard preset. If 3D is requested, automatically apply the `3D Immersive` mode from `prompts/3d-immersive/`.
+
+---
+
+## Aesthetic Presets
+
+Each preset defines: `palette`, `typography`, `identity` (the overall feel), and `imageMood` (Unsplash search keywords for hero/texture images).
+
+<!-- PRESETS:START — auto-generated by scripts/sync-claude.ts, do not edit manually -->
+### 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)
+
+### Preset E — "Antigravity Lift" (Space-Tech Minimalist)
+- **Identity:** A cinematic, deep-space journey representing an intelligent, agentic system. Minimalist and expansive.
+- **Palette:** Deep Space `#000000` (Primary), Aurora Glow `linear-gradient(135deg, #4FC3F7 0%, #7C4DFF 33%, #E91E63 66%, #FF6D00 100%)` (Accent), Off-White `#F8F9FA` (Background), Near Black `#202124` (Text/Dark)
+- **Typography:** Headings: "Google Sans Flex" + "Google Sans" (tight tracking). Data: `"Google Sans Text"`.
+- **Image Mood:** floating elements particle fields soft blurred auroras deep space minimalist clean windows.
+- **Hero line pattern:** "[Agentic verb] the" (bold sans) / "[Scale noun]." (variable sans)
+
+### Preset F — "3D Immersive" (WebGL / Three.js)
+- **Identity:** Full 3D canvas environment. The page IS a 3D world — scroll drives the camera.
+- **Palette:** Deep Void `#0A0A14` (Primary), Plasma `#7B61FF` (Accent), Infinite `#0A0A14` (Background), Abyss `#0A0A14` (Text/Dark)
+- **Typography:** Headings: "Inter" (tight tracking). Drama: "Playfair Display" Italic. Data: `"JetBrains Mono"`.
+- **Image Mood:** 3d abstract geometric space void.
+- **Hero line pattern:** "[Vision noun] in" (bold sans) / "[Dimension word]." (massive serif italic)
+<!-- PRESETS:END -->
+
+
+## Fixed Design System (NEVER CHANGE)
+
+These rules apply to ALL presets A–E. 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. Must feel like **functional software micro-UIs**, not static marketing cards.
+
+**Card 1 — "Diagnostic Shuffler":** 3 overlapping cards cycling vertically with spring-bounce transition.
+**Card 2 — "Telemetry Typewriter":** Monospace live-text feed with blinking accent-colored cursor.
+**Card 3 — "Cursor Protocol Scheduler":** Animated SVG cursor on a weekly grid.
+
+### D. PHILOSOPHY — "The Manifesto"
+Full-width dark section with parallaxing texture and GSAP word-by-word reveal.
+
+### E. PROTOCOL — "Sticky Stacking Archive"
+3 full-screen cards stacking on scroll. Cards underneath scale to `0.9`, blur to `20px`, fade to `0.5`.
+
+### F. MEMBERSHIP / PRICING
+Three-tier pricing grid with middle card highlighted.
+
+### G. FOOTER
+Deep dark background `rounded-t-[4rem]`. "System Operational" status with pulsing green dot.
+
+---
+
+## 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 6 questions:
+
+0. **Reference Check:** If a reference website URL was provided, visit it to analyze content and context (strictly ignore its design).
+1. Map the selected preset to its full design tokens (palette, fonts, image mood, identity).
+2. Generate hero copy using brand name + purpose + preset's hero line pattern.
+3. Map the 3 value props to the 3 Feature card patterns.
+4. Generate Philosophy section contrast statements from the brand purpose.
+5. Generate Protocol steps from the brand's process/methodology.
+6. Scaffold: `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 weighted and professional. Eradicate all generic AI patterns."

package/assets/presets/3d-immersive/README.md

@@ -0,0 +1,30 @@
+# 3D Immersive — WebGL / Three.js
+
+**Identity:** Full 3D canvas environment. The page IS a 3D world — scroll drives the camera.
+
+## Stack
+- React Three Fiber + Drei
+- GSAP ScrollTrigger
+- Lenis smooth scroll
+
+## Build System
+Full build instructions live in `prompts/3d-immersive/3d-website-builder.md`.
+
+## Reference Build
+See `examples/turicks-3d/` for a complete, working implementation (Turicks AI agent demo).
+
+## Template
+Uses `templates/three-fiber/` (parameterized from the reference build).
+
+## Key Dependencies
+
+| Package | Version |
+|---------|---------|
+| `@react-three/fiber` | ^8.0.0 |
+| `@react-three/drei` | ^9.0.0 |
+| `three` | ^0.163.0 |
+| `gsap` | ^3.12.0 |
+| `@studio-freight/lenis` | ^1.0.0 |
+
+## Note
+This preset uses the `three-fiber` template — not the standard `base-react` template. Token substitution is the same; the component architecture differs significantly from presets A–E.

package/assets/presets/3d-immersive/preset.json

@@ -0,0 +1,45 @@
+{
+  "id": "3d-immersive",
+  "name": "3D Immersive",
+  "label": "WebGL / Three.js",
+  "template": "three-fiber",
+  "identity": "Full 3D canvas environment. The page IS a 3D world — scroll drives the camera.",
+  "palette": {
+    "primary": "#0A0A14",
+    "accent": "#7B61FF",
+    "background": "#0A0A14",
+    "dark": "#0A0A14",
+    "primaryLabel": "Deep Void",
+    "accentLabel": "Plasma",
+    "backgroundLabel": "Infinite",
+    "darkLabel": "Abyss"
+  },
+  "typography": {
+    "heading": [
+      "Inter"
+    ],
+    "drama": "Playfair Display",
+    "data": "JetBrains Mono",
+    "headingTracking": "tight",
+    "dramaStyle": "italic"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:ital,wght@1,400;1,700&family=JetBrains+Mono:wght@400;500&display=swap",
+  "imageMood": "3d abstract geometric space void",
+  "unsplashQuery": "abstract+3d+space+geometric",
+  "promptFile": "../../prompts/3d-immersive/3d-website-builder.md",
+  "dependencies": {
+    "@react-three/fiber": "^8.0.0",
+    "@react-three/drei": "^9.0.0",
+    "three": "^0.163.0",
+    "gsap": "^3.12.0",
+    "@studio-freight/lenis": "^1.0.0"
+  },
+  "heroLinePattern": {
+    "part1": "[Vision noun] in",
+    "part1Style": "bold sans",
+    "part2": "[Dimension word].",
+    "part2Style": "massive serif italic"
+  },
+  "notes": "Full build instructions in prompts/3d-immersive/3d-website-builder.md. See examples/turicks-3d/ for a working reference build.",
+  "unsplashPhotoId": "1419242902214-272b3f66ee7a"
+}

package/assets/presets/antigravity-lift/README.md

@@ -0,0 +1,24 @@
+# Antigravity Lift — Space-Tech Minimalist
+
+**Identity:** A cinematic, deep-space journey representing an intelligent, agentic system. Minimalist and expansive.
+
+## Design Tokens
+
+| Token | Value |
+|-------|-------|
+| Primary (Deep Space) | `#000000` |
+| Accent (Aurora Glow) | Multi-color gradient `#4FC3F7 → #7C4DFF → #E91E63 → #FF6D00` |
+| Background (Off-White) | `#F8F9FA` |
+| Dark (Near Black) | `#202124` |
+| Heading fonts | Google Sans Flex + Google Sans |
+| Body font | Google Sans Text |
+| Micro-copy style | Small-caps, wide tracking |
+
+## Image Mood
+Floating elements, particle fields, soft blurred auroras, deep space, minimalist clean windows.
+
+## Hero Pattern
+`[Agentic verb] the` (Bold Sans) / `[Scale noun].` (Variable Sans)
+
+## Example
+**Reference site:** Helios — agentic intelligence platform

package/assets/presets/antigravity-lift/preset.json

@@ -0,0 +1,38 @@
+{
+  "id": "antigravity-lift",
+  "name": "Antigravity Lift",
+  "label": "Space-Tech Minimalist",
+  "template": "base-react",
+  "identity": "A cinematic, deep-space journey representing an intelligent, agentic system. Minimalist and expansive.",
+  "palette": {
+    "primary": "#000000",
+    "accent": "linear-gradient(135deg, #4FC3F7 0%, #7C4DFF 33%, #E91E63 66%, #FF6D00 100%)",
+    "background": "#F8F9FA",
+    "dark": "#202124",
+    "primaryLabel": "Deep Space",
+    "accentLabel": "Aurora Glow",
+    "backgroundLabel": "Off-White",
+    "darkLabel": "Near Black"
+  },
+  "typography": {
+    "heading": [
+      "Google Sans Flex",
+      "Google Sans"
+    ],
+    "body": "Google Sans Text",
+    "data": "Google Sans Text",
+    "headingTracking": "tight",
+    "dramaStyle": "normal",
+    "microCopy": "small-caps wide-tracking"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Text:wght@400;500&display=swap",
+  "imageMood": "floating elements particle fields soft blurred auroras deep space minimalist clean windows",
+  "unsplashQuery": "aurora+space+minimalist+particles",
+  "heroLinePattern": {
+    "part1": "[Agentic verb] the",
+    "part1Style": "bold sans",
+    "part2": "[Scale noun].",
+    "part2Style": "variable sans"
+  },
+  "unsplashPhotoId": "1446776877081-d282a0f896e2"
+}

package/assets/presets/brutalist-signal/README.md

@@ -0,0 +1,24 @@
+# Brutalist Signal — Raw Precision
+
+**Identity:** A control room for the future — no decoration, pure information density.
+
+## Design Tokens
+
+| Token | Value |
+|-------|-------|
+| Primary (Paper) | `#E8E4DD` |
+| Accent (Signal Red) | `#E63B2E` |
+| Background (Off-white) | `#F5F3EE` |
+| Dark (Black) | `#111111` |
+| Heading font | Space Grotesk |
+| Drama font | DM Serif Display Italic |
+| Data font | Space Mono |
+
+## Image Mood
+Concrete, brutalist architecture, raw materials, industrial.
+
+## Hero Pattern
+`[Direct verb] the` (Bold Sans) / `[System noun].` (Massive Serif Italic)
+
+## Example
+**Reference site:** Praxis — control software for distributed systems

package/assets/presets/brutalist-signal/preset.json

@@ -0,0 +1,36 @@
+{
+  "id": "brutalist-signal",
+  "name": "Brutalist Signal",
+  "label": "Raw Precision",
+  "template": "base-react",
+  "identity": "A control room for the future — no decoration, pure information density.",
+  "palette": {
+    "primary": "#E8E4DD",
+    "accent": "#E63B2E",
+    "background": "#F5F3EE",
+    "dark": "#111111",
+    "primaryLabel": "Paper",
+    "accentLabel": "Signal Red",
+    "backgroundLabel": "Off-white",
+    "darkLabel": "Black"
+  },
+  "typography": {
+    "heading": [
+      "Space Grotesk"
+    ],
+    "drama": "DM Serif Display",
+    "data": "Space Mono",
+    "headingTracking": "tight",
+    "dramaStyle": "italic"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&family=DM+Serif+Display:ital@1&family=Space+Mono:wght@400;700&display=swap",
+  "imageMood": "concrete brutalist architecture raw materials industrial",
+  "unsplashQuery": "concrete+brutalist+architecture+industrial",
+  "heroLinePattern": {
+    "part1": "[Direct verb] the",
+    "part1Style": "bold sans",
+    "part2": "[System noun].",
+    "part2Style": "massive serif italic"
+  },
+  "unsplashPhotoId": "1553877522-40d43f33d8f0"
+}

package/assets/presets/midnight-luxe/README.md

@@ -0,0 +1,24 @@
+# Midnight Luxe — Dark Editorial
+
+**Identity:** A private members' club meets a high-end watchmaker's atelier.
+
+## Design Tokens
+
+| Token | Value |
+|-------|-------|
+| Primary (Obsidian) | `#0D0D12` |
+| Accent (Champagne) | `#C9A84C` |
+| Background (Ivory) | `#FAF8F5` |
+| Dark (Slate) | `#2A2A35` |
+| Heading font | Inter |
+| Drama font | Playfair Display Italic |
+| Data font | JetBrains Mono |
+
+## Image Mood
+Dark marble, gold accents, architectural shadows, luxury interiors.
+
+## Hero Pattern
+`[Aspirational noun] meets` (Bold Sans) / `[Precision word].` (Massive Serif Italic)
+
+## Example
+**Reference site:** Atelier 23 — luxury watchmaker

package/assets/presets/midnight-luxe/preset.json

@@ -0,0 +1,36 @@
+{
+  "id": "midnight-luxe",
+  "name": "Midnight Luxe",
+  "label": "Dark Editorial",
+  "template": "base-react",
+  "identity": "A private members' club meets a high-end watchmaker's atelier.",
+  "palette": {
+    "primary": "#0D0D12",
+    "accent": "#C9A84C",
+    "background": "#FAF8F5",
+    "dark": "#2A2A35",
+    "primaryLabel": "Obsidian",
+    "accentLabel": "Champagne",
+    "backgroundLabel": "Ivory",
+    "darkLabel": "Slate"
+  },
+  "typography": {
+    "heading": [
+      "Inter"
+    ],
+    "drama": "Playfair Display",
+    "data": "JetBrains Mono",
+    "headingTracking": "tight",
+    "dramaStyle": "italic"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:ital,wght@1,400;1,600;1,700&family=JetBrains+Mono:wght@400;500&display=swap",
+  "imageMood": "dark marble gold accents architectural shadows luxury interiors",
+  "unsplashQuery": "dark+marble+gold+luxury+interior",
+  "heroLinePattern": {
+    "part1": "[Aspirational noun] meets",
+    "part1Style": "bold sans",
+    "part2": "[Precision word].",
+    "part2Style": "massive serif italic"
+  },
+  "unsplashPhotoId": "1549989460-c3f0c37b8e73"
+}

package/assets/presets/organic-tech/README.md

@@ -0,0 +1,24 @@
+# Organic Tech — Clinical Boutique
+
+**Identity:** A bridge between a biological research lab and an avant-garde luxury magazine.
+
+## Design Tokens
+
+| Token | Value |
+|-------|-------|
+| Primary (Moss) | `#2E4036` |
+| Accent (Clay) | `#CC5833` |
+| Background (Cream) | `#F2F0E9` |
+| Dark (Charcoal) | `#1A1A1A` |
+| Heading fonts | Plus Jakarta Sans + Outfit |
+| Drama font | Cormorant Garamond Italic |
+| Data font | IBM Plex Mono |
+
+## Image Mood
+Dark forest, organic textures, moss, ferns, laboratory glassware.
+
+## Hero Pattern
+`[Concept noun] is the` (Bold Sans) / `[Power word].` (Massive Serif Italic)
+
+## Example
+**Reference site:** Nura Health — precision longevity medicine

package/assets/presets/organic-tech/preset.json

@@ -0,0 +1,37 @@
+{
+  "id": "organic-tech",
+  "name": "Organic Tech",
+  "label": "Clinical Boutique",
+  "template": "base-react",
+  "identity": "A bridge between a biological research lab and an avant-garde luxury magazine.",
+  "palette": {
+    "primary": "#2E4036",
+    "accent": "#CC5833",
+    "background": "#F2F0E9",
+    "dark": "#1A1A1A",
+    "primaryLabel": "Moss",
+    "accentLabel": "Clay",
+    "backgroundLabel": "Cream",
+    "darkLabel": "Charcoal"
+  },
+  "typography": {
+    "heading": [
+      "Plus Jakarta Sans",
+      "Outfit"
+    ],
+    "drama": "Cormorant Garamond",
+    "data": "IBM Plex Mono",
+    "headingTracking": "tight",
+    "dramaStyle": "italic"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Outfit:wght@300;400;600&family=Cormorant+Garamond:ital,wght@1,300;1,400;1,600&family=IBM+Plex+Mono:wght@400;500&display=swap",
+  "imageMood": "dark forest organic textures moss ferns laboratory glassware",
+  "unsplashQuery": "dark+forest+moss+laboratory",
+  "heroLinePattern": {
+    "part1": "[Concept noun] is the",
+    "part1Style": "bold sans",
+    "part2": "[Power word].",
+    "part2Style": "massive serif italic"
+  },
+  "unsplashPhotoId": "1518770660439-4636190af475"
+}

package/assets/presets/vapor-clinic/README.md

@@ -0,0 +1,24 @@
+# Vapor Clinic — Neon Biotech
+
+**Identity:** A genome sequencing lab inside a Tokyo nightclub.
+
+## Design Tokens
+
+| Token | Value |
+|-------|-------|
+| Primary (Deep Void) | `#0A0A14` |
+| Accent (Plasma) | `#7B61FF` |
+| Background (Ghost) | `#F0EFF4` |
+| Dark (Graphite) | `#18181B` |
+| Heading font | Sora |
+| Drama font | Instrument Serif Italic |
+| Data font | Fira Code |
+
+## Image Mood
+Bioluminescence, dark water, neon reflections, microscopy.
+
+## Hero Pattern
+`[Tech noun] beyond` (Bold Sans) / `[Boundary word].` (Massive Serif Italic)
+
+## Example
+**Reference site:** Helix.bio — next-generation gene therapy

package/assets/presets/vapor-clinic/preset.json

@@ -0,0 +1,36 @@
+{
+  "id": "vapor-clinic",
+  "name": "Vapor Clinic",
+  "label": "Neon Biotech",
+  "template": "base-react",
+  "identity": "A genome sequencing lab inside a Tokyo nightclub.",
+  "palette": {
+    "primary": "#0A0A14",
+    "accent": "#7B61FF",
+    "background": "#F0EFF4",
+    "dark": "#18181B",
+    "primaryLabel": "Deep Void",
+    "accentLabel": "Plasma",
+    "backgroundLabel": "Ghost",
+    "darkLabel": "Graphite"
+  },
+  "typography": {
+    "heading": [
+      "Sora"
+    ],
+    "drama": "Instrument Serif",
+    "data": "Fira Code",
+    "headingTracking": "tight",
+    "dramaStyle": "italic"
+  },
+  "googleFonts": "https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Instrument+Serif:ital@1&family=Fira+Code:wght@400;500&display=swap",
+  "imageMood": "bioluminescence dark water neon reflections microscopy",
+  "unsplashQuery": "bioluminescence+neon+dark+water",
+  "heroLinePattern": {
+    "part1": "[Tech noun] beyond",
+    "part1Style": "bold sans",
+    "part2": "[Boundary word].",
+    "part2Style": "massive serif italic"
+  },
+  "unsplashPhotoId": "1535813426-e37038a9af65"
+}

package/assets/prompts/product-development/Guided-MVP-Concept.md

@@ -0,0 +1,67 @@
+## ROLE:
+You are a Lean Startup Advisor and Product Strategist. Your expertise lies in helping founders and product owners distill broad product visions into focused, testable Minimum Viable Product (MVP) concepts by leveraging existing requirements and specifications. Act as a specialized agent focused solely on defining the core MVP concept based on provided context.
+
+## GOAL:
+Collaborate with me to define a clear and concise MVP Concept Description. This description will articulate the specific hypothesis the MVP aims to test, the target early adopter segment, the core problem being addressed for them, the absolute minimum feature set required, and any key constraints. We will use the provided Product Requirements Document (PRD) and optionally the UX Specifications as the primary source material, proceeding iteratively through guided questioning to select and refine elements for the MVP.
+
+## PROCESS & KEY RULES:
+1.  **Inputs Review:** I will provide:
+    *   A previously created **Product Requirements Document (PRD)** (Required).
+    *   Optionally, **UX Specifications** (Helpful for feature discussion).
+    *   My initial, potentially vague, thoughts or goals for the first version.
+2.  **Contextual Analysis & Leverage:** **Thoroughly analyze** the PRD (and UX Specs if provided) step-by-step. **Actively use the information within these documents** (overall vision, target users, proposed features, user flows) as the foundation for our discussion. Your primary task is to help me **select and prioritize** from this existing information to form the MVP, not to generate new requirements from scratch. Identify potential areas within the broader scope that could form the basis of a focused MVP.
+3.  **Guided Questioning (Targeted & Non-Redundant):** Guide me by asking specific, targeted questions **designed to narrow the scope** defined in the inputs. **Avoid asking for information clearly stated in the PRD or UX Specs unless clarification is needed.** Focus questions on prioritization, hypothesis formulation, and identifying the *minimum* viable slice. Use bullet points for clarity if asking multiple questions. Keep questions concise.
+4.  **Logical Flow:** Focus first on clarifying the **MVP Goal/Hypothesis**. What specific assumption **derived directly from the PRD's goals or user problems** are we trying to validate *first*? Once the hypothesis is clear, move to defining the **Target Audience Subset** (a specific segment from the PRD audience) and the specific **Problem** it solves for them (a focused aspect of problems mentioned in PRD/UX). Only then, focus on identifying the absolute **Minimum Feature Set** (selecting the essential elements from the PRD/UX features) needed *strictly* to test that hypothesis. Finally, capture any known **Constraints**.
+5.  **Prioritization Emphasis:** Actively help me prioritize **within the context of the provided documents**. Ask questions like "Looking at features X, Y, and Z listed in the PRD/UX Specs, which one is the *single most critical* for testing [Hypothesis]?" or "If we can only implement a small part of User Flow A from the UX specs for this MVP, what are the absolute essential steps?". Push to differentiate "must-haves" for *this specific MVP test* from "nice-to-haves" belonging to the broader vision already documented.
+6.  **Assumption & Uncertainty Handling:** If you make assumptions (e.g., about which PRD goal seems most suitable for an initial test based on your analysis), state them explicitly, **reference the relevant section of the input document**, and ask for validation. Acknowledge uncertainties.
+7.  **Relate to PRD/UX:** Constantly link the MVP concept back to the **specific sections or elements** of the PRD/UX Specs. Ask "How does this MVP hypothesis relate to Goal 3.1 in the PRD?" or "Which user segment defined in the PRD (Section 2.2) are we targeting most narrowly with this MVP?" or "Does this minimal feature set correspond to Screens A, B, and part of C in the UX Specs?".
+8.  **User-Centered Check-in:** Regularly verify our direction. Before shifting focus significantly (e.g., moving from hypothesis to features), briefly state your intended next step or understanding **based on the input documents and our discussion**, and explicitly ask for my confirmation.
+9.  **Clarity Assistance:** If my input is unclear, suggest improvements or ask for clarification, potentially referencing related points in the PRD/UX Specs.
+10. **Adherence & Tone:** Follow these instructions precisely. Maintain a clear, strategic, inquisitive, practical, and lean-focused tone. Provide unbiased guidance **grounded in the provided documentation**.
+11. **Drafting the Concept Description:** Continue this conversational process until sufficient information is gathered for all relevant sections of the concept structure below. Only then, after confirming with me, offer to structure the information into a draft MVP Concept Description using clear markdown formatting.
+
+## INPUT 1: PRODUCT REQUIREMENTS DOCUMENT (PRD)
+--- PRD START ---
+
+[ **<<< PASTE THE FULL TEXT OF THE PRD HERE >>>** ]
+*(This provides the overall vision and context)*
+
+--- PRD END ---
+
+## INPUT 2: UX SPECIFICATIONS (Optional)
+--- UX SPECS START ---
+
+[ **<<< PASTE RELEVANT UX SPECIFICATIONS OR INDICATE IF NOT PROVIDING >>>** ]
+*(Helpful for discussing specific features and user flows)*
+
+--- UX SPECS END ---
+
+## INPUT 3: MY INITIAL THOUGHTS/GOALS FOR THE FIRST VERSION
+--- INITIAL THOUGHTS START ---
+
+[ **<<< PASTE YOUR INITIAL, POSSIBLY VAGUE, IDEAS ABOUT THE FIRST VERSION HERE >>>** ]
+*(Example: "I think we should start with the core sharing feature from the PRD Section 4.2, maybe just for the mobile users (PRD Section 2.1) first? Not sure what's absolutely needed from UX Flow 3.")*
+*(Replace example with your actual initial thoughts.)*
+
+--- INITIAL THOUGHTS END ---
+
+## YOUR TASK NOW:
+Review **all provided inputs** (PRD, optional UX Specs, Initial Thoughts) carefully, applying the rules outlined in the PROCESS section. **Focus on leveraging the content within the PRD and UX Specs.** **Do not write the full concept description yet.** Start by asking me the **most important 1-3 clarifying questions** based on your analysis, aimed at **identifying the core Goal or Hypothesis for the MVP by selecting from or focusing within the existing PRD goals/problems.** Frame your questions in the context of the provided documents. Remember to check if your initial line of questioning makes sense to me (as per Rule #8).
+
+## DESIRED MVP CONCEPT DESCRIPTION STRUCTURE (We will build towards this):
+*   **1. Core MVP Hypothesis/Goal:** What specific assumption (derived from the PRD) is this MVP testing? What is the primary learning objective?
+*   **2. Target Audience (MVP Subset):** Who are the specific early adopters for *this MVP*? (A focused segment of the PRD audience).
+*   **3. Problem Solved (MVP Focus):** What specific, narrow problem (identified in PRD/UX) does this MVP solve for the target subset?
+*   **4. Minimum Feature Set (Prioritized - "In" vs. "Out"):**
+    *   **IN:** The absolute minimum features (selected/adapted from PRD/UX features) required to test the hypothesis. (Be specific: e.g., "Manual user profile setup (Ref UX Screen 2)", "List item - text only (Ref PRD Req 4.5.1)", "Basic browse view - no search/filter (Simplified from UX Flow 5)").
+    *   **OUT:** Key features from PRD/UX explicitly *excluded* from this MVP build.
+*   **5. Key Constraints (MVP Specific):** Any known limitations like budget, timeline, specific tech preferences/stack constraints, team size/skills relevant *to this MVP*.
+*   **6. (Optional) Initial Success Metrics Idea:** A brief thought on how hypothesis validation might be measured (e.g., "% of target users completing core action X (from UX Flow 3)", "Qualitative feedback score > Y on Problem Z (from PRD 1.2)").
+
+## TONE & CONSTRAINTS:
+*   Maintain a clear, strategic, inquisitive, practical, and lean-focused tone.
+*   Focus solely on defining the *concept* – the "what" and "why" of the MVP, **derived from the provided documents**.
+*   Assume the output needs to be clear enough to feed into the MVP Development Planning phase.
+
+## LET'S BEGIN:
+Please ask your first set of clarifying questions based on the PRD, optional UX Specs, and my initial thoughts, focusing on defining the core MVP Hypothesis/Goal **by referencing and narrowing down the existing information**. Let me know if your proposed starting point makes sense.