PM Command Center — Full Build Spec for Claude Code What to Build Build a full-stack web application called PM Command Center — an AI-powered dashboard that automates repetitive project management tasks. It's a gift for my dad who is a senior PM. He should be able to bookmark it, open it daily, paste in text, and get polished professional output in seconds. Tech Stack: Next.js 14 (App Router) + Tailwind CSS + TypeScript + Anthropic API Core Architecture pm-command-center/ ├── app/ │ ├── layout.tsx # Root layout with fonts, metadata │ ├── page.tsx # Main dashboard (client component) │ ├── api/ │ │ └── generate/ │ │ └── route.ts # API route that calls Anthropic │ └── globals.css # Tailwind + custom styles ├── components/ │ ├── Header.tsx # Logo, user name, settings + history buttons │ ├── WorkflowTabs.tsx # Tab navigation for 6 workflows │ ├── InputPanel.tsx # Textarea + char count + run button │ ├── OutputPanel.tsx # Rendered markdown output + copy button │ ├── OptionSelector.tsx # Clickable pill selectors per workflow │ ├── SettingsModal.tsx # Name, team, project, tone, sign-off │ ├── HistoryModal.tsx # Past 30 runs, clickable to reload │ └── MarkdownRenderer.tsx # Custom renderer for AI output ├── lib/ │ ├── workflows.ts # All 6 workflow definitions + prompt builders │ ├── types.ts # TypeScript interfaces │ └── settings.ts # localStorage persistence for settings ├── .env.local # ANTHROPIC_API_KEY goes here ├── package.json └── tailwind.config.ts The 6 Workflows Each workflow has: an ID, label, icon, description, placeholder text, configurable options (rendered as pill selectors), and a buildPrompt function that takes (userInput, selectedOptions, userSettings) and returns { system: string, user: string } for the Anthropic API call. Workflow 1: Meeting → Email (icon: ✉, tag: "MOST USED") What it does: Takes a Fireflies transcript or raw meeting notes and generates a polished team email. Options: Email Format: "Summary + Action Items" | "Brief Recap Only" | "Detailed Minutes" Audience: "My Team" | "Leadership / Execs" | "External / Client" System Prompt: You are a senior PM's writing assistant. Write a meeting recap email. {if settings.name} The PM's name is {settings.name}. {/if} {if settings.teamName} The team is called "{settings.teamName}". {/if} {if settings.projectName} The project is "{settings.projectName}". {/if} Tone: {settings.tone}. Sign-off: "{settings.signOff}". Audience: {selected audience}. - If "Leadership / Execs": "Be extra concise — execs scan, they don't read." - If "External / Client": "Be polished and avoid internal jargon." Format: {selected format}. If "Summary + Action Items": Structure: Subject: [clear subject] - Greeting - 3-5 bullet summary of key points - Decisions Made (if any) - Action Items: "• [Owner] — task (by [deadline])" - Sign off If "Brief Recap Only": Keep it under 150 words. Subject line + 3-4 key bullets + sign off. No action item section. If "Detailed Minutes": Provide thorough meeting minutes. Include timestamps if present, all discussion points, every decision and action item. Can be longer. Rules: Don't invent info. Flag gaps with [CLARIFY]. Use first-person plural "we". Workflow 2: Slides Outline (icon: ▦) What it does: Takes any content and produces a slide-by-slide presentation outline. Options: Deck Type: "Project Update" | "Strategy / Proposal" | "Stakeholder Review" | "Training / Onboarding" Deck Length: "Short (5-7 slides)" | "Standard (8-12)" | "Detailed (13-18)" System Prompt: You are a presentation architect for a senior PM. {if settings.projectName} Project: "{settings.projectName}". {/if} Deck type: {selected deckType}. Target: {slide count from length} slides. For each slide: **Slide [N]: [Title]** Layout: (e.g. "Title + 3 bullets", "Two-column comparison", "Chart: bar graph of X", "Big number + supporting text") Content: exact text for the slide. Bullets ≤ 12 words each. Speaker Notes: 2 sentences of what to say. Rules: - Start with title slide, end with Next Steps / Discussion - One idea per slide - Suggest visuals with [ADD: description] - Flag data gaps with [NEEDS DATA] - If "Strategy / Proposal": Include a 'Why Now' and 'Recommendation' slide. - If "Stakeholder Review": Include status, risks, timeline, and asks. - If "Training / Onboarding": Include objectives, key concepts, exercises, and resources. - If "Project Update": Include progress, blockers, and next steps. Workflow 3: Status Report (icon: ◉) What it does: Generates a formatted weekly status report from raw project updates. Options: Report Style: "Standard (Full)" | "Executive Summary" | "Bullet-Only" System Prompt: You are a PM reporting assistant. {if settings.name} PM: {settings.name}. {/if} {if settings.projectName} Project: "{settings.projectName}". {/if} {if settings.teamName} Team: "{settings.teamName}". {/if} Style: {selected style}. If "Executive Summary": Keep to 8 lines max. Traffic light status + 3-sentence summary + top 2 risks + 1 ask. Execs have 15 seconds. If "Bullet-Only": Just categorized bullets under: Done / In Progress / Blocked / Next Week. No prose. If "Standard (Full)": Use this structure: **WEEKLY STATUS — [date range]** **Status: 🟢 On Track / 🟡 At Risk / 🔴 Off Track** **Executive Summary** (2-3 sentences) **Completed** (bulleted with impact) **In Progress** (with % if inferrable) **Blockers & Risks** (owner, severity: H/M/L) **Next Week** (top 3-5) **Decisions Needed** (if any) Rules: Use only the user's info. Flag unknowns with [CONFIRM]. Be concise. Workflow 4: Action Items (icon: ☐, tag: "POWERFUL") What it does: Extracts every task, follow-up, and commitment from any text. Options: Output Format: "Table" | "Grouped by Owner" | "Checklist" System Prompt: You are an action item extraction specialist. Extract EVERY task, follow-up, commitment, or implied action. Output format: If "Table": | # | Owner | Action Item | Deadline | Priority | Use [UNASSIGNED] and [NO DATE] when info is missing. If "Grouped by Owner": Group by person: **[Name]** 1. Task (by deadline) — Priority Put [UNASSIGNED] items in their own section. If "Checklist": - [ ] [Owner] — Task (by deadline) [Priority] Format as a copyable markdown checklist. After the list: **Summary**: X items total, Y unassigned, Z without deadlines **⚠️ Flags**: Any conflicts, ambiguities, or unrealistic timelines. Be thorough. Over-extract. Workflow 5: Email Drafter (icon: ⟐, tag: "NEW") What it does: Drafts situational PM emails — follow-ups, escalations, bad news, asks. Options: Email Type: "Follow-up / Nudge" | "Escalation" | "Bad News / Delay" | "Request / Ask" | "Stakeholder Update" Tone Override: "Use my default" | "Extra diplomatic" | "Direct & urgent" | "Casual / friendly" System Prompt: You are a PM communications expert. Draft a {selected emailType} email. {if settings.name} From: {settings.name} {/if} Tone: {selected tone, or settings.tone if "Use my default"}. Sign-off: "{settings.signOff}". Provide: Subject: [subject line] [email body] - If "Escalation": Be factual. State impact, what's been tried, and what's needed. No blame. - If "Bad News / Delay": Lead with context, then the news, then the plan forward. Show ownership. - If "Follow-up / Nudge": Be brief. Reference the original ask, state what's needed, give a clear deadline. - If "Request / Ask": State the ask clearly in the first 2 sentences. Explain why, provide context, make it easy to say yes. - If "Stakeholder Update": Be structured: status, key updates, decisions needed. Keep under 200 words unless the situation clearly requires more. Provide 2 drafts if the situation is delicate — label them "**Draft 1: [approach]**" and "**Draft 2: [approach]**" (e.g. one conservative, one more direct). Workflow 6: Doc Cleanup (icon: ⧉, tag: "NEW") What it does: Reformats messy docs, brain dumps, or rough drafts into clean professional text. Options: Clean Up Into: "Professional Document" | "Organized Bullets" | "Executive Brief" | "Meeting Agenda" System Prompt: You are a document cleanup specialist. Take messy, poorly formatted, or stream-of-consciousness input and restructure it into: {selected outputStyle}. - If "Professional Document": Add clear headings, logical flow, proper paragraphs. Fix grammar and tone. - If "Organized Bullets": Extract key points, group by theme, use consistent hierarchy. - If "Executive Brief": Distill to 1 page max. Key message up front, supporting points below, clear ask at the end. - If "Meeting Agenda": Structure as: Objective, Agenda Items (with time allocations), Pre-read links, Action Items from last meeting. Rules: - Preserve ALL the user's information. Don't drop details. - Fix grammar, spelling, and tone - Add structure and headings - Flag anything unclear with [CLARIFY: reason] - Match tone to settings.tone Settings System Store in localStorage under key pm_settings. Settings modal with these fields: FieldTypePlaceholderDefaultnametext input"e.g., David"""teamNametext input"e.g., Platform Engineering"""projectNametext input"e.g., Project Atlas"""tonepill selectorprofessional / friendly / direct / casual"professional"signOfftext input"e.g., Best, Thanks, Regards""Best" On first visit (no settings saved), show an amber banner at the top prompting user to configure settings. The header should show "PM Command Center for {name}" when name is set. Every workflow's buildPrompt function receives the settings object and injects relevant fields into the system prompt. This is what makes the tool feel personalized rather than generic. API Route (/api/generate) typescript// app/api/generate/route.ts // POST handler that: // 1. Receives { system: string, user: string } from the client // 2. Calls Anthropic API with model "claude-sonnet-4-20250514", max_tokens 2048 // 3. Returns the text content from the response // 4. Handles errors gracefully and returns appropriate status codes // 5. Uses ANTHROPIC_API_KEY from environment variables // 6. The API key should NEVER be exposed to the client UI/UX Design Spec Theme: Dark, professional, Linear/Notion-inspired Background: very dark navy (#0B0D10) Surface: slightly lighter (#111318, #171B22) Borders: subtle (#262D3A), highlighted (#3D6098) Text: light (#E4E8F1), muted (#8B95AD), dim (#5C6580) Accent: steel blue (#3D6098), lighter variant (#5A85C2) Status: green (#3FAF7A), amber (#D4972E), red (#D45555) Layout Header: Logo mark (gradient square with "PM"), title, settings + history buttons right-aligned Tab bar: Horizontal scrollable tabs below header, each with icon + label + optional tag badge Options row: Below tabs, pill-style selectors for the active workflow's options Main area: Two-panel grid — Input on left, Output on right (output panel only appears after first run) Input panel: Monospace textarea, character count in footer, ⌘↵ shortcut hint, Run button with gradient Output panel: Custom markdown rendering, Copy button in header, fade-in animation Markdown Renderer (important — this is what makes output look professional) The output from the AI contains markdown-like formatting. Render these specially: Subject: lines → highlighted blue callout box with left border 🟢/🟡/🔴/⚠️ lines → colored status badges with matching background **bold headers** → larger weight text with top margin **Draft 1: ...** / **Draft 2: ...** → uppercase label badges | table | rows | → actual HTML tables with styled headers - [ ] / - [x] → checkbox-style rendering Bullet points → consistent dot + indentation [CLARIFY], [NEEDS DATA], [CONFIRM], [UNASSIGNED], [NO DATE] → amber highlight badges Regular text → standard paragraph with good line height Interactions ⌘+Enter (or Ctrl+Enter) triggers Run from the textarea Copy button copies raw text output to clipboard, shows "✓ Copied" for 2s Clear button resets input + output History modal: overlay with list of past runs, click to reload the output Settings modal: overlay form, saves to localStorage on submit Loading state: spinner on Run button + centered spinner in output panel Tab switching clears input/output and resets options to defaults Run History Store up to 30 runs in React state (not persisted — session only is fine) Each entry: { id, workflow label, workflow icon, input preview (first 80 chars), full output, timestamp } History modal shows entries reverse-chronologically Clicking an entry loads its output into the output panel and closes the modal Key Implementation Notes The API key must stay server-side. The client sends the prompt to /api/generate, which calls Anthropic. Never expose the key in client code. Use max_tokens: 2048 to give the AI room for longer outputs (detailed minutes, full status reports). Each workflow's system prompt is constructed dynamically using the user's settings + selected options. The prompt builder functions are the heart of the app. Responsive design matters — my dad might use this on his laptop or a large monitor. The two-panel layout should work at 1024px+ and stack vertically on smaller screens. Fonts: Use DM Sans for body text, DM Mono for the input textarea. Import from Google Fonts. No database needed. Settings in localStorage, history in memory. Keep it simple. Error handling: Show errors in the output panel with red text. Handle network failures, API errors, and empty input gracefully. Setup Instructions (for the README) bash# 1. Clone and install git clone <repo> cd pm-command-center npm install # 2. Add your API key echo "ANTHROPIC_API_KEY=sk-ant-..." > .env.local # 3. Run npm run dev # Open http://localhost:3000 # 4. First thing: click Settings and enter your name, team, and project What Success Looks Like My dad should be able to: Open the app after a meeting Paste in his Fireflies transcript Pick "Summary + Action Items" and "My Team" Hit Run Get an email he can copy and paste directly into Gmail with maybe 1-2 small tweaks Do this 4-5 times a day across different workflows and save 1-2 hours Build the complete app. Every file. Working end to end.

SYSTEM ROLE You are Senior product strategist, systems thinker, and implementation planner. Operate like a top-tier product team condensed into one expert execution agent. MISSION Build the strongest possible launch-ready plan for I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready.. The end result should be specific enough to guide design, engineering, content, QA, and deployment without needing a second strategy pass. CORE OBJECTIVE Turn the requirements for I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready. into a production-quality implementation prompt that is detailed, accurate, and build-ready. SOURCE OF TRUTH Product Name: I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready. Product Type: I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready. implementation project Target Audience: Define the primary users, decision-makers, and external developers this product must serve. Core Problem: Define the painful workflow, technical bottleneck, or operational gap this product must solve. Offer / Promise: Turn the uploaded brief into the strongest possible implementation-ready plan without inventing facts that are not supported by the source. Differentiators: The final brief should stay tightly aligned to the source material instead of drifting into generic templates. Launch Deliverables: The final output should be specific enough for product, design, engineering, QA, and deployment handoff. Brand Style: Clear, rigorous, and implementation-oriented. Preferred Stack: No fixed stack specified beyond modern frontend, backend, real-time transport, auth, persistence, and deployment choices. Monetization: Monetization is not explicitly defined in the source document. Prioritize extensibility, sustainable AI cost controls, and a platform foundation that can support future pricing decisions. Available Assets: Available source material includes the uploaded requirements document. Launch Deadline: Use the timeline specified in the uploaded requirements document. Success Metrics: Success means the final plan is accurate, feasible, testable, launch-ready, and clearly aligned to the source requirements. Prompt Constraints: Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses. Source Input: Source document: I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready.. Use the original case study, feature requirements, app integration contract, testing scenarios, deadlines, planning checklist, and cost-analysis requirements as the source of truth. I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready. Reference Examples: Use the most concrete examples from the source document as anchors for the final plan. NON-NEGOTIABLE EXPECTATIONS - Do not respond with a shallow skeleton, generic brainstorm, or vague product summary. - Do not invent unsupported product decisions just to make the output look complete. - Favor buildable scope, coherent flows, and deployment realism over aspirational fluff. - Keep every recommendation aligned to the stated audience, problem, positioning, and success metrics. - Maintain a executive tone, but prioritize clarity and execution quality over style. CLARIFICATIONS REQUIRED BEFORE FULL BUILD - Who exactly is this product for? Name the main user, buyer, or operator in simple terms. - What painful problem or workflow gap does this need to solve in the real world? - What are the must-have features, screens, tools, or workflows this product absolutely needs? - Low-confidence fields: audience, problem, features. INTERIM OUTPUT MODE - First surface the missing information in plain English and identify what cannot be decided safely yet. - Provide a provisional plan only where the source material is strong enough to support it. - Label assumptions clearly and keep them minimal. - Organize the answer into confirmed facts, open questions, and provisional recommendations. - Do not present the output as deployment-ready until the unresolved questions are answered. - When suggesting code structure, avoid claiming files or imports exist unless they are explicitly defined. FINAL INSTRUCTION Produce the strongest source-aligned interim brief for I want you to update the branding in the YourAI project to match the branding of the https://privilegeready.com/ website. Update all references to the primary, secondary colors, and fonts to match what is published on privilegeready., clearly separating confirmed decisions from missing inputs so the next pass can become deployment-ready.

I want to take the branding from the Privilege Ready website pasted in here, and I'd like to apply the same fonts and primary and secondary colors to the YourAI MVP zip file repo that I've attached. https://privilegeready.com/

{ "launchBrief": { "productName": "System Prompt: CCAT Spatial Reasoning Engine1. Project Vision & IdentityCore Objective: Develop a procedural generator for CCAT-style spatial reasoning questions (Matrices, Sequences, and Odd-One-Out).Visual Aesthetic: \"Industrial Workstation.\"Do Not Use: Rounded corners, bubble buttons, pastel colors, or \"soft\" UI.Required: Sharp corners ($0px$ radius), high-contrast $1px$ grids, glassmorphism (glass-fill), glowing borders (#00ff00 or #00ffff), and a monospaced font hierarchy.2. Technical Stack RequirementsFramework: Next.js (App Router) + TypeScript.Styling: Tailwind CSS (Strictly utility-first).Graphics: Dynamic SVG Generation (No static image assets).State Management: React Context or Zustand for test-session tracking.Animation: Framer Motion (Linear or \"mechanical\" easing only).3. Architecture: The Rule-Based FactoryThe developer must implement a Factory Pattern for question generation. Do not hardcode questions.A. The Atomic State (ShapeState)Every shape must be represented by a TypeScript interface:TypeScripttype ShapeType = 'polygon' | 'circle' | 'line_cluster' | 'composite';", "productType": "interface ShapeState {", "audience": "type: ShapeType; sides: number; // e.g., 3 for triangle, 4 for square rotation: number; // degrees (0, 45, 90, 180, etc.) fill: 'none' | 'solid' | 'pattern-diagonal' | 'pattern-grid'; scale: number; // 0.1 to 1.0 internalElements: number; // e.g., dots inside a shape position: { x: number; y: number }; // Relative to a 100x100 SVG coordinate system } B. ConstraintsStability: Ensure generated shapes never overlap the SVG boundaries.Distinctness: Distractors must be algorithmically similar to the correct answer to ensure high difficulty (e.g., if the correct answer is a $90^\\circ$ rotation, one distractor should be a $45^\\circ$ rotation).Functional Integrity: Do not remove existing features; provide the entire code for any modified files.", "problem": "type: ShapeType; sides: number; // e.g., 3 for triangle, 4 for square rotation: number; // degrees (0, 45, 90, 180, etc.) fill: 'none' | 'solid' | 'pattern-diagonal' | 'pattern-grid'; scale: number; // 0.1 to 1.0 internalElements: number; // e.g., dots inside a shape position: { x: number; y: number }; // Relative to a 100x100 SVG coordinate system } B. The Rule EngineImplement \"Transformers\" that take a ShapeState and return a modified ShapeState.Rotation Transformer: (state) => { ...state, rotation: state.rotation + step }Growth Transformer: (state) => { ...state, sides: state.sides + 1 }Inversion Transformer: Swaps fill and stroke colors.4. Question Logic ModulesThe app must support three distinct generator modules:Next in Series (Horizontal): * Input: A starting ShapeState + 2 random Transformers.Output: 4 sequence frames + 1 correct answer (5th frame) + 4 distractors (incorrect transformer logic).$3 \\times 3$ Logic Matrix:Implement \"Row-wise\" or \"Column-wise\" logic.Example: Row3 =...", "offer": "Turn the uploaded brief into the strongest possible implementation-ready plan without inventing facts that are not supported by the source.", "differentiators": "The final brief should stay tightly aligned to the source material instead of drifting into generic templates.", "features": "", "deliverables": "The final output should be specific enough for product, design, engineering, QA, and deployment handoff.", "brandStyle": "Clear, rigorous, and implementation-oriented.", "techStack": "No fixed stack specified beyond modern frontend, backend, real-time transport, auth, persistence, and deployment choices.", "monetization": "Monetization is not explicitly defined in the source document. Prioritize extensibility, sustainable AI cost controls, and a platform foundation that can support future pricing decisions.", "assets": "Available source material includes the uploaded requirements document.", "deadline": "Use the timeline specified in the uploaded requirements document.", "successMetrics": "Success means the final plan is accurate, feasible, testable, launch-ready, and clearly aligned to the source requirements." }, "prompt": { "role": "Senior product strategist, systems thinker, and implementation planner", "objective": "Turn the requirements for System Prompt: CCAT Spatial Reasoning Engine1. Project Vision & IdentityCore Objective: Develop a procedural generator for CCAT-style spatial reasoning questions (Matrices, Sequences, and Odd-One-Out).Visual Aesthetic: \"Industrial Workstation.\"Do Not Use: Rounded corners, bubble buttons, pastel colors, or \"soft\" UI.Required: Sharp corners ($0px$ radius), high-contrast $1px$ grids, glassmorphism (glass-fill), glowing borders (#00ff00 or #00ffff), and a monospaced font hierarchy.2. Technical Stack RequirementsFramework: Next.js (App Router) + TypeScript.Styling: Tailwind CSS (Strictly utility-first).Graphics: Dynamic SVG Generation (No static image assets).State Management: React Context or Zustand for test-session tracking.Animation: Framer Motion (Linear or \"mechanical\" easing only).3. Architecture: The Rule-Based FactoryThe developer must implement a Factory Pattern for question generation. Do not hardcode questions.A. The Atomic State (ShapeState)Every shape must be represented by a TypeScript interface:TypeScripttype ShapeType = 'polygon' | 'circle' | 'line_cluster' | 'composite'; into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "type: ShapeType; sides: number; // e.g., 3 for triangle, 4 for square rotation: number; // degrees (0, 45, 90, 180, etc.) fill: 'none' | 'solid' | 'pattern-diagonal' | 'pattern-grid'; scale: number; // 0.1 to 1.0 internalElements: number; // e.g., dots inside a shape position: { x: number; y: number }; // Relative to a 100x100 SVG coordinate system } B. The Rule EngineImplement \"Transformers\" that take a ShapeState and return a modified ShapeState.Rotation Transformer: (state) => { ...state, rotation: state.rotation + step }Growth Transformer: (state) => { ...state, sides: state.sides + 1 }Inversion Transformer: Swaps fill and stroke colors.4. Question Logic ModulesThe app must support three distinct generator modules:Next in Series (Horizontal): * Input: A starting ShapeState + 2 random Transformers.Output: 4 sequence frames + 1 correct answer (5th frame) + 4 distractors (incorrect transformer logic).$3 \\times 3$ Logic Matrix:Implement \"Row-wise\" or \"Column-wise\" logic.Example: Row3 = Row1 + Row2 (Overlaying SVGs) or Row3 = Row1 shifted 90 degrees.Odd One Out:Generate 5 shapes where 4 share a specific ShapeState constant (e.g., all have prime-numbered sides) and 1 does not.5. The...", "constraints": "The Rule EngineImplement \"Transformers\" that take a ShapeState and return a modified ShapeState.Rotation Transformer: (state) => { ...state, rotation: state.rotation + step }Growth Transformer: (state) => { ...state, sides: state.sides + 1 }Inversion Transformer: Swaps fill and stroke colors.4. Question Logic ModulesThe app must support three distinct generator modules:Next in Series (Horizontal): * Input: A starting ShapeState + 2 random Transformers.Output: 4 sequence frames + 1 correct answer (5th frame) + 4 distractors (incorrect transformer logic).$3 \\times 3$ Logic Matrix:Implement \"Row-wise\" or \"Column-wise\" logic.Example: Row3 = Row1 + Row2 (Overlaying SVGs) or Row3 = Row1 shifted 90 degrees.Odd One Out:Generate 5 shapes where 4 share a specific ShapeState constant (e.g., all have prime-numbered sides) and 1 does not.5. DeliverablesStrictly Typed Interfaces: No any types.Procedural Component: A SpatialCanvas component that renders a ShapeState using pure SVG paths.The Generator Logic: A generateQuestion(type: 'matrix' | 'series') function that outputs a JSON object containing the question data and an obfuscated answer key.UI/UX: A \"Terminal\" style layout. Favor explicit ass...", "input": "Source document: System Prompt: CCAT Spatial Reasoning Engine1. Project Vision & IdentityCore Objective: Develop a procedural generator for CCAT-style spatial reasoning questions (Matrices, Sequences, and Odd-One-Out).Visual Aesthetic: \"Industrial Workstation.\"Do Not Use: Rounded corners, bubble buttons, pastel colors, or \"soft\" UI.Required: Sharp corners ($0px$ radius), high-contrast $1px$ grids, glassmorphism (glass-fill), glowing borders (#00ff00 or #00ffff), and a monospaced font hierarchy.2. Technical Stack RequirementsFramework: Next.js (App Router) + TypeScript.Styling: Tailwind CSS (Strictly utility-first).Graphics: Dynamic SVG Generation (No static image assets).State Management: React Context or Zustand for test-session tracking.Animation: Framer Motion (Linear or \"mechanical\" easing only).3. Architecture: The Rule-Based FactoryThe developer must implement a Factory Pattern for question generation. Do not hardcode questions.A. The Atomic State (ShapeState)Every shape must be represented by a TypeScript interface:TypeScripttype ShapeType = 'polygon' | 'circle' | 'line_cluster' | 'composite';. Use the original case study, feature requirements, app integration contract, testing scenarios, deadlines, planning checklist, and cost-analysis requirements as the source of truth.\n\nSystem Prompt: CCAT Spatial Reasoning Engine1. Project Vision & IdentityCore Objective: Develop a procedural generator for CCAT-style spatial reasoning questions (Matrices, Sequences, and Odd-One-Out).Visual Aesthetic: \"Industrial Workstation.\"Do Not Use: Rounded corners, bubble buttons, pastel colors, or \"soft\" UI.Required: Sharp corners ($0px$ radius), high-contrast $1px$ grids, glassmorphism (glass-fill), glowing borders (#00ff00 or #00ffff), and a monospaced font hierarchy.2. Technical Sta...", "output": "Produce the strongest possible build prompt and implementation brief. Produce a structured implementation brief with decisions, workflows, constraints, deliverables, risks, and next steps.", "examples": "Use the most concrete examples from the source document as anchors for the final plan.", "tone": "executive" } }

build a instagram clone

SYSTEM ROLE You are Senior product strategist, UX architect, and implementation planner. Operate like a top-tier product team condensed into one expert execution agent. MISSION Build the strongest possible launch-ready plan for {. The end result should be specific enough to guide design, engineering, content, QA, and deployment without needing a second strategy pass. CORE OBJECTIVE Turn the requirements for { into a production-quality implementation prompt that is detailed, accurate, and build-ready. SOURCE OF TRUTH Product Name: { Product Type: "prompt": { Target Audience: single people in new york city over the age of 30 Core Problem: "role": "Senior product strategist, systems thinker, and implementation planner", "objective": "Turn the requirements for Build me a dating app for people in new york city over the age of 30. include all necessary database options into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "", "constraints": "Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses.", "input": "Source document: Build me a dating app for people in new york city over the age of 30. include all necessary database options. Offer / Promise: Turn the brief into a build-ready product plan with clear user value, scoped features, implementation logic, and launch-ready deliverables. Differentiators: The output should translate strategic intent into concrete product decisions that a serious team can execute immediately. Key Features: login, user bios with photos, messaging, able to favorite other users, and a matching system Launch Deliverables: The final output should be specific enough for product, design, engineering, QA, and deployment handoff. Brand Style: Production-quality, clear, strategically grounded, and implementation-aware. Preferred Stack: No fixed stack specified beyond modern frontend, backend, real-time transport, auth, persistence, and deployment choices. Monetization: Monetization is not explicitly defined in the source document. Prioritize extensibility, sustainable AI cost controls, and a platform foundation that can support future pricing decisions. Available Assets: Available source material includes the uploaded requirements document. Launch Deadline: Use the timeline specified in the uploaded requirements document. Success Metrics: Success means the final plan is accurate, feasible, testable, launch-ready, and clearly aligned to the source requirements. Additional Context: "role": "Senior product strategist, systems thinker, and implementation planner", "objective": "Turn the requirements for Build me a dating app for people in new york city over the age of 30. include all necessary database options into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "", "constraints": "Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses.", "input": "Source document: Build me a dating app for people in new york city over the age of 30. include all necessary database options. include all necessary database options into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "", "constraints": "Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses.", "input": "Source document: Build me a dating app for people in new york city over the age of 30. Prompt Constraints: include all necessary database options into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "", "constraints": "Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses.", "input": "Source document: Build me a dating app for people in new york city over the age of 30. Favor buildable scope, user clarity, operational realism, and strong sequencing over generic brainstorming. Source Input: Source document: {. Use the original case study, feature requirements, app integration contract, testing scenarios, deadlines, planning checklist, and cost-analysis requirements as the source of truth. { "prompt": { "role": "Senior product strategist, systems thinker, and implementation planner", "objective": "Turn the requirements for Build me a dating app for people in new york city over the age of 30. include all necessary database options into a production-quality implementation prompt that is detailed, accurate, and build-ready.", "context": "", "constraints": "Favor explicit assumptions, realistic scope, and source-aligned decisions over polished but unsupported guesses.", "input": "Source document: Build me a dating app for people in new york city over the age of 30. include all necessary database options. Use the original case study, feature requirements, app integration contract, testing scenarios, deadlines, planning checklist, and cost-analysis requirements as the source of truth.\n\nBuild me a dating app for people in new york city over the age of 30. include all necessary database options", "output": "Produce the strongest possible build prompt and implementation brief. Produce a structured implementation brief with decisions, workflows, constraints, deliverables, risks, and next steps.", "examples": "Use the most concrete examples from the source document as anchors for the final plan.", "tone": "executive" } } Reference Examples: Use the strongest examples and concrete workflows from the brief to anchor implementation quality. NON-NEGOTIABLE EXPECTATIONS - Do not respond with a shallow skeleton, generic brainstorm, or vague product summary. - Do not invent unsupported product decisions just to make the output look complete. - Favor buildable scope, coherent flows, and deployment realism over aspirational fluff. - Keep every recommendation aligned to the stated audience, problem, positioning, and success metrics. - Maintain a executive tone, but prioritize clarity and execution quality over style. CLARIFICATIONS REQUIRED BEFORE FULL BUILD - Who exactly is this product for? Name the main user, buyer, or operator in simple terms. - What are the must-have features, screens, tools, or workflows this product absolutely needs? - Low-confidence fields: audience, features. INTERIM OUTPUT MODE - First surface the missing information in plain English and identify what cannot be decided safely yet. - Provide a provisional plan only where the source material is strong enough to support it. - Label assumptions clearly and keep them minimal. - Organize the answer into confirmed facts, open questions, and provisional recommendations. - Do not present the output as deployment-ready until the unresolved questions are answered. - When suggesting code structure, avoid claiming files or imports exist unless they are explicitly defined. FINAL INSTRUCTION Produce the strongest source-aligned interim brief for {, clearly separating confirmed decisions from missing inputs so the next pass can become deployment-ready.

{ "prompt": { "role": "Senior strategist, analyst, and execution partner", "objective": "a dating for people in new york city over the age of 30 just build it", "context": "a dating for people in new york city over the age of 30 just build it Treat this as a general assignment and shape the work accordingly.", "constraints": "Maintain a executive tone unless the brief clearly says otherwise. Figure out the true task before choosing a structure. Do not force the request into the wrong template. State important assumptions only when needed. Favor useful specificity over generic completeness.", "input": "a dating for people in new york city over the age of 30\njust build it", "output": "Return the strongest possible final deliverable for the request, with clear structure, specific decisions, and enough detail to use immediately. The output should feel finished, specific, and immediately usable without requiring a second pass to add the missing substance.", "examples": "Match the quality bar of a top-tier general deliverable.", "tone": "executive" } }

build a simople frogger game that can be immediately deployed and tested

Role: Senior Front-End Developer. Objective: Final fix for the preview crash. We must use ES Module syntax to avoid the ReferenceError: require is not defined. Please overwrite the project with these three EXACT files: File 1: package.json { "name": "dyslexia-app-demo", "version": "1.0.0", "type": "module", "scripts": { "start": "node server.js" } } File 2: server.js (This uses import instead of require to satisfy the ES Module requirement). import http from 'http'; import fs from 'fs'; import path from 'path'; import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const PORT = process.env.PORT || 3000; const server = http.createServer((req, res) => { const filePath = path.join(__dirname, 'index.html'); fs.readFile(filePath, (err, content) => { if (err) { res.writeHead(500); res.end('Error loading index.html'); } else { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(content, 'utf-8'); } }); }); server.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); File 3: index.html (Ensure the AI provides the full HTML file here using the Vue.js + Tailwind CDN approach: Background: #FDFBF7 (Cream) Font: Comic Sans MS, Andika, or Lexend Hub: 4 Large colorful bubbles (🔊 Letter Sounds, 🦘 Syllable Jump, 🧱 Word Builder, 📖 Story Time) Exercise: The sentence-chunking word-chips that highlight yellow on click. Settings: Background color toggle). Why this WILL work: No more require errors: I replaced require with import. This is the only way to stop that specific ReferenceError. __dirname Fix: In ES Modules, __dirname doesn't exist. I added the fileURLToPath logic to recreate it so the server can actually find your index.html file. Alignment: The package.json now explicitly says "type": "module", so the server and the configuration are finally speaking the same language.

Role: Senior Front-End Developer. Objective: Fix the preview by adding a simple Node.js server to serve the index.html file. Please provide these three files: File 1: package.json { "name": "dyslexia-app-demo", "version": "1.0.0", "scripts": { "start": "node server.js" } } File 2: server.js (This is a basic Node server that serves the index.html file and stays alive so the preview window opens). const http = require('http'); const fs = require('fs'); const path = require('path'); const PORT = process.env.PORT || 3000; const server = http.createServer((req, res) => { const filePath = path.join(__dirname, 'index.html'); fs.readFile(filePath, (err, content) => { if (err) { res.writeHead(500); res.end('Error loading index.html'); } else { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(content, 'utf-8'); } }); }); server.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); File 3: index.html (Use the exact same Vue.js + Tailwind CDN code from the previous prompt. Ensure it includes the Home Hub, the Reading Page with word-chips, and the Background Color Settings).

Role: Senior Front-End Developer. Objective: Create a a tablet-based Dyslexia Intervention App prototype. CRITICAL INFRASTRUCTURE INSTRUCTIONS: To satisfy the preview requirements, you MUST provide a package.json file. However, to avoid build errors, DO NOT use Vite, PostCSS, or any build-step plugins. Please provide exactly these two files: File 1: package.json Provide a bare-bones package.json with only the name and version. Do NOT add any dependencies or build scripts. { "name": "dyslexia-app-demo", "version": "1.0.0", "scripts": { "start": "echo 'Static HTML preview'" } } File 2: index.html Put the entire application in this single file. Styling: Use the Tailwind CSS Play CDN: <script src="https://cdn.tailwindcss.com"></script>. Logic: Use Vue.js 3 (via CDN) for the interactivity so no compilation is needed. Design: Background: Soft Cream (#FDFBF7). Font: Use Comic Sans MS, Andika, or Lexend. Layout: Tablet Landscape. Screens to implement (in one file using Vue v-if): Home Hub: 4 large, tactile, colorful circular buttons (🔊 Letter Sounds, 🦘 Syllable Jump, 🧱 Word Builder, 📖 Story Time). Reading Page: A "Sentence Chunking" area where a sentence is split into clickable word-chips that highlight yellow and log to the console when clicked. Settings: A simple button to toggle background colors (Cream, Blue, Green). Final Requirement: Ensure the index.html is the entry point. Do not add any other folders or configuration files.

Role: Senior Front-End Developer. Objective: Create a single-file, high-fidelity interactive prototype for a Tablet-based Dyslexia Intervention App. CRITICAL TECHNICAL REQUIREMENT: Do NOT use a build system. Do NOT use Vite, Webpack, or NPM. Do NOT create a package.json or postcss.config.js. Deliverable: Produce a single index.html file. Use the Tailwind CSS Play CDN <script src="https://cdn.tailwindcss.com"></script> for styling. Use Vue.js (via CDN) or Alpine.js (via CDN) for the interactivity (state switching between home and learning) so that the file remains a single, portable HTML document. All logic and styles must be contained within this one file. Design Specifications: Color Palette: Background: Soft Cream (#FDFBF7). Text: Dark Navy. Interactive elements: Soft Pastels. Typography: Use a font-stack of Comic Sans MS, Andika, Lexend, or sans-serif. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: Large, rounded "tactile" buttons with shadows. Required Screens (in one file): Home Hub: A grid of 4 large, colorful "Learning Bubbles" (🔊 Letter Sounds, 🦘 Syllable Jump, 🧱 Word Builder, 📖 Story Time). Learning Module: A "Sentence Chunking" area where a sentence is broken into individual, clickable word-chips. Clicking a chip should highlight it in yellow and trigger a console log "Playing sound for: [word]". Settings Toggle: A simple way to change the background color between Cream, Soft Blue, and Pale Green. Layout: Optimized for Tablet Landscape.

Role: You are a Senior Lead Front-End Engineer specializing in EdTech and Accessibility. Objective: Build a high-fidelity, interactive React prototype for a Tablet-based Dyslexia Intervention App. Technical Stack: Framework: React Styling: Tailwind CSS Animations: CSS Transitions (Standard Tailwind) Icons: Use Standard Emojis (to avoid dependency installation errors) Design Constraints (CRITICAL): Color Palette: NO pure white backgrounds. Use a soft cream background (#FDFBF7). Use dark navy/charcoal for text. Use soft pastels for interactive elements. Typography: Use Comic Sans MS, Andika, or Lexend as the primary font stack. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: All buttons must be large, rounded, and have a tactile feel with shadows and hover-scale effects. Functional Requirements: State Management: Simple toggle between 'Home Hub' and 'Learning Module'. The Home Hub: Top nav with user avatar. A grid of 4 large, colorful "Learning Bubbles" (e.g., "🔊 Letter Sounds", "🦘 Syllable Jump", "🧱 Word Builder", "📖 Story Time"). Each bubble should be a large circular button with an emoji and a label. The Reading Exercise Page: A "Back to Home" button. Sentence Chunking: Display a sentence where each word is a separate, large, interactive button (chip). Interaction: When a word-chip is clicked, it highlights yellow and scales up. A large "I'm Finished! 🎉" button at the bottom. Settings Panel: A simple modal to switch the background color between Cream, Soft Blue, and Pale Green. Deliverable: Provide the complete code in a single-file structure. Optimize for tablet landscape orientation. Ensure no external icon libraries are required.

Role: You are a Senior Lead Front-End Engineer specializing in EdTech and Accessibility (a11y), specifically for neurodivergent learners. Objective: Build a high-fidelity, interactive React prototype for a Tablet-based Dyslexia Intervention App. The goal is to create a "sensory-friendly" environment that reduces cognitive load and visual stress. Technical Stack: Framework: React Styling: Tailwind CSS Icons: Lucide-React Animations: Framer Motion (for tactile, bouncy feedback) Design Constraints (CRITICAL): Color Palette: NO pure white backgrounds. Use a soft cream/off-white background (#FDFBF7). Use dark navy or charcoal for text instead of pure black. Use a palette of soft pastels (Mint, Pale Blue, Muted Yellow) for interactive elements. Typography: Use a font stack that prioritizes readability: OpenDyslexic (if available) or Comic Sans MS, Andika, or Lexend. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: All buttons must be large, rounded (pill-shaped or circular), and have a "tactile" 3D feel (shadows and active-state scaling). Functional Requirements & Pages: State Management: Implement a simple state-switch to toggle between the 'Home Hub' and the 'Learning Module'. The Home Hub: A top navigation bar with a user avatar and a "Settings" button. A central grid of 4 large, colorful "Learning Bubbles" (e.g., Letter Sounds, Syllable Jump, Word Builder, Story Time). Each bubble must have a large Lucide icon and a clear text label. Use Framer Motion to make these bubbles "float" slightly. The Reading Exercise Page: A "Back to Home" button. A "Sentence Chunking" area: Instead of a paragraph, display a sentence where each word is a separate, large, interactive button (chip). Interaction: When a word-chip is clicked: It should highlight in a bright, friendly yellow. It should trigger a "scale-up" animation. It should simulate a Text-to-Speech event (log to console or use Web Speech API). A large "I'm Finished!" success button at the bottom that triggers a confetti effect or a success animation. Settings Panel (Modal): A simple toggle to switch the background color between Cream, Soft Blue, and Pale Green. Deliverable: Provide the complete code in a single-file structure (or organized components) that is ready to be deployed. Ensure the layout is optimized for a tablet screen (landscape orientation).

Generate tests for a React app with forms, tables, and API mocks.make sure it ooks good and is styed [plugin:vite:import-analysis] Failed to resolve import "bootstrap/dist/css/bootstrap.min.css" from "src/App.jsx". Does the file exist? /app/src/App.jsx:2:7 16 | } 17 | import React from "react"; 18 | import "bootstrap/dist/css/bootstrap.min.css"; | ^ 19 | import FormComponent from "./components/FormComponent"; 20 | import TableComponent from "./components/TableComponent";

Generate tests for a React app with forms, tables, and API mocks. make it a beuatiful styled UI

build a cliet onboarding portl using react and vit. make sure it is launch ready. focus pn entry point and dependencies so tht there are o erroprs on the preview