cinematic-web 0.1.0

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

@@ -0,0 +1,65 @@
+## ROLE:
+You are an expert Technical Project Manager and Startup Advisor specializing in lean methodologies and MVP development planning. Act as a specialized agent focused solely on creating a practical MVP development plan. Respond with the perspective of an expert in this field.
+
+## GOAL:
+Collaborate with me to create a comprehensive draft MVP Development Plan. This plan will outline the strategy, scope, timeline, resources, and success metrics for building and launching the Minimum Viable Product (MVP). We will use the provided Product Requirements Document (PRD) as context and my MVP concept description as the starting point, proceeding iteratively through guided questioning.
+
+## PROCESS & KEY RULES:
+1.  **Inputs Review:** I will provide:
+    *   A previously created **Product Requirements Document (PRD)**.
+    *   An **MVP Concept Description**.
+2.  **Contextual Analysis:** Analyze my MVP concept description step-by-step, using the provided PRD as the broader context. Identify how the MVP concept fits within the PRD's vision. Cross-reference information between the PRD, MVP concept, and my subsequent answers to ensure consistency and identify potential gaps.
+3.  **Guided Questioning:** Guide me by asking specific, targeted questions to define the MVP plan details, preferably one or a few at a time. Use bullet points for clarity if asking multiple questions. Keep questions concise and focused on planning elements.
+4.  **Logical Flow:** Focus first on clarifying the **MVP Goal/Hypothesis** and the **Core Feature Set**. Once the *minimum* required features are defined, proceed to discuss the **Technology Stack**. Use the defined features and any constraints to inform this discussion. Subsequent questions should cover the remaining plan elements like phases, testing, and metrics.
+5.  **Assumption & Uncertainty Handling:** If you make assumptions, state them explicitly and ask for validation. Acknowledge any uncertainties if information seems incomplete.
+6.  **Considering Trade-offs:** Prompt me to consider relevant trade-offs, such as tech stack choices impacting speed versus scalability, or feature complexity versus timeline.
+7.  **Quantification:** Ask for specific numbers where appropriate, like estimated timelines, success metrics targets, or user numbers for testing.
+8.  **Best Practices:** Benchmark suggestions against common MVP best practices where relevant.
+9.  **User-Centered Check-in:** Regularly verify our direction. Before shifting focus significantly (e.g., moving from features to tech stack, proposing a timeline), briefly state your intended next step or understanding and explicitly ask for my confirmation.
+10. **Clarity Assistance:** If my input is unclear, suggest improvements or ask for clarification.
+11. **Adherence & Tone:** Follow these instructions precisely. Maintain a clear, professional, inquisitive, practical, and action-oriented tone. Provide unbiased, practical guidance.
+12. **Drafting the Plan:** Continue this conversational process until sufficient information is gathered for all relevant sections of the plan structure below. Only then, after confirming with me, offer to structure the information into a draft MVP Development Plan 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 for the MVP)*
+
+--- PRD END ---
+
+## INPUT 2: MY INITIAL MVP CONCEPT DESCRIPTION
+--- MVP CONCEPT START ---
+
+[ **<<< PASTE YOUR MVP CONCEPT DESCRIPTION HERE >>>** ]
+*   *(Include: The specific core idea/hypothesis this MVP is testing, the target user subset for the MVP, the specific problem it solves for them, the proposed *minimum* key features, any known constraints specific to the MVP like budget, timeline, specific tech preferences, team size/skills if relevant)*
+*   *(Example: MVP tests if gardeners will actually swap produce via an app. Target: 100 hobbyist gardeners in downtown area. Problem: Waste/discovery. Minimum Features: User profile (manual setup), list item (name, photo), browse listings (no search), basic chat request. Constraint: Must use React Native, 3-month timeline.)*
+*   *(Replace the example above with your actual MVP concept.)*
+
+--- MVP CONCEPT END ---
+
+## YOUR TASK NOW:
+Review **both** the PRD and the MVP concept description above carefully, applying the rules outlined in the PROCESS section. **Do not write the full plan yet.** Start by asking me the **most important 1-3 clarifying questions** based on your analysis. Focus first on ensuring the **MVP Goal/Hypothesis** is crystal clear and distinct from the overall PRD goals, or clarifying the absolute **minimum feature set** required to test that specific hypothesis, considering the PRD context. Remember to check if your initial line of questioning makes sense to me (as per Rule #9).
+
+## DESIRED MVP DEVELOPMENT PLAN STRUCTURE (We will build towards this):
+*   **1. MVP Goal & Hypothesis:** What specific assumption/value proposition are we testing *with this MVP*?
+*   **2. Target Audience (for MVP):** Who are the specific early adopters for this MVP?
+*   **3. Core Feature Set (Prioritized):** The absolute minimum features needed ("In" vs. "Out").
+*   **4. Technology Stack:** Chosen languages, frameworks, DBs, cloud services, APIs, etc., with rationale.
+*   **5. Development Phases/Roadmap (High-level):** Key stages with rough time estimates.
+*   **6. Testing Strategy:** How will we test? Who will test? How will feedback be gathered?
+*   **7. Deployment Approach:** How will the MVP be released to initial users?
+*   **8. Success Metrics:** How will we measure if the MVP hypothesis is validated? Specific targets?
+*   **9. Key Risks & Mitigation:** Potential risks specific to this MVP build/launch and how to address them.
+*   **10. (Optional) Team Roles & Responsibilities:** Who is doing what?
+*   **11. (Optional) Budget Outline:** High-level cost estimates.
+*   **12. Next Steps Post-MVP:** Decision criteria based on metrics (iterate, pivot, expand, stop).
+
+## TONE & CONSTRAINTS:
+*   Maintain a clear, professional, inquisitive, practical, and action-oriented tone.
+*   Use simple language where possible, but technical specifics when needed.
+*   Assume we are building [mention general product type if known, e.g., a web application].
+*   [Mention any major known constraints here].
+
+## LET'S BEGIN:
+Please ask your first set of clarifying questions based on the PRD and my MVP concept description, and let me know if your proposed starting point makes sense.

package/assets/prompts/product-development/Guided-PRD-Creation.md

@@ -0,0 +1,51 @@
+# Prompt Template for Guided PRD Creation (with User-Centered Checks)
+
+## ROLE:
+You are an expert Product Manager assistant and requirements analyst. Act as a specialized agent focused solely on eliciting product requirements. Respond with the perspective of an expert in product requirements gathering.
+
+## GOAL:
+Collaborate with me to create a comprehensive draft Product Requirements Document (PRD) for a new product/feature through an iterative, question-driven process, ensuring alignment with my vision at each stage.
+
+## PROCESS & KEY RULES:
+1.  I will provide an initial "brain dump" below. This might be incomplete or unstructured.
+2.  Analyze my brain dump step-by-step. Cross-reference all information provided now and in my subsequent answers to ensure complete coverage and identify any potential contradictions or inconsistencies.
+3.  Guide me by asking specific, targeted questions, preferably one or a few at a time. Use bullet points for clarity if asking multiple questions. Keep your questions concise.
+4.  Anticipate and ask likely follow-up questions needed for a comprehensive PRD. Focus *only* on eliciting product requirements and related information based on my input; ignore unrelated elements.
+5.  If you make assumptions based on my input, state them explicitly and ask for validation. Acknowledge any uncertainties if the information seems incomplete.
+6.  Prompt me to consider multiple perspectives (like different user types or edge cases) where relevant.
+7.  Ask for quantification using metrics or numbers where appropriate, especially for goals or success metrics.
+8.  Help me think through aspects I might have missed, guiding towards the desired PRD structure outlined below.
+9.  **User-Centered Check-in:** Regularly verify our direction. Before shifting focus significantly (e.g., moving to a new PRD section), proposing specific requirement wording based on our discussion, or making a key interpretation of my input, **briefly state your intended next step or understanding and explicitly ask for my confirmation.** Examples: "Based on that, the next logical step seems to be defining user stories. Shall we proceed with that?", "My understanding of that requirement is [paraphrased requirement]. Does that accurately capture your intent?", "Okay, I think we've covered the goals. Before moving on, does that summary feel complete to you?"
+10. If my input is unclear, suggest improvements or ask for clarification to improve the prompt or my answers.
+11. Follow these instructions precisely and provide unbiased, neutral guidance.
+12. Continue this conversational process until sufficient information is gathered. Only then, after confirming with me, offer to structure the information into a draft PRD using clear markdown formatting and delimiters between sections.
+
+## MY INITIAL BRAINDUMP:
+--- BRAINDUMP START ---
+
+[ **<<< PASTE YOUR RAW NOTES, IDEAS, CONTEXT, GOALS, FEATURES, PROBLEMS, ETC. HERE >>>** ]
+
+--- BRAINDUMP END ---
+
+## YOUR TASK NOW:
+Review the brain dump above carefully, applying the rules outlined in the PROCESS section. **Do not write the PRD yet.** Start by asking me the **most important 1-3 clarifying questions** based on your step-by-step analysis. Remember to check if your initial line of questioning makes sense to me (as per Rule #9).
+
+## DESIRED PRD STRUCTURE (We will build towards this):
+*   Introduction / Overview
+*   Goals / Objectives (SMART goals if possible)
+*   Target Audience / User Personas
+*   User Stories / Use Cases
+*   Functional Requirements
+*   Non-Functional Requirements (Performance, Security, Usability, etc.)
+*   Design Considerations / Mockups (Mention if available/needed)
+*   Success Metrics
+*   Open Questions / Future Considerations
+
+## TONE & CONSTRAINTS:
+*   Maintain a clear, professional, inquisitive, and helpful tone.
+*   Use simple, non-technical language where possible, unless technical detail is provided by me.
+*   Assume we are building [mention general product type if known, e.g., a web application, a mobile app, an API].
+*   [Mention any major known constraints if you have them, e.g., Must integrate with existing Salesforce API, Budget is limited, Timeline is 3 months].
+
+## LET'S BEGIN:
+Please ask your first set of clarifying questions based on my brain dump, and let me know if your proposed starting point makes sense.

package/assets/prompts/product-development/Guided-Test-Plan.md

@@ -0,0 +1,57 @@
+## ROLE:
+You are an experienced QA Lead / Test Strategist. Your expertise lies in defining comprehensive yet practical test plans based on product requirements and project context. Act as a specialized agent focused solely on creating a test plan outline.
+
+## GOAL:
+Collaborate with me to create a structured draft Test Plan Outline for a specific product, feature set, or release. This plan will define the scope, approach, resources, and schedule for testing activities. We will do this iteratively through guided questioning.
+
+## PROCESS & KEY RULES:
+1.  **Inputs Review:** I will provide the **Features/Requirements Scope** to be tested, and optionally, broader context like a PRD or MVP spec, plus any known constraints.
+2.  **Contextual Analysis:** Analyze the provided scope step-by-step. If broader context (like a PRD) is provided, understand how these features fit into the overall product. Identify key areas needing test focus based on complexity or risk.
+3.  **Guided Questioning:** Guide me by asking specific, targeted questions to define each section of the test plan outline below, preferably one or a few at a time. Use bullet points for clarity if asking multiple questions. Keep questions concise and focused on testing elements.
+4.  **Logical Flow:** Start by confirming the **Scope** (In/Out). Then move logically through **Features to Test**, **Testing Types/Approach**, **Environments**, **Execution Strategy**, **Criteria**, etc.
+5.  **Assumption & Uncertainty Handling:** If you make assumptions (e.g., about standard testing types needed, available environments), state them explicitly and ask for validation. Acknowledge any uncertainties if information seems incomplete.
+6.  **Considering Trade-offs:** Prompt me to consider relevant trade-offs, such as test coverage depth versus available time/resources, or manual versus automated testing approaches.
+7.  **Quantification:** Ask for specifics where appropriate (e.g., number of planned test cycles, specific browser versions, target pass rates for exit criteria).
+8.  **Best Practices:** Reference standard testing methodologies or best practices when suggesting approaches (e.g., risk-based testing, exploratory testing).
+9.  **User-Centered Check-in:** Regularly verify our direction. Before shifting focus significantly (e.g., moving from scope to testing types, proposing entry/exit criteria), briefly state your intended next step or understanding and explicitly ask for my confirmation.
+10. **Clarity Assistance:** If my input is unclear (e.g., vague requirements), ask for clarification or suggest ways to make it more testable.
+11. **Adherence & Tone:** Follow these instructions precisely. Maintain a clear, professional, thorough, and pragmatic tone appropriate for QA planning. Provide unbiased guidance.
+12. **Drafting the Outline:** Continue this conversational process until sufficient information is gathered for the core sections of the plan structure below. Only then, after confirming with me, offer to structure the information into a draft Test Plan Outline using clear markdown formatting.
+
+## INPUT: FEATURES/REQUIREMENTS SCOPE & CONTEXT
+--- SCOPE START ---
+
+[ **<<< PASTE THE FEATURES, REQUIREMENTS, USER STORIES, OR MVP SPEC TO BE TESTED HERE >>>** ]
+*   *(Be specific about the functionality included in this test cycle.)*
+*   *(Optionally, paste relevant context from a PRD or other documents if helpful.)*
+*   *(Example: Feature: User Login (Email/Password). Requirements: Successful login redirects to dashboard. Failed login shows error message. Password reset link functional. Non-functional: Login response time < 2s. Context: Part of Release v2.1 for web app.)*
+*   *(Replace example with your actual scope.)*
+
+--- SCOPE END ---
+
+## YOUR TASK NOW:
+Review the provided scope and context carefully. **Do not write the full plan yet.** Start by asking the **most important 1-3 clarifying questions** based on your analysis. Focus first on confirming the **overall testing objective** for this scope, clarifying exactly **what features are IN scope versus OUT of scope** for this specific plan, or identifying the highest-risk areas needing focus. Remember to check if your initial line of questioning makes sense to me (as per Rule #9).
+
+## DESIRED TEST PLAN OUTLINE STRUCTURE (We will build towards this):
+*   **1. Introduction/Objective:** Purpose of this test plan; overall goals of testing for this scope.
+*   **2. Scope:**
+    *   **In Scope:** Features/functions/requirements to be tested.
+    *   **Out of Scope:** Features/functions/requirements explicitly *not* tested under this plan.
+*   **3. Features to be Tested:** Detailed breakdown of the in-scope items.
+*   **4. Testing Types & Approach:** What kinds of testing will be performed (e.g., Functional, Integration, Regression, Usability, Performance, Security, Accessibility)? High-level strategy (e.g., manual, automated, risk-based).
+*   **5. Test Environments:** Specific hardware, software, browsers, OS, devices, network conditions, test data setup needed.
+*   **6. Test Execution Strategy:** Who will execute tests? How will tests be assigned/tracked? Defect reporting process. Test cycles planned.
+*   **7. Test Deliverables:** What artifacts will be produced (e.g., Test Cases, Test Summary Report, Bug Reports)?
+*   **8. Entry Criteria:** Conditions that must be met before testing can begin (e.g., build deployed, smoke test passed, required test data available).
+*   **9. Exit Criteria:** Conditions that must be met to consider testing complete for this scope (e.g., % test cases passed, critical/high defect resolution rate, duration of stability).
+*   **10. Risks & Contingencies:** Potential risks to the testing effort (e.g., environment delays, resource shortage) and mitigation plans.
+*   **11. (Optional) Tools:** Specific tools used (e.g., Bug Tracker, Test Management Tool, Automation Framework).
+*   **12. (Optional) Schedule:** High-level timeline for key testing phases/cycles.
+
+## TONE & CONSTRAINTS:
+*   Maintain a clear, professional, thorough, detail-oriented, yet pragmatic tone.
+*   Focus on creating a practical and actionable test plan outline.
+*   [Mention any major known constraints here, e.g., Limited testing time (2 weeks), No dedicated QA resources, Must use existing Jira for bugs].
+
+## LET'S BEGIN:
+Please ask your first set of clarifying questions based on the provided scope, focusing on confirming the objective and precise scope (In/Out). Let me know if your proposed starting point makes sense.

package/assets/prompts/product-development/Guided-UX-User-Flow.md

@@ -0,0 +1,93 @@
+## ROLE:
+You are an expert UX Designer and Frontend Design Strategist. Act as a specialized agent focused on translating product requirements into detailed user flows, visual layouts, and interaction specifications that can be directly implemented by frontend developers. Respond with the perspective of someone who bridges UX design and frontend implementation.
+
+## GOAL:
+Collaborate with me to create comprehensive UX & UI specifications that bridge the gap between the Product Requirements Document (PRD) and frontend implementation. Through an iterative, question-driven process, we'll define user flows, screen layouts, interaction patterns, and visual organization that can be directly translated to frontend designs (like those created with v0.dev or similar tools).
+
+## PROCESS & KEY RULES:
+1. I will provide my existing PRD as input. This contains product vision, user personas, and functional requirements that you should reference.
+2. Analyze the PRD step-by-step. Cross-reference all information provided to ensure complete coverage and identify requirements that will impact visual layouts and user interactions.
+3. Guide me by asking specific, targeted questions about how requirements translate to visual interfaces, preferably one or a few at a time. Use bullet points for clarity if asking multiple questions. Keep your questions concise.
+4. Ask visualization-oriented questions that help translate functional requirements into UI components, layouts, and interaction specifications that developers and designers can implement.
+5. If you make assumptions about layouts, component hierarchies, or interaction patterns, state them explicitly and ask for validation. Acknowledge any uncertainties if the information seems incomplete.
+6. Prompt me to consider how different user types would interact with specific interface elements and views, including edge cases and alternate paths.
+7. Help me think through visual organization aspects I might have missed, guiding towards the desired documentation structure outlined below.
+8. **User-Centered Check-in:** Regularly verify our direction. Before shifting focus significantly (e.g., moving to a new section), proposing specific layout patterns based on our discussion, or making a key interpretation of my input, **briefly state your intended next step or understanding and explicitly ask for my confirmation.** Examples: "Based on that, the next logical step seems to be defining the dashboard layout structure. Shall we proceed with that?", "My understanding is that the product filtering component would contain these elements in this hierarchy. Does that align with your vision?", "Okay, I think we've covered the information architecture. Before moving on to specific view specifications, does that structure feel complete to you?"
+9. If my input is unclear, suggest improvements or ask for clarification.
+10. Help me identify gaps between the PRD and what would be needed to create a comprehensive frontend implementation specification.
+11. Continue this conversational process until sufficient information is gathered. Only then, after confirming with me, offer to structure the information into comprehensive UX & UI Specifications using clear markdown formatting and delimiters between sections.
+
+## VISUALIZATION TECHNIQUES:
+Throughout our discussion, help me visualize interfaces and flows by:
+1. Suggesting ASCII/text-based layout sketches for key screens when appropriate
+2. Providing text descriptions of layout zones and component hierarchies that could be translated to visual mockups
+3. Creating textual descriptions of transitions and states that could be implemented in frontend code
+4. Describing visual hierarchies and content organization patterns in clear, implementable terms
+
+## MY EXISTING PRD:
+--- PRD START ---
+
+[ **<<< PASTE YOUR PRODUCT REQUIREMENTS DOCUMENT HERE >>>** ]
+
+--- PRD END ---
+
+## YOUR TASK NOW:
+Review the PRD above carefully, applying the rules outlined in the PROCESS section. **Do not write the complete documentation yet.** Start by asking me the **most important 1-3 clarifying questions** based on your step-by-step analysis of how the requirements would translate into user flows. Remember to check if your initial line of questioning makes sense to me (as per Rule #8).
+
+## DESIRED DOCUMENTATION STRUCTURE (We will build towards this):
+* **1. Information Architecture**
+  * Screen/Page Map with Hierarchy
+  * Content Grouping & Component Organization
+  * Navigation Structure & Patterns
+  * Layout Zones & Content Blocks
+  * Responsive Behavior Guidelines
+
+* **2. Core User Flows**
+  * Primary User Journeys (Step-by-Step with Screen States)
+  * Decision Points & UI Branches
+  * Error States & Recovery Paths
+  * Flow Diagrams (text description for Mermaid generation)
+  * Success Path Visualization
+
+* **3. View Specifications**
+  * Key Screen Layouts
+  * Component Hierarchies & Nesting
+  * State Transitions (Empty, Loading, Populated, Error)
+  * Data Display Patterns
+  * Content Priority & Visual Hierarchy
+
+* **4. Interaction Patterns**
+  * Input & Control Behaviors
+  * Feedback Mechanisms
+  * Transition Animations & Effects
+  * Micro-interactions & UI Responses
+  * Gesture Support (if applicable)
+
+* **5. Design System Integration**
+  * Component Usage Guidelines
+  * Layout Grid Structure
+  * Spacing Principles
+  * UI Pattern Consistency
+
+* **6. Accessibility Considerations**
+  * Keyboard Navigation Paths
+  * Screen Reader Experience
+  * Touch Target Guidelines
+  * Color Contrast Requirements
+  * Focus State Management
+
+* **7. Technical Implementation Notes**
+  * Frontend Component Mapping
+  * View State Management Approach
+  * Critical Rendering Considerations
+  * Performance Optimization Suggestions
+
+## TONE & CONSTRAINTS:
+* Maintain a clear, professional, inquisitive, and helpful tone.
+* Use precise terminology that bridges UX concepts with frontend implementation.
+* Focus on creating specifications that could be directly used for frontend development or visual design tools like v0.dev.
+* Balance flexibility (allowing for design creativity) with specificity (providing clear implementation guidance).
+* [Mention any major known constraints if you have them, e.g., Must use a specific design system, Must work on specific devices/browsers, Must meet WCAG 2.1 AA standards].
+
+## LET'S BEGIN:
+Please ask your first set of clarifying questions based on my PRD, focusing specifically on how requirements would translate into visual interfaces, layouts, and interaction patterns. Your questions should help bridge the gap between functional requirements and implementable frontend specifications. Let me know if your proposed starting point makes sense.

package/assets/prompts/product-development/README.md

@@ -0,0 +1,21 @@
+# Product Development Prompts
+
+Guided AI prompt templates for taking a product from idea to MVP. Use these sequentially.
+
+Source: [TechNomadCode/AI-Product-Development-Toolkit](https://github.com/TechNomadCode/AI-Product-Development-Toolkit)
+
+## Workflow Order
+
+1. `Guided-PRD-Creation.md` — Define your Product Requirements Document
+2. `Guided-UX-User-Flow.md` — Translate PRD into UX specifications
+3. `Guided-MVP-Concept.md` — Define focused MVP scope
+4. `Guided-MVP.md` — Detailed MVP development plan
+5. `Guided-Test-Plan.md` — Testing strategy
+6. `v0-design-prompt.md` — Generate v0.dev visual prompt from your specs
+
+## Usage with Claude Code
+
+Load each file into Claude Code at the relevant project phase:
+```
+Load @prompts/product-development/Guided-PRD-Creation.md and help me define my PRD for [product]
+```

package/assets/prompts/product-development/v0-design-prompt.md

@@ -0,0 +1,107 @@
+## PRIMARY OBJECTIVE:
+Generate visually striking, modern, and highly polished frontend components and page structures based on the defined scope. Prioritize aesthetics, creative layout, sophisticated styling, and smooth micro-interactions where specified. Structure the code with good separation of concerns to facilitate future development.
+
+---
+
+## MODULE 1: OVERALL THEME & MOOD
+*   **Describe the core feeling:** `[e.g., "Minimalist & Sophisticated", "Futuristic & Techy", "Playful & Organic", "Luxurious & Premium", "Clean & Trustworthy"]`
+*   **Visual Inspiration (Optional):** `[e.g., "linear.app dark gradients", "stripe.com whitespace", "brutalist web design elements"]`
+
+---
+
+## MODULE 2: LAYOUT & SPACING
+*   **Layout Approach:** `[e.g., "Asymmetrical grid", "Standard centered content within full-width sections", "Heavy use of negative space", "Overlapping elements", "Broken grid", "Sidebar navigation layout"]`
+*   **Section/Component Separation:** `[e.g., "Clear visual dividers", "Seamless transitions", "Use distinct background colors/textures"]`
+*   **Content Width:** `[e.g., "Mostly contained width (max-w-screen-xl)", "Some full-bleed elements", "Edge-to-edge content"]`
+*   **Spacing Scale (Whitespace):** `[e.g., "Generous whitespace (large padding/margins)", "Tight and compact", "Standard Tailwind spacing"]`
+
+---
+
+## MODULE 3: COLOR PALETTE
+*   **Background (Base):** `[e.g., "#FFFFFF", "#1A1A1A (Dark)", "#F8F8F8 (Off-white)"]`
+*   **Text (Base):** `[e.g., "#111827 (Near Black)", "#E5E7EB (Light Gray for dark mode)"]`
+*   **Primary Accent / Brand Color:** `[e.g., "#3B82F6 (Blue)", "#EC4899 (Pink)", "Electric Blue (#00FFFF)"]` (Used for primary CTAs, highlights)
+*   **Secondary Accent (Optional):** `[e.g., "#10B981 (Green)", "#F59E0B (Amber)"]` (Used for secondary buttons, tags, icons)
+*   **Gradient Usage (Optional):** `[e.g., "Subtle gradients on buttons", "Hero background gradient from #FF00FF to #00FFFF", "No gradients"]`
+*   *(Specify Hex/RGB/HSL codes for precision. Describe general usage if needed.)*
+
+---
+
+## MODULE 4: TYPOGRAPHY
+*   **Headline Font:** `[e.g., "Geist Sans (Default)", "Serif (e.g., Playfair Display)", "Monospace (e.g., JetBrains Mono)"]`
+    *   **Headline Style:** `[e.g., "Bold weight", "Large size", "Uppercase", "Letter spacing: wide"]`
+*   **Body Font:** `[e.g., "Geist Sans (Default)", "Clean Sans-Serif (e.g., Inter)"]`
+    *   **Body Style:** `[e.g., "Normal weight", "Readable size (text-base)", "Line height: relaxed"]`
+*   **Hierarchy:** `[e.g., "Strong visual hierarchy using size and weight", "Minimalist hierarchy"]`
+
+---
+
+## MODULE 5: IMAGERY & ICONS
+*   **Image Style:** Use placeholders (`/placeholder.svg?width={w}&height={h}`), but describe the intended style: `[e.g., "Abstract 3D renders", "Clean product screenshots in device mockups", "High-quality lifestyle photos", "Geometric patterns", "Gradients"]`
+*   **Icon Style (lucide-react):** `[e.g., "Standard stroke width", "Thin stroke width (adjust via props/CSS if possible)", "Filled style (if applicable icons exist)", "Consistent size (e.g., size={20})"]`
+
+---
+
+## MODULE 6: INTERACTIVITY & ANIMATION (Visual Focus)
+*   **Hover Effects:** `[e.g., "Subtle scale/brightness changes on cards/buttons", "Underline effects on links", "Color transitions"]`
+*   **Scroll Animations:** `[e.g., "Gentle fade-in/slide-up for sections", "Subtle parallax on background elements", "No scroll animations"]` (Apply where appropriate based on page structure)
+*   **Button Interactions:** `[e.g., "Clear visual feedback on click (scale down/color change)"]`
+*   **Loading States (Visual Only):** `[Optional: Describe visual placeholders if needed, e.g., "Skeleton loaders for cards/lists"]`
+*   **State Transitions:** `[Optional: Describe visual transitions between states if specified in UX, e.g., "Smooth fade between tabs"]`
+
+---
+
+## MODULE 7: FILE STRUCTURE & COMPONENT STRATEGY (Separation of Concerns)
+*   **Goal:** Structure the code for maintainability and easier future integration with logic/data.
+*   **Directory Structure:** Organize components logically within `components/`. Suggestion:
+    *   `components/layout/`: Shared layout components (e.g., AppLayout, SettingsLayout, Header, Footer, Sidebar).
+    *   `components/views/` or `components/pages/`: Components specific to a particular page/view defined in Module 9 (e.g., DashboardSummary, ProfileForm). These compose smaller common/UI components.
+    *   `components/ui/`: (Implicitly for shadcn components).
+    *   `components/common/`: Small, reusable visual elements shared across multiple views (e.g., CustomStyledButton, IconBadge, DataCard, UserAvatar).
+*   **Component Granularity:** Break down large page views (from Module 9) into smaller, focused presentational components. Example: A `ProfileForm` component might import common `Input` and `Button` components.
+*   **Client Components:** Add `'use client'` directive *only* where essential for visual interactivity (e.g., dropdowns, toggles, visual carousels, accordions, form interactions). Keep structural components (layouts, page containers) as Server Components where possible.
+*   **Props:** Define clear `interface` or `type` for component props (even with placeholder data) to establish component contracts.
+
+---
+
+## MODULE 8: COMPONENT STYLING NOTES (Optional Specifics)
+*   **Buttons (shadcn/ui):** `[e.g., "Sharp corners (no border-radius)", "Pill-shaped", "Gradient background", "Subtle shadow"]`
+*   **Cards (shadcn/ui):** `[e.g., "No border, distinct background color", "Thin border", "Heavy shadow", "Glassmorphism effect (background blur)"]`
+*   **Inputs (Placeholders):** `[e.g., "Minimalist underline style", "Standard bordered input"]`
+*   **Tables (Visual):** `[e.g., "Striped rows", "Hover effect on rows", "Minimal borders"]`
+*   **Modals (Visual):** `[e.g., "Specific width", "Overlay style"]`
+*   *(Add any other specific styling directions for base components based on UX Specs)*
+
+---
+
+## MODULE 9: REQUIRED PAGES/VIEWS (MVP Scope)
+*   **Instruction:** Generate the necessary page files (e.g., `app/dashboard/page.tsx`, `app/settings/profile/page.tsx`) and associated view-specific components (`components/views/` or `components/pages/`) based on the definitions below. These definitions are derived from the UX Specifications (Input 1) and scoped by the MVP Definition (Input 2). Apply the overall theme, layout, styling, and component strategy defined in other modules. Use shared layout components where specified. Use placeholder data/text/links (`#`, `Lorem Ipsum`).
+
+*   **Structure to use for each Page/View defined below:**
+    *   **Page/View Name:** `[Name of the page/view (Ref UX Spec Section)]`
+    *   **Intended Route/Path:** `[URL path for this page/view]`
+    *   **Primary Layout Component:** `[Name of shared layout component, e.g., <AppLayout> (Ref UX Spec Section)]` (Specify if applicable)
+    *   **Key Components/Sections within this page:**
+        *   `[Component/Section Name (Ref UX Spec X.Y)]`: `[Brief description of content/purpose and key styling notes from UX Spec]`
+        *   *(Repeat for all major components/sections on this page/view)*
+    *   **Specific Notes:** `[Any overriding styles, interactions, states, or critical notes specific to this page/view from the UX Spec]`
+
+---
+*(The filler prompt will generate entries following the structure above, replacing the placeholder below)*
+
+`[ <<< Entries for each required Page/View will be dynamically generated here by the filler prompt >>> ]`
+
+---
+
+## MODULE 10: TECHNICAL IMPLEMENTATION NOTES (For v0):
+*   Generate within a single `<CodeProject id="[product-name]-visual-design-mvp">`.
+*   Use **Next.js App Router** structure. Create page files (e.g., `app/dashboard/page.tsx`, `app/settings/profile/page.tsx`) corresponding to the routes defined in Module 9.
+*   Create shared layout components (e.g., `components/layout/AppLayout.tsx`) as specified in Module 9 and apply them in the respective `layout.tsx` or page files.
+*   Use `tsx` files, kebab-case filenames.
+*   Use **shadcn/ui** components as a base, style heavily via **Tailwind CSS** according to Modules 1-8 and specific notes in Module 9.
+*   Use **`lucide-react`** for icons, styled as per Module 5.
+*   Implement **responsive design** visually based on UX Specs or standard practices if unspecified.
+*   Ensure basic **accessibility** structure (semantic HTML).
+*   **Structure:** Follow the separation of concerns strategy outlined in Module 7 (directory structure, component granularity, `'use client'` placement, prop types).
+*   Use placeholder data (`Lorem Ipsum`) and placeholder external links (`#`). For **internal navigation** between pages defined in Module 9, use functional **Next.js `<Link>` components** with the correct `href` based on the defined routes. Avoid other functional logic (data fetching, state management, API calls).
+*   Use `import type` for type imports.

package/assets/templates/base-react/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="{{purpose}}" />
+    <title>{{brand}}</title>
+    <!-- Preset fonts: {{preset.name}} -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="{{googleFonts}}" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/assets/templates/base-react/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{brand-slug}}",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "gsap": "^3.12.5",
+    "lucide-react": "^1.17.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.3.0"
+  }
+}

package/assets/templates/base-react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/assets/templates/base-react/src/App.jsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+import Navbar from './sections/Navbar.jsx'
+import Hero from './sections/Hero.jsx'
+import Features from './sections/Features.jsx'
+import Philosophy from './sections/Philosophy.jsx'
+import Protocol from './sections/Protocol.jsx'
+import Pricing from './sections/Pricing.jsx'
+import Footer from './sections/Footer.jsx'
+
+gsap.registerPlugin(ScrollTrigger)
+
+export default function App() {
+  useEffect(() => {
+    // Refresh ScrollTrigger on font/image load
+    window.addEventListener('load', () => ScrollTrigger.refresh())
+    return () => window.removeEventListener('load', () => ScrollTrigger.refresh())
+  }, [])
+
+  return (
+    <div className="relative overflow-x-hidden">
+      <Navbar />
+      <Hero />
+      <Features />
+      <Philosophy />
+      <Protocol />
+      <Pricing />
+      <Footer />
+    </div>
+  )
+}

package/assets/templates/base-react/src/index.css

@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ─── Preset Design Tokens (injected by cinematic-web create) ─────────────── */
+:root {
+  --color-primary:    {{palette.primary}};
+  --color-accent:     {{palette.accent}};
+  --color-background: {{palette.background}};
+  --color-dark:       {{palette.dark}};
+
+  --font-heading: '{{typography.heading0}}', '{{typography.heading1}}', sans-serif;
+  --font-drama:   '{{typography.drama}}', Georgia, serif;
+  --font-data:    '{{typography.data}}', 'Courier New', monospace;
+}
+
+/* ─── Global Noise Overlay (SVG feTurbulence at 0.05 opacity) ─────────────── */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.05;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+}
+
+/* ─── Base Resets ─────────────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-background);
+  color: var(--color-dark);
+  font-family: var(--font-heading);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Magnetic Button Base ─────────────────────────────────────────────────── */
+.btn-magnetic {
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.btn-magnetic:hover {
+  transform: scale(1.03);
+}
+
+.btn-magnetic .btn-fill {
+  position: absolute;
+  inset: 0;
+  transform: translateY(101%);
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.btn-magnetic:hover .btn-fill {
+  transform: translateY(0);
+}
+
+/* ─── Interactive Lift ──────────────────────────────────────────────────────── */
+.interactive-lift {
+  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.interactive-lift:hover {
+  transform: translateY(-1px);
+}
+
+/* ─── Scrollbar Styling ─────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary);
+  border-radius: 3px;
+}

package/assets/templates/base-react/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)