DEV Community: yangzh991

The cursorrules and CLAUDE.md setup I use for every AI product I build

yangzh991 — Thu, 26 Mar 2026 11:27:21 +0000

Every time I start a new AI product, I used to spend the first hour
doing the same thing: setting up Cursor rules, writing CLAUDE.md,

configuring the agent behavior.

Then I stopped doing that.

## What I use now

Three files. That's it.

.cursorrules — tells Cursor how to handle React + TypeScript in AI products specifically. Component patterns, streaming state conventions, how to structure tool-call UI.

CLAUDE.md — project context for Claude Code. What the app does, tech stack, file structure, what NOT to touch. Claude reads this before every session.

AGENTS.md — defines agent roles and boundaries when you're running multi-agent workflows. Which agent owns which part of the
codebase.

## Why this matters

Without these files, every AI coding session starts cold. The model doesn't know your conventions, rewrites things you already decided, asks questions you've answered before.

With them, you drop into any session and the context is already there.

## What's in the cursorrules specifically

React + TypeScript strict mode conventions
AI component patterns (streaming, tool-calls, loading states)
Tailwind class ordering
File naming and folder structure
What to avoid (no useEffect for data fetching, no any types)

## How to use it

Drop the three files into your project root. Adjust the stack

references to match your setup. Done.

I packaged mine up here if you want to skip writing from scratch:

https://payhip.com/b/BVfGI ($19)

Or just use this as a starting point and build your own.

What does your CLAUDE.md look like? Curious what context other

people include.

Why I built a React component library specifically for AI products

yangzh991 — Thu, 26 Mar 2026 10:50:45 +0000

Last year I was building an AI chat interface. I needed a component that shows streaming text with a blinking cursor, one that displays tool calls in progress, and another that tracks token usage in real time.

I opened npm. Nothing.

Every UI library I found — shadcn, MUI, Chakra — was built for traditional apps. Forms, tables, dashboards. Great libraries. Wrong problem.

So I built Aura UI.

Most AI products need the same 9 things that no library provides:

MessageBubble — chat layout with role-based styling
StreamingIndicator — animated states (thinking / streaming / done)
ToolCallCard — shows what the agent is doing in real time
ParameterSlider — temperature, top-p controls with live preview
CitationBlock — source references with hover expand
TokenCounter — live usage with limit warnings
CodeBlock — syntax highlight + copy, optimized for LLM output
PromptEditor — textarea with token count + template variables
ModelSelector — provider/model picker with context window info

Plus 10 base components (Button, Input, Modal, etc.) that match the same design language.

The streaming state machine

The part that took longest: streaming has 4 distinct states — Thinking → Streaming → Complete → Error. Each needs its own visual language. Most teams hack this with booleans. Aura UI ships it solved.

Tech

React + TypeScript + Tailwind CSS. Dark/light mode.
Zero runtime dependencies beyond React itself.
Source code included — no black box.

Get it

Live demo → https://aura-ui-mocha.vercel.app

What you get:

19 components (full source, not a compiled black box)
TypeScript types + Tailwind config included
Dark/light mode out of the box
Free updates

Early bird: $49 → $99 after 200 seats

If this saves you a week of work on your next AI product:
→ https://payhip.com/b/z9Hjr

Happy to answer questions below — especially if there's a component
you need that's not on the list.

The .cursorrules + CLAUDE.md + AGENTS.md setup that stopped my AI agent from ignoring me

yangzh991 — Tue, 24 Mar 2026 13:18:59 +0000

Every session, the same problem.

I open Cursor, start a task, and within minutes the AI is:

Generating components that already exist
Using patterns we explicitly don't use
Renaming things I didn't ask it to rename

Sound familiar?

The fix isn't a better prompt. It's better rules files.

Here's the setup I now use on every project:

## .cursorrules

Tells Cursor how to write code in this repo. Mine covers:

TypeScript strict patterns (no any, discriminated unions for AI states)
Streaming hook conventions with proper abort cleanup
Folder structure enforcement
Security rules (no API keys in state, sanitize AI output)

## CLAUDE.md

Loaded at the start of every Claude Code session. Includes:

Tech stack
Current sprint goals
Business rules the AI must never violate
What it should always/never do

## AGENTS.md

The strictest file. Prevents agents from:

Renaming files without permission
Deleting code without explaining it first
Adding dependencies without listing them

I packaged all three as a starter pack with fill-in-the-blank

templates for React + TypeScript + AI product projects.

If you want to grab it: https://payhip.com/b/BVfGI ($19)
If you want the full setup pre-built and ready to drop in:

https://payhip.com/b/BVfGI ($19)

Or drop a comment and I'll paste the .cursorrules here for free.