Vibe Code Starter Pack

I want to build an app. Act as a senior developer and a patient mentor helping me plan it.

My app idea: [APP IDEA]
Who it's for: [TARGET USER]
The main problem it solves: [PROBLEM IT SOLVES]
My coding experience: [SKILL LEVEL]
The AI tool I'm building with: [AI TOOL]
Where I want it to run: [WEB APP / MOBILE / DESKTOP / "NOT SURE"]
Budget for hosting and services: [BUDGET FOR HOSTING AND SERVICES]

Please give me:
1. A one-paragraph summary of the app in plain English.
2. The MVP (minimum viable product): the smallest version worth building, with a list of 3-6 must-have features. Put "nice to have later" features in a separate list.
3. A recommended tech stack that's beginner-friendly and free or cheap to start. Explain each choice in one sentence. If [TECH STACK] is filled in, use it unless there's a strong reason not to: [TECH STACK]
4. The main screens or pages, with one line describing each.
5. The data the app needs to store (e.g. users, posts, scores), described simply.
6. A numbered build order of small steps, where each step ends in something I can see working.
7. The 3 biggest risks or tricky parts for a beginner, and how to handle each one.

Keep the language simple and don't write any code yet. At the end, ask me up to 3 questions that would most improve the plan.

Help me set up a brand new project from scratch. Assume I'm a [SKILL LEVEL] and explain each step briefly.

Project: [APP IDEA]
Tech stack: [TECH STACK]
My computer: [WINDOWS / MAC / LINUX]
Code editor / AI tool: [CODE EDITOR / AI TOOL]
Already installed: [ALREADY INSTALLED]

Please:
1. List anything I need to install first, with how to check whether it's already installed (the exact command to run and what the output should look like).
2. Give me the exact terminal commands to create the project, one per code block, in order. Say which folder I should be in before each command.
3. Show the folder structure I should end up with, and explain what the important files and folders do in one line each.
4. Tell me how to start the app locally and what I should see in the browser when it works.
5. Set up a .gitignore and a .env.example file if this stack needs them, and explain what environment variables are in one sentence.
6. Set up Git and make a first commit, with the exact commands.
7. List the 3 most common setup errors for this stack and how to fix each one.

Don't add any features yet. I just want a clean, running starting point.

Create a project brief file that I'll give to my AI coding assistant at the start of every session. It should be short enough to paste in, but complete enough that a new AI chat understands my project immediately.

App: [APP IDEA]
Target user: [TARGET USER]
Tech stack: [TECH STACK]
Current progress: [WHAT'S BUILT SO FAR]
Next goals: [NEXT 1-3 FEATURES]
Style and design preferences: [STYLE AND DESIGN PREFERENCES]
Things I DON'T want: [THINGS I DON'T WANT]

Format it as Markdown with these sections:
- Project overview (2-3 sentences)
- Tech stack and versions
- Folder structure (key folders only)
- Coding rules (naming, file organization, comment style, keep components small, etc.)
- Design rules (colors, fonts, spacing, tone)
- Rules for the AI: always explain changes briefly, ask before adding new dependencies, don't delete existing features, change only the files needed, and show which files were changed
- Current status and next steps

I'll save this as [FILE NAME].

I want to add a new feature to my existing app. Please plan before writing code.

App: [APP IDEA]
Tech stack: [TECH STACK]
Feature to add: [FEATURE]
How it should work from the user's point of view: [DESCRIBE STEP BY STEP]
Relevant files: [FILE NAMES, OR "PLEASE FIND THEM"]

Step 1, plan only:
- Explain in plain English how you'll build this.
- List every file you'll create or change, and why.
- Mention any new packages needed (and ask me before adding them).
- Point out anything that might break existing features.

Wait for me to say "go" before writing code.

Step 2, after I say go:
- Write the code in small, clearly labeled chunks, one file at a time.
- Keep my existing code style and don't rewrite unrelated code.
- Add short comments on any non-obvious parts.
- Finish with a checklist of how I can test the feature by hand, including one edge case to try.

Build this screen for my app.

App: [APP IDEA]
Tech stack: [TECH STACK]
Screen name: [SCREEN NAME]
Purpose of the screen: [WHAT THE USER DOES HERE]

What's on the screen, from top to bottom:
[LIST THE PARTS]

Style: [STYLE]

Requirements:
- Fully responsive: looks good on phone, tablet, and desktop. Tell me how the layout changes on mobile.
- Use placeholder or fake data for now, kept in one clearly marked spot so I can swap in real data later.
- Split it into small reusable components if the stack supports that.
- Include hover and focus states on buttons and links.
- Use semantic HTML and basic accessibility (alt text, labels, good contrast).
- Tell me exactly which file(s) to put the code in.

After the code, give me 3 quick ideas to make this screen feel more polished.

Create a complete, high-converting landing page.

Product: [PRODUCT NAME]. [ONE-LINE DESCRIPTION]
Target customer: [TARGET USER]
Their main pain point: [PROBLEM]
Top 3 benefits: [BENEFIT 1], [BENEFIT 2], [BENEFIT 3]
Main call to action: [MAIN CALL TO ACTION]
Brand vibe: [BRAND VIBE]
Tech stack: [TECH STACK]

Sections, in order:
1. Hero: a punchy headline (give me 3 options), a subheadline, the CTA button, and a spot for a product image or demo.
2. Problem: show I understand the customer's frustration.
3. Solution / How it works: 3 simple steps with icons.
4. Features and benefits: 3-6 cards that focus on outcomes, not tech jargon.
5. Social proof: placeholder testimonials or stats (clearly marked as placeholders).
6. Pricing or offer (if relevant): [PRICING DETAILS]
7. FAQ: 5 questions that answer real objections.
8. Final CTA section and a simple footer.

Requirements:
- Write all the copy in a [TONE] voice. No lorem ipsum.
- Mobile-first and responsive, with fast-loading lightweight code.
- Make the CTA button work as: [WHAT THE BUTTON DOES].
- Include SEO basics: a page title, meta description, and Open Graph tags for social sharing.

I've attached an image of a UI design. Recreate it as working code.

Tech stack: [TECH STACK]
What this screen is for: [PURPOSE]
Changes from the image: [CHANGES FROM THE IMAGE]

Please:
1. First, describe what you see in the image: the layout, sections, colors, fonts, and spacing. That way I can confirm you understood it correctly.
2. Then build it as closely as you can, splitting it into sensible components.
3. Make it responsive. The image may only show desktop, so make sensible choices for mobile and explain them.
4. Use real-looking placeholder text and images (e.g. from placehold.co).
5. List anything you couldn't tell from the image and the guesses you made.

Don't copy logos, trademarks, or copyrighted text from the image. Use placeholders instead.

My app's layout breaks on mobile. Help me make it fully responsive.

Tech stack: [TECH STACK]
The file(s) with the problem: [FILE NAME]
What goes wrong on mobile: [WHAT GOES WRONG ON MOBILE]
Screen sizes I care about: [SCREEN SIZES I CARE ABOUT]

[PASTE THE CODE OR TAG THE FILES]

Please:
1. Explain in plain English WHY it breaks (e.g. fixed widths, missing wrap, wrong units).
2. Fix it with a mobile-first approach, changing only what's needed.
3. Add a mobile navigation pattern if the menu doesn't fit (e.g. a hamburger menu that opens and closes).
4. Make sure tap targets are at least 44px and text is readable without zooming.
5. Check for the usual causes of sideways scrolling and fix any you find.
6. Tell me how to test it using my browser's device toolbar.

Add user authentication to my app. Prioritize security and simplicity. I'm a [SKILL LEVEL].

App: [APP IDEA]
Tech stack: [TECH STACK]
Auth provider: [AUTH PROVIDER]
Login methods I want: [LOGIN METHODS I WANT]
After login, users should go to: [PAGE]

Please:
1. If I haven't chosen a provider, recommend one for my stack in 2-3 sentences. Use an established auth service instead of a hand-made password system.
2. Walk me through setting up the provider's dashboard step by step (what to click, which keys to copy).
3. Show me how to store the keys safely in a .env file. Tell me which keys are safe in the browser and which must stay secret.
4. Build these pages and components: sign up, log in, log out button, forgot password, and a page that only shows when logged in.
5. Show friendly error messages (wrong password, email already used, etc.).
6. Show the logged-in user's name or email in the header.
7. Give me a test checklist: sign up, log out, log back in, try to visit a protected page while logged out.

My app has login working. Now help me make sure each user's data is protected.

Tech stack: [TECH STACK]
Auth provider: [AUTH PROVIDER]
Database: [DATABASE]
Data that should be private: [DATA THAT SHOULD BE PRIVATE]
Data that should be public: [DATA THAT SHOULD BE PUBLIC]
Pages that need login: [LIST PAGES]

Please:
1. Explain the difference between hiding something in the UI and actually protecting it on the server/database, in plain English.
2. Add route protection so logged-out users are redirected to login from: [PAGES].
3. Set up database security rules (e.g. Row Level Security in Supabase, or Firebase Security Rules) so users can only read and write their own rows. Give me the exact rules and explain each one.
4. Check my API routes / server functions and make sure each one checks who the user is before doing anything.
5. Give me a simple way to test it: log in as two different test users and confirm neither can see the other's data.
6. List any other security gaps you notice in the code I've shared.

[PASTE OR TAG RELEVANT FILES]

My login isn't working. Help me find and fix the problem step by step.

Tech stack: [TECH STACK]
Auth provider: [AUTH PROVIDER]
What I expected: [EXPECTED BEHAVIOR]
What actually happens: [ACTUAL BEHAVIOR]
Error message (browser console, terminal, or screen): [ERROR MESSAGE]
Works locally but not in production? [YES / NO / HAVEN'T DEPLOYED]

[PASTE OR TAG THE AUTH-RELATED FILES]

Please:
1. List the most likely causes for these symptoms with this provider, ranked by likelihood.
2. For each cause, tell me exactly what to check (which setting, file, or dashboard field) and what "correct" looks like.
3. Pay special attention to: redirect / callback URLs, environment variables, cookie/session settings, and the difference between localhost and the live URL.
4. Once we find the cause, give me the fix with a clear explanation.
5. Tell me how to stop this from happening again when I deploy.

Help me design the database for my app. Explain it simply, because I'm a [SKILL LEVEL].

App: [APP IDEA]
Database: [DATABASE]
What users can do: [WHAT USERS CAN DO]
Things the app needs to remember: [THINGS THE APP NEEDS TO REMEMBER]

Please:
1. If I haven't chosen a database, recommend one for my use case and explain why in 2 sentences.
2. List each table (or collection) with its fields, data types, and a one-line explanation of each field.
3. Explain how the tables connect (e.g. "one user has many projects") and draw a simple text diagram.
4. Point out which fields need to be required, unique, or indexed, and why.
5. Give me the exact code or SQL to create it all.
6. Add a few rows of realistic sample data so I can test with it.
7. Point out one or two design mistakes beginners usually make for this kind of app, and how this design avoids them.

Connect this part of my app to my real database so users can create, read, update, and delete data (CRUD).

Tech stack: [TECH STACK]
Database: [DATABASE]
The data: [TABLE / COLLECTION NAME] with fields [FIELDS]
The screen it's for: [SCREEN / FILE NAME]
Currently using: [CURRENTLY USING]

[PASTE OR TAG THE RELEVANT FILES]

Please:
1. Set up the database connection (if it isn't already), keeping keys in environment variables.
2. Write clear functions for: create, list all (for the current user), get one, update, and delete.
3. Wire them into my UI, replacing the fake data.
4. Add loading states (a spinner or skeleton), empty states ("No items yet - add your first one!"), and error messages.
5. Make the UI update straight away after adding, editing, or deleting, without needing a page refresh.
6. Ask "Are you sure?" before deleting.
7. Validate input before saving (required fields, max length) and show friendly messages.
8. Give me a quick test checklist.

I want my app to remember data between visits, without setting up a server or database.

App: [APP IDEA]
Tech stack: [TECH STACK]
What to save: [WHAT TO SAVE]
When to save: [WHEN TO SAVE]

Please:
1. Explain localStorage (and IndexedDB, if my data is large) in plain English, including its limits: it's per-browser, users can clear it, and it isn't secure for secrets.
2. Write a small, reusable save/load helper that handles JSON, missing data, and corrupted data without crashing.
3. Connect it to my app so the data loads on startup and saves automatically.
4. Add a "Reset / Clear data" button.
5. Add a version number to the saved data, so that if I change the structure later, old saves don't break the app.
6. Optional: add export/import of the save as a file, so users can back up their data.

Add search, filtering, and sorting to a list in my app.

Tech stack: [TECH STACK]
Database: [DATABASE OR "DATA IS STORED IN THE BROWSER"]
The list shows: [ITEMS] with fields [FIELDS]
Search should match: [SEARCH SHOULD MATCH]
Filters I want: [FILTERS I WANT]
Sort options: [SORT OPTIONS]
Roughly how many items: [ROUGHLY HOW MANY ITEMS]

[PASTE OR TAG THE LIST COMPONENT]

Please:
1. Recommend whether to filter in the browser or in the database, based on the number of items, and explain why.
2. Build the search bar, filters, and sort dropdown with a clean, mobile-friendly layout.
3. Debounce the search so it doesn't run on every single keystroke.
4. Keep the filters in the URL (e.g. ?q=pasta&sort=new) so results can be shared and survive a refresh.
5. Show a "No results" message with a "Clear filters" button.
6. Add pagination or "Load more" if there could be many items.

I'm getting an error and need help fixing it. Please explain things simply, because I'm a [SKILL LEVEL].

Tech stack: [TECH STACK]
What I was trying to do: [ACTION]
The full error message (copied exactly):
[ERROR MESSAGE]

Where it appears: [TERMINAL / BROWSER CONSOLE / ON THE PAGE / DEPLOY LOGS]
What I changed right before it started: [RECENT CHANGES, OR "NOT SURE"]
Relevant code:
[PASTE CODE OR TAG FILES]

Please:
1. Explain what this error means in plain English (1-3 sentences).
2. Tell me the most likely cause in MY code, pointing to the exact file and line.
3. Give me the fix, showing just the code that changes, with before/after.
4. If you're not sure, list the top 3 possible causes and how to check each one, instead of guessing.
5. Tell me how to confirm it's fixed.
6. Give me one tip to avoid this kind of error in the future.

Don't rewrite unrelated parts of my code.

My app doesn't show an error, but it's not behaving correctly. Help me debug it methodically.

Tech stack: [TECH STACK]
Feature with the problem: [FEATURE]
Steps to reproduce:
1. [STEP]
2. [STEP]
3. [STEP]
What I expected: [EXPECTED]
What actually happens: [ACTUAL]
Does it happen every time? [ALWAYS / SOMETIMES / ONLY AFTER X]

[PASTE OR TAG THE RELEVANT FILES]

Please:
1. Walk through how the code SHOULD flow for this feature, step by step, and point out where it likely goes wrong.
2. Add temporary console.log (or print) statements at the key points so I can see what's happening, and tell me what each log should show if things are working.
3. Once I share the log output, help me narrow it down to the exact cause.
4. Check for common culprits: state not updating, async code not awaited, wrong variable, stale data, event handlers not attached, and off-by-one errors.
5. Give me the fix and remind me to remove the debug logs afterwards.

My project was working, but after several AI-made changes, things are broken and I'm going in circles. Help me recover calmly.

Tech stack: [TECH STACK]
What was working before: [LIST]
What's broken now: [LIST + ERROR MESSAGES]
Do I use Git? [YES / NO]
Recent changes I asked for: [SUMMARY]

Please:
1. If I use Git, give me the exact commands to see what changed (git status, git diff) and how to safely go back to the last working commit WITHOUT losing anything, e.g. by saving my current work to a new branch first.
2. If I don't use Git, help me figure out which files were changed and how to undo the changes one by one.
3. Once I'm back to a working version, help me re-add the feature I wanted in small, tested steps.
4. Set up Git for me now if I don't have it, with a simple "commit every time something works" routine.
5. Give me 3 rules to prevent this from happening again (e.g. one change at a time, new chat for new features).

Be calm and step-by-step, because I'm stressed about losing my work.

Explain this code to me like I'm a [SKILL LEVEL]. I want to understand it well enough to change it myself.

File: [FILE NAME]
What I think it's supposed to do: [YOUR GUESS, OR "NO IDEA"]
The part that confuses me most: [SPECIFIC LINES / CONCEPTS, OR "ALL OF IT"]

[PASTE CODE OR TAG FILE]

Please:
1. Give me a 2-3 sentence summary of what this file does and how it fits into the app.
2. Walk through it section by section in plain English, explaining any jargon the first time it appears.
3. Point out the parts I'm most likely to want to change (e.g. text, colors, limits, settings) and how.
4. Point out anything that looks buggy, insecure, or overcomplicated.
5. Give me one small, safe exercise to try (e.g. "change X to Y and see what happens"), so I learn by doing.

Help me deploy my app so anyone can use it with a link. I've never done this before, so go step by step.

Tech stack: [TECH STACK]
Database / services used: [DATABASE / SERVICES USED]
Where my code is: [WHERE MY CODE IS]
Preferred host: [PREFERRED HOST]
Custom domain? [YES - DOMAIN / NO / LATER]

Please:
1. Recommend the best free or cheap host for my stack (if I haven't picked one) and explain why.
2. Give me a pre-deploy checklist: the app builds without errors (with the exact build command), there are no secret keys in the code, and .env is in .gitignore.
3. Walk me through pushing my code to GitHub, if it isn't there already.
4. Walk me through connecting the repo to the host, click by click, including where to add environment variables.
5. List every setting that needs updating for production (e.g. auth redirect URLs, API allowed origins, database URLs).
6. Tell me how to check that the live site works, and where to find the logs if it doesn't.
7. If I want a custom domain, explain how to connect it in simple terms.
8. Explain how future updates work (e.g. "push to GitHub and it redeploys automatically").

My deploy is failing (or the live site is broken). Help me fix it.

Tech stack: [TECH STACK]
Host: [HOST]
What happens: [WHAT HAPPENS]
Build or runtime logs (copy the error part):
[ERROR MESSAGE / LOGS]

Environment variables I've set on the host: [LIST NAMES ONLY - NEVER PASTE THE ACTUAL SECRET VALUES]
[PASTE OR TAG RELEVANT CONFIG FILES]

Please:
1. Explain what the log is telling me in plain English.
2. Check the common deploy problems: missing environment variables, wrong build command or output folder, case-sensitive file names (works on Mac/Windows, fails on Linux), wrong Node version, code that only works in the browser running on the server, and hard-coded localhost URLs.
3. Give me the exact fix and the steps to redeploy.
4. Tell me how to run a production build locally, so I can catch these problems before deploying next time.

I'm about to launch my app publicly. Review my project and give me a launch-readiness checklist tailored to it.

App: [APP IDEA]
Live URL: [URL]
Tech stack: [TECH STACK]
Uses: [USES]
Expected users at launch: [EXPECTED USERS AT LAUNCH]

[TAG KEY FILES OR SHARE THE REPO STRUCTURE]

Cover these areas, marking each item as Must fix / Should fix / Nice to have:
1. Security: exposed API keys, database rules, admin pages, rate limits on expensive actions (especially AI API calls).
2. Costs: anything that could run up a surprise bill if lots of people use it, and how to set spending limits.
3. Reliability: error handling, what users see when something fails, and a 404 page.
4. Basics: page titles, favicon, social share image, mobile check, loading speed.
5. Legal and trust: privacy policy and terms (and whether I need them), plus a contact or feedback link.
6. Analytics: a simple, privacy-friendly way to see how many people use the app.
7. Feedback: the easiest way for early users to report bugs.

Then give me the fixes for anything marked "Must fix".

My app works, but it looks basic. Act as a senior product designer and give it a professional glow-up without changing how it works.

Tech stack: [TECH STACK]
App: [APP IDEA]
Target user: [TARGET USER]
Vibe I want: [VIBE I WANT]
Brand colors (if any): [COLORS OR "PICK FOR ME"]

[PASTE OR TAG THE MAIN SCREENS / COMPONENTS, OR ATTACH A SCREENSHOT]

Please:
1. Critique the current design: list the top 5 things making it look amateur (spacing, alignment, colors, typography, hierarchy, consistency).
2. Create a simple design system: a color palette (primary, background, surface, text, success, error), a font pairing, a type scale, a spacing scale, a border radius, and shadows. Set these up as CSS variables or theme config.
3. Apply it to my screens: improve spacing, alignment, and visual hierarchy, and make buttons and inputs look consistent.
4. Keep ALL existing functionality exactly the same.
5. Make sure the text contrast is accessible.
6. Explain each change briefly so I learn the design principle behind it.

Add tasteful animations and microinteractions to my app so it feels smooth and high quality, without being distracting.

Tech stack: [TECH STACK]
Animation library preference: [ANIMATION LIBRARY PREFERENCE]
Screens / components to enhance: [LIST]
Personality: [PERSONALITY]

Please add:
1. Hover, press, and focus effects on buttons, cards, and links.
2. Smooth page or section transitions.
3. Elements that fade or slide in as they appear.
4. Loading skeletons instead of blank screens or plain spinners.
5. Success feedback (e.g. a checkmark animation or toast notification) after actions like save or submit.
6. One "delight" moment that fits my app (e.g. confetti when a goal is completed).

Rules:
- Keep animations short (150-400ms) and smooth (animate transform/opacity).
- Respect "prefers-reduced-motion" for users who turn off animations.
- Don't change any functionality.

Audit my app for missing "in-between" states and add them so it feels finished.

Tech stack: [TECH STACK]
App: [APP IDEA]
Tone of voice: [TONE OF VOICE]

[PASTE OR TAG THE MAIN SCREENS AND DATA-LOADING CODE]

For every screen and every action that loads or saves data, please:
1. List where these states are missing: loading, empty (no data yet), error (request failed), success, and offline / slow connection.
2. Design and add each missing state:
   - Loading: a skeleton or spinner that matches the layout.
   - Empty: a friendly message and a clear next-step button (e.g. "Create your first project").
   - Error: a human-friendly message (no raw error codes), a "Try again" button, and the technical error logged to the console.
   - Success: a short confirmation (toast or inline message).
3. Disable submit buttons while saving, so users can't double-submit.
4. Add a friendly 404 page and a fallback screen if the whole app crashes.
5. Write all the messages in my tone of voice.

Add an AI chat feature to my app.

App: [APP IDEA]
Tech stack: [TECH STACK]
AI provider: [AI PROVIDER]
What the assistant does: [WHAT THE ASSISTANT DOES]
Assistant personality: [ASSISTANT PERSONALITY]
Where it appears: [WHERE IT APPEARS]

Please:
1. Explain why the API key must ONLY be used on the server, never in the browser, and set up a server route / API endpoint to handle the AI calls.
2. Write a strong system prompt for the assistant based on my description, including what it should refuse or redirect.
3. Build the chat UI: a message list, input box, send button, auto-scroll, "AI is typing" indicator, and Markdown rendering for responses.
4. Stream the response word by word, if my stack supports it.
5. Keep the conversation history so it remembers earlier messages, with a sensible limit to control costs.
6. Add error handling (API down, rate limit hit) with friendly messages.
7. Add basic cost protection: a max message length, a per-user rate limit, and a max tokens setting.
8. Tell me roughly what it might cost per 100 conversations, and how to set a spending limit with the provider.

Help me build a simple AI agent that can use tools to complete tasks. Explain the concepts as we go, because I'm a [SKILL LEVEL].

App / agent idea: [WHAT THE AGENT DOES]
Tech stack: [TECH STACK]
AI provider / framework: [AI PROVIDER / FRAMEWORK]

Tools the agent should have:
- [TOOL 1]
- [TOOL 2]
- [TOOL 3]

Please:
1. Explain in plain English how an agent loop works (the model decides, calls a tool, sees the result, then decides again).
2. Define each tool with a clear name, description, and input schema, since good descriptions are what help the AI pick the right tool.
3. Write the agent loop with a max-steps limit, so it can't run forever or burn money.
4. Write a system prompt that explains the agent's job, when to use each tool, and when to ask the user instead of guessing.
5. Add safety: require user confirmation before any destructive or costly action (deleting, sending, paying), and validate all tool inputs.
6. Log each step (thought / tool call / result) so I can see what the agent is doing while I debug.
7. Give me 5 test requests, from easy to tricky, to check that it behaves well.

Build a "chat with my documents" feature (retrieval-augmented generation, or RAG) for my app. Keep it as simple as possible.

App: [APP IDEA]
Tech stack: [TECH STACK]
My content: [MY CONTENT]
Roughly how much content: [ROUGHLY HOW MUCH CONTENT]
AI provider: [AI PROVIDER]
Vector storage: [VECTOR STORAGE]

Please:
1. Explain RAG in 3-4 plain sentences.
2. Tell me whether my content is small enough to skip RAG and just paste it into the prompt. If so, show me that simpler approach first.
3. If RAG is needed: write a script that splits my content into chunks, creates embeddings, and stores them.
4. Write the question-answering flow: embed the question, find the top matching chunks, and send them to the AI with instructions to answer ONLY from those chunks.
5. Make it cite which document each answer came from, and say "I don't know" when the answer isn't in the docs.
6. Show me how to re-run the script when my documents change.
7. Give me 5 test questions, including one that ISN'T in the docs, to check that it doesn't make things up.

Add a feature where AI generates [CONTENT TYPE] inside my app, and returns it as structured data my code can display.

App: [APP IDEA]
Tech stack: [TECH STACK]
AI provider: [AI PROVIDER]
User input: [USER INPUT]
Each generated item should have these fields: [FIELDS]
How many per request: [NUMBER]

Please:
1. Design a JSON schema for the output and use the provider's structured output / JSON mode, so the response always matches the schema.
2. Write a detailed prompt template that produces high-quality, varied results (not repetitive), with my user's inputs inserted.
3. Validate the response in code (e.g. with Zod or similar). If it's invalid, retry once, and show a friendly error after that.
4. Build the UI: an input form, a "Generate" button, a loading state, and nicely displayed results.
5. Add a "Regenerate" option, and save results to [DATABASE / LOCALSTORAGE] so users don't pay to generate the same thing twice.
6. Keep the API key on the server and add a simple rate limit.

Build a complete, playable browser game. I'm a [SKILL LEVEL], so keep the code organized and well commented.

Game concept: [GAME IDEA]
Genre / inspiration: [GENRE / INSPIRATION]
Tech: [TECH]
Controls: [CONTROLS]
Art style: [ART STYLE]

The game must include:
1. A start screen with the title, a "Play" button, and the controls explained.
2. The core gameplay loop running smoothly at 60fps, using requestAnimationFrame and delta time so the speed is the same on every computer.
3. A player, obstacles/enemies, collectibles, and collision detection.
4. A score and a high score that's saved between visits (localStorage).
5. Difficulty that slowly increases over time.
6. A game over screen with the score and a "Play again" button.
7. A pause option (P key or button).

Put all the tweakable numbers (speed, spawn rate, gravity, etc.) in one CONFIG object at the top, so I can tune the game feel easily. Tell me exactly how to run it.

Add a new feature to my browser game without breaking what already works.

Game: [GAME DESCRIPTION]
Tech: [GAME TECH]
Feature to add: [FEATURE TO ADD]
How it should feel: [HOW IT SHOULD FEEL]

[PASTE OR TAG GAME FILES]

Please:
1. Briefly explain how you'll add it and which parts of the code will change.
2. Build it in a modular way (e.g. separate objects or classes), so it's easy to add more later.
3. Add all the new tuning numbers to the CONFIG object.
4. Add clear visual and audio feedback hooks for when the feature triggers (even placeholders).
5. Update the start screen / UI to show the new feature if needed (e.g. a power-up timer bar).
6. Tell me what to test, and suggest the starting values for balancing.

My game works, but it feels flat. Add "game juice" to make it feel satisfying and alive.

Game: [GAME DESCRIPTION]
Tech: [GAME TECH]
Mood: [MOOD]

[PASTE OR TAG GAME FILES]

Please add, with each effect easy to toggle or tune in CONFIG:
1. Screen shake on hits and explosions (subtle, and short).
2. Particle effects for collecting items, destroying enemies, and the player dying.
3. Squash-and-stretch or scale "pop" animations on jumps and pickups.
4. Hit flash (a brief white or red flash on damage) and a short freeze-frame on big hits.
5. Floating score numbers (+10) where points are earned.
6. Simple sound effects generated in code with the Web Audio API (no files needed), or tell me where to find free sound files and how to load them. Add a mute button.
7. Smooth transitions between the start, play, and game over screens.
8. A simple background effect that fits the mood (e.g. parallax stars, drifting clouds).

Keep performance smooth. Reuse particles instead of creating thousands of new objects.

Make my browser game fully playable on mobile phones as well as desktop.

Game: [GAME DESCRIPTION]
Tech: [GAME TECH]
Current controls: [CURRENT CONTROLS]
Preferred mobile controls: [PREFERRED MOBILE CONTROLS]
Orientation: [PORTRAIT / LANDSCAPE / EITHER]

[PASTE OR TAG GAME FILES]

Please:
1. Recommend the best touch control scheme for this game and explain why.
2. Add touch controls that only appear on touch devices. Keep the keyboard working on desktop.
3. Make the canvas scale to fit any screen while keeping the aspect ratio and staying sharp on high-DPI screens.
4. Prevent the usual mobile problems: page scrolling or zooming while playing, double-tap zoom, and the long-press menu.
5. Show a "rotate your device" message if the orientation is wrong.
6. Auto-pause when the player switches apps or tabs.
7. Make sure the game still runs smoothly on older phones, and suggest settings to lower if it's laggy.
8. Make it installable as a simple PWA (add to home screen), if that's easy for my setup.