imfaisii

Vibe Stack Rules — AI skill for Claude Code

AI community

A modular CLAUDE.md / AGENTS.md rulebook for vibe coders on Next.js, Supabase, shadcn/ui, and Zustand.

How to install Vibe Stack Rules

This entry records only its repository, not the path inside it, so there is no exact command to give. Open imfaisii/vibe-stack-rules and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Vibe Stack Rules does

A modular CLAUDE.md / AGENTS.md rulebook for vibe coders on Next.js, Supabase, shadcn/ui, and Zustand. Drop it at your repo root and your AI agent behaves.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Styleseed — Claude Code & Cursor design system 325 ★
AI Marketing Skills — The marketing fundamentals that make AI actually make you money, written in my own voice, as a ready-to-instal 226 ★

README

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:

Context pollution. Your agent loads every rule on every session, even when editing a button label.
Adherence degrades with length. Anthropic's own docs recommend keeping memory files under ~200 lines for reliable rule-following. Longer = more drift.
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
    ├─