← Cheatsheets / Prompting

Copy-Paste Prompt Templates

Ready-to-use prompts for common vibecoding tasks. Just fill in the blanks.

prompts templates productivity

Stop writing prompts from scratch. Copy these templates, fill in the [brackets], ship faster.

What’s here:

  • 🚀 Starting projects (scaffold, landing page, CRUD)
  • ✨ Adding features (auth, forms, search)
  • 🔧 Fixing & improving (debug, refactor, optimize)
  • 🎨 UI/UX (components, responsive, dark mode)
  • 📦 Deployment (CI/CD, Docker, Vercel)

Want to understand why these work? Read Prompting Fundamentals.

Starting a New Project

Scaffold a Project

Create a new [React/Next.js/Astro] project with:
- [TypeScript/JavaScript]
- [Tailwind CSS/vanilla CSS]
- Basic folder structure
- A simple home page that says "Hello World"
- README with setup instructions

Landing Page

Build a landing page for [product/service] that includes:
- Hero section with headline: "[your headline]"
- 3 feature cards highlighting: [feature 1], [feature 2], [feature 3]
- Call-to-action button linking to [URL]
- Footer with [company name] and copyright
- Mobile responsive design
- Dark mode support

CRUD App

Create a [thing] management app where users can:
- View a list of all [things]
- Add new [things] with fields: [field1], [field2], [field3]
- Edit existing [things]
- Delete [things]
- Data stored in local storage
- Clean, minimal UI

Adding Features

Add Authentication

Add user authentication to this app:
- Sign up with email/password
- Login/logout functionality
- Protected routes that require login
- Show username when logged in
- Use [Supabase/Firebase/Auth.js]

Add a Form

Create a [form type] form with these fields:
- [Field 1]: [type, validation]
- [Field 2]: [type, validation]
- [Field 3]: [type, validation]

Requirements:
- Client-side validation with error messages
- Loading state on submit
- Success/error feedback
- [Where data goes: API endpoint, email, etc.]
Add search functionality to the [component/page]:
- Search input with debounce (300ms)
- Filter [items] by [fields to search]
- Show "No results" when nothing matches
- Clear search button
- Highlight matching text in results

Fixing & Improving

Fix an Error

I'm getting this error:

[paste full error message]

In this file: [filename]
When I: [action that triggers error]
Expected: [what should happen]
Actual: [what happens instead]

Here's the relevant code:
[paste code]

Refactor Code

Refactor this code to be more:
- Readable (clear variable names, comments)
- Maintainable (smaller functions, DRY)
- Performant (if applicable)

Keep the same functionality. Explain what you changed and why.

[paste code]

Optimize Performance

This [component/function] feels slow. Analyze it and:
1. Identify performance bottlenecks
2. Suggest specific optimizations
3. Implement the most impactful fix

Here's the code:
[paste code]

Add Tests

Write tests for this [function/component]:

[paste code]

Include:
- Happy path test
- Edge cases
- Error handling
- Use [Jest/Vitest/Testing Library]

UI/UX Tasks

Design System Setup

Create a design system with:
- Color palette: primary, secondary, accent, neutrals
- Typography scale: headings (h1-h6), body, small
- Spacing scale: 4px base unit
- Border radius options
- Shadow levels
- Implement as CSS variables or Tailwind config

Make It Responsive

Make this component responsive:
- Mobile (< 640px): [layout description]
- Tablet (640-1024px): [layout description]  
- Desktop (> 1024px): [layout description]

Here's the current code:
[paste code]

Add Dark Mode

Add dark mode to this [component/page]:
- Toggle button in [location]
- Remember preference in local storage
- Respect system preference as default
- Smooth transition between modes
- Update these colors: [list colors to change]

Improve Accessibility

Review this component for accessibility:
- Proper heading hierarchy
- ARIA labels where needed
- Keyboard navigation
- Focus states
- Color contrast
- Screen reader testing suggestions

[paste code]

Data & APIs

Fetch Data

Fetch data from [API endpoint] and:
- Show loading state while fetching
- Display data in [format: list, table, cards]
- Handle errors gracefully
- [Optional: Add pagination/infinite scroll]

Connect to Database

Set up [Supabase/Firebase/Prisma] for this app:
- Create schema for: [describe data model]
- CRUD functions for each model
- Type safety
- Basic error handling

Deployment

Deploy Checklist

Prepare this project for production:
- Environment variable setup
- Build optimization
- Error boundaries
- Meta tags for SEO
- Generate deployment script for [Vercel/Netlify/Cloudflare]

Pro Tips

  1. Be specific – “[modern design]” is vague, “[dark theme with purple accents and rounded corners]” is specific

  2. Provide context – Include relevant code, not just the problem

  3. State constraints – “No external dependencies” or “Must work in Node 18”

  4. Ask for explanations – Add “Explain each change” to learn

  5. Iterate – First prompt rarely perfect. Follow up with refinements.

🎯 Use One Right Now

  1. Pick a template above
  2. Fill in the brackets for YOUR project
  3. Paste into your AI tool
  4. Iterate until it’s right

That’s vibecoding. Do it now.

Guides:

Cheatsheets:

Practice:

✓ Copied to clipboard!