Vibe Stack Rules

vibe-stack-rules

Modular, import-friendly engineering rules for vibe coders shipping on **Next.js + Supabase + shadcn/ui + Zustand**.

Drop them at the root of your repo. Your agent behaves.

If you've watched Claude Code, Cursor, Codex, or any other vibe-coding agent ship the same 10 bugs on this stack over and over — async `page.tsx`, module-scope Supabase clients, Zustand state leaks, ISR on authenticated routes, duplicate zod schemas, skeletons buried in `if (!data)` branches — this repo is the fix.

---

Why this is split into multiple files

A monolithic 500-line `CLAUDE.md` is a trap. Three problems:

1. Context pollution. Your agent loads every rule on every session, even when editing a button label.
2. Adherence degrades with length. Anthropic's own docs recommend keeping memory files under ~200 lines for reliable rule-following. Longer = more drift.
3. Wrong home for generic rules. CLAUDE.md should be the brain of your specific app — what it does, how to run it, current decisions — not a stack tutorial.

The fix: a **lean `CLAUDE.md`** at your repo root that describes your project, plus a **`stack/` folder** of focused rule files that `CLAUDE.md` imports via `@path` syntax. Each stack file is ~150–250 lines, scoped to one concern, and loaded by Claude Code automatically.

---

This repo's structure

vibe-stack-rules/
├── README.md                    ← you are here
├── USAGE.md                     ← end-to-end walkthrough for the skill
├── LICENSE                      ← MIT
├── .gitignore
├── .claude-plugin/
│   └── marketplace.json         ← makes this repo an installable Claude Code marketplace
├── plugins/                     ← plugin distribution (for /plugin install)
│   └── claude-design-to-nextjs/
│       ├── .claude-plugin/plugin.json
│       └── skills/claude-design-to-nextjs/   ← same content as template/.claude/skills/ below
└── template/                    ← the files you install into your project via degit
    ├─