The 5 Laws of Vibe Coding

We have laws for a reason. Following these simple rules will prevent your latest project from crashing before it hits production.

madness.png

The term "vibe coding" is trendy, but I'd argue its just traditional software development with a good amount of the coding outsourced to LLMs.

2. Test as You Vibe

Testing doesn't kill the flow; it amplifies it. Set up testing that runs automatically:

bash# Install vitest for lightning-fast testing npm install -D vitest @vitest/ui # Add to package.json "scripts": { "test": "vitest", "test:ui": "vitest --ui" }

Check out Vitest's example repo (https://github.com/vitest-dev/vitest/tree/main/examples/basic) for quick setups. The key is making tests so easy to write that they become part of your flow state.

3. CI: Your Safety Net

GitHub Actions is your automated sanity checker. Here's a minimal setup that saves lives:

yaml# .github/workflows/vibe-check.yml name: Vibe Check on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 - run: npm ci - run: npm test - run: npm run lint

See GitHub's starter workflows (https://github.com/actions/starter-workflows) for language-specific templates.

4. Git Hooks: Your Pre-Flight Check

Husky + lint-staged = never pushing broken code again:

bashnpx husky-init && npm install npm install -D lint-staged # Add to package.json "lint-staged": { "*.{js,ts}": ["eslint --fix", "prettier --write"], "*.test.{js,ts}": ["vitest related --run"] }

Check out Husky's documentation (https://github.com/typicode/husky) for advanced setups. This catches issues before they hit your repo.

5. Documentation That Works for You

Forget writing novels. Focus on documentation that serves multiple purposes:

The Triple-Threat Approach:

  1. Code Comments as Docs: Use JSDoc or TypeScript

javascript/** * Processes user vibes into tangible code * @param {string} vibe - The current mood * @returns {Promise<Code>} Beautiful, working code */

  1. README as Onboarding: Keep it updated with:
    • Quick start (3 commands max)
    • Common tasks
    • Architecture decisions
  2. Tests as Examples: Your tests ARE documentation

javascripttest('converts chaos to order', () => { const result = processVibes('chaotic energy') expect(result).toBe('clean code') })

Tools like TypeDoc (https://github.com/TypeStrong/typedoc) or JSDoc (https://github.com/jsdoc/jsdoc) can generate documentation from your code automatically.

The Vibe-Preserving Workflow

  1. Start with intention: 5-minute plan
  2. Commit early, commit often: Every 30-45 minutes
  3. Let robots do the boring stuff: Automate everything
  4. Document while it's fresh: Comments > wiki pages
  5. Test the happy path first: One test is better than zero

Real-World Examples

  • Playwright Test (https://github.com/microsoft/playwright) - Excellent testing setup and CI
  • Vite (https://github.com/vitejs/vite) - Great example of documentation and git hooks
  • Zod (https://github.com/colinhacks/zod) - Simple but effective CI/CD setup
  • tRPC (https://github.com/trpc/trpc) - Fantastic developer experience with testing

The Bottom Line

Vibe coding doesn't mean coding without structure - it means having structure that doesn't get in your way. These tools and practices create a safety net that lets you code fearlessly.

Set them up once, then forget about them until they save your ass at 3 AM.

Now go forth and vibe responsibly. 🚀

Remember: The best workflow is the one you actually use. Start with one thing, make it a habit, then add more.

RetryClaude can make mistakes. Please double-check responses. (https://support.anthropic.com/en/articles/8525154-claude-is-providing-incorrect-or-misleading-responses-what-s-going-on)