Vibe Coding Cheat Sheet — WhatIsVibeCode.com

🎯 Prompt Templates That Work

    🟢 Scaffold a New Feature
    Create a [feature] component with:

TypeScript types for all props
Error boundary with fallback UI
Loading skeleton state
Unit tests with >80% coverage

Storybook story with controls Follow the existing patterns in /src/components/.

  🟡 Debug a Production Issue
  I'm seeing [error message] in production.

Stack trace: [paste trace] This started after [recent change]. Walk me through debugging this step-by-step. Don’t fix it yet — help me understand the root cause first.

    🔵 Refactor Legacy Code
    Refactor this function to:

Extract pure functions (no side effects)
Add TypeScript types
Replace callbacks with async/await
Add JSDoc comments
Keep the same external API — this is consumed by [X] Show me the diff, don’t rewrite the whole file.
```
 🟣 Write Tests
 Write tests for [module] covering:
```

Happy path with valid inputs
Edge cases: empty, null, undefined, boundary values
Error handling: network failures, invalid data
Integration: how it interacts with [dependency] Use [testing framework]. Mock external dependencies.
```
  🟠 API Design
  Design a REST API for [resource] with:
```
CRUD endpoints following RESTful conventions
Request/response schemas (OpenAPI 3.0)
Auth: Bearer token with role-based access
Pagination, filtering, sorting
Error responses with proper HTTP status codes
Rate limiting strategy

📐 10 Golden Rules of Vibe Coding

1. Context is King

Always provide file paths, stack traces, and existing patterns. AI can’t read your mind.

2. Think → Prompt → Verify

Never accept the first output. Read every line. AI is your copilot, not your captain.

3. Small Diffs Win

Ask for incremental changes, not full rewrites. Reviewable PRs ship faster.

4. Test Before Trust

Generated code without tests is technical debt in disguise. Always ask for tests.

5. Show, Don’t Tell

Paste the actual code. Share the actual error. Screenshots > descriptions.

6. Name Your Constraints

Say no external deps, vanilla CSS only, must work in Node 18. Constraints improve output.

7. Version Your Prompts

Save prompts that work. Build a library. Good prompts are reusable engineering assets.

8. Separate Concerns

One prompt per task. Don’t ask for UI + API + tests in a single prompt.

9. Review Like a Senior

Check for: security holes, missing error handling, hardcoded values, missing edge cases.

10. Ship Daily

Vibe coding removes friction. Use the speed to ship small improvements every day.

🛠️ Quick Tool Reference

        ToolBest ForContext WindowPrice
      
      
        **Cursor**Full-stack development, codebase-wide editsWhole repo$20/mo
        **GitHub Copilot**Inline completions, IDE integrationCurrent file$10/mo
        **Claude (Anthropic)**Complex reasoning, long docs, architecture200K tokens$20/mo
        **Windsurf**Agentic workflows, multi-file editsWhole repo$15/mo
        **Bolt.new**Prototyping, instant full-stack appsPer sessionFree tier
        **v0 (Vercel)**UI component generation, React/Next.jsPer promptFree tier
        **Replit Agent**Full app builds from descriptionPer session$25/mo

🔄 7 Workflows for Daily Shipping

Morning Kickoff

        - Review yesterday's diff
        - Write today's top 3 tasks
        - Open AI tool with project context loaded

Feature Build

        - Describe the feature in plain English
        - Ask AI for architecture first
        - Implement in small, testable chunks
        - Write tests alongside implementation

Bug Squash

        - Reproduce with minimal steps
        - Share error + stack trace with AI
        - Ask for root cause before fix
        - Write regression test

Code Review

        - Paste diff into AI
        - Ask: "security issues, bugs, improvements?"
        - Check for missing error handling
        - Verify test coverage

Refactoring

        - Run existing tests first
        - Refactor one module at a time
        - Keep external API unchanged
        - Measure before/after complexity

Documentation

        - Ask AI to generate README from code
        - Add JSDoc/docstrings to public APIs
        - Create architecture diagram (Mermaid)
        - Write onboarding guide

End of Day

        - Commit with descriptive message
        - Push to remote
        - Update task board
        - Save any useful prompts

🚫 Anti-Patterns to Avoid

        ❌ Don't✅ Do Instead
      
      
        Blindly copy-paste AI outputRead every line, understand the logic
        Ask "build me an app"Break into specific, testable tasks
        Skip error handlingAlways ask: "what if this fails?"
        Ignore securityAsk AI to review for OWASP Top 10
        Use AI without contextProvide codebase, constraints, patterns
        Prompt once and acceptIterate: refine, constrain, improve
      
    
  


🖨️ Print / Save as PDF

Making AI-Generated Code Accessible How AI is Changing Software Development Careers Vibe Coding Backend Patterns Vibe Coding Best Practices