How I Use Cursor + Claude to Ship React Code 3x Faster

I'm Safdar Ali. I build React and Next.js for a living — frontend at Cube, client work on the side, and this portfolio you're reading on safdarali.in. For the last year, my editor has been Cursor with Claude as the model behind Agent mode. Not because AI writes perfect code (it doesn't), but because when I treat it like a fast junior who reads the whole repo first, I ship features in a third of the time it used to take me to context-switch, grep, and boilerplate alone.

This isn't a "10 prompts that will change your life" thread. It's the exact Cursor AI React workflow I run every day — how I open a task, what I refuse to let the agent touch, and how I review output so it matches how teams at serious product companies ship. If you're searching for a real cursor ai react setup instead of another Copilot vs Cursor comparison, this is it.

Why Cursor + Claude (and not just autocomplete)

Autocomplete saves keystrokes. Agent mode saves hours — when you use it correctly. Cursor indexes your workspace, runs terminal commands, edits multiple files, and follows instructions across a feature branch. Claude (Sonnet / Opus depending on the task) is what I use for reasoning-heavy work: refactors, boundary decisions, "find every place this breaks," and long-form implementation plans.

My split:

• Tab completion — inline JSX, Tailwind classes, repetitive TypeScript. I still type; AI finishes.
• Chat (Cmd+L) — "Explain this hook," "Why is this hydrating wrong?" One file, one question.
• Agent (Cmd+I) — multi-file features, audits, "refactor this page to a server component without breaking SEO." This is where the 3× speed lives.

I don't bounce between five tools. One repo, one editor, one model family I've learned to review critically. That consistency matters more than whichever model scored 2% higher on a benchmark last Tuesday.

My daily loop — from ticket to PR

Every feature follows the same rhythm. Boring on purpose — boring scales.

1. Scope in human words first

Before I touch Agent, I write a one-paragraph goal in Notes or the Linear ticket: user outcome, files I think are involved, and what "done" means (including "don't break dark mode / SEO / mobile"). Vague prompts produce vague diffs. "Make the projects page faster" becomes "Convert app/projects/page.jsx to a server component; move data to data/; keep interactive cards client-only; run build after."

2. Agent reads before it writes

My first agent message is almost never "implement X." It's:

Analyze this codebase for [feature/bug].
Return: affected files, existing patterns to follow, risks (SEO, hydration, bundle).
Do not edit yet.

On this portfolio, that's how a full audit found the 404 typo (wf-ull), duplicate tsparticles IDs, and a 400-line client-only projects page — before a single line changed. Reading first prevents the classic AI failure mode: a clean-looking patch that ignores your conventions.

3. One bounded implementation pass

Second message: implement with constraints. I always include:

• Match existing naming, imports, and folder layout
• Minimal diff — no drive-by refactors
• Preserve metadata, JSON-LD, and sitemap entries
• Run npm run build and fix failures

The agent ships the boring parts — extract data modules, wire server/client boundaries, fix typos across files — while I save attention for UX judgment and API design on client work.

4. My review gate (non-negotiable)

I read every changed file. Not skim — read. Checklist:

1. Correctness — Does it compile? Did it run build/lint?
2. Boundaries — Is "use client" only on leaves? (See my RSC vs client guide.)
3. Security — No secrets, no dangerouslySetInnerHTML with user input, no removed security headers.
4. SEO — Canonical URLs, structured data, crawlable HTML for content pages.
5. Taste — Would I merge this if a human junior opened the PR?

If any box fails, I don't patch forward blindly — I give the agent the failure mode and ask for a focused fix. "You used index keys in a sorted list; use stable IDs." Small corrections train better output than rage-accepting a 600-line diff.

React-specific rules that keep AI output production-grade

Generic coding agents don't know your App Router conventions unless you teach them every session. These rules are how I keep Cursor AI React work aligned with how top teams ship.

Server first, client leaves

I tell the agent explicitly: new pages default to server components; only extract a client file when state, effects, or events require it. On /projects, case study cards need useState for "Read more" — so CaseStudyCard.jsx is client; the page and data modules are server. Same pattern I document in the RSC article — AI follows it when the rule is in the prompt.

Point at patterns, not abstractions

Follow the same structure as app/blog/rsc-vs-client-components/page.tsx:
- metadata export with canonical + OG
- PageStructuredData with buildBlogPostingGraph
- prose classes, BackToHomeLink, DeferredSparkles
Do not invent a new layout system.

Referencing an existing file beats describing "best practices" in the abstract. The agent copies what already works in your repo — which is exactly what a good senior would tell a new hire.

Performance prompts I reuse

• "Defer anything that hurts LCP — particles, maps, heavy charts."
• "Use next/image with sizes; no raw <img> for content photos."
• "Add optimizePackageImports for icon libraries if the bundle grew."
• "After refactor, compare First Load JS in build output."

These mirror the wins in my 60% load time case study — AI implements the checklist; I verify Lighthouse and real-device feel.

Real example — portfolio audit in one agent session

Last week I pointed Agent at this site with: "Analyze the whole codebase, find glitches, optimize without breaking SEO or best practices." One session surfaced and fixed:

Manual estimate for the same work: half a day of grep, refactor courage, and dependency archaeology. With Agent: ~45 minutes including review and a green build. That's the 3× number I stand behind — not "AI wrote my app," but "AI removed the friction so I could focus on judgment calls."

When AI slows you down (and how I bail out)

Honesty keeps this useful. I stop or reset the agent when:

• It loops — same fix attempted three times. I revert, narrow scope, or fix manually.
• It over-engineers — new utils folder for a one-liner, abstraction layers I didn't ask for. I reject and restate "minimal diff only."
• It hallucinates APIs — especially Next.js config flags. I verify against docs or existing repo usage.
• The task needs product taste — animation feel, copy tone, information hierarchy. AI drafts; I edit by hand.

The goal isn't zero typing. It's fewer context switches and less boilerplate between the decisions only you can make.

Cursor setup I actually use

• Project rules — short .cursor/rules or AGENTS.md: stack (Next 14, App Router, Tailwind), "minimal scope," "run build before done."
• Git discipline — one logical commit per agent task; conventional subject lines. AI doesn't push to main without me.
• Model choice — Sonnet for most React work; Opus when planning a large refactor or debugging a nasty hydration bug across files.
• Terminal in sandbox — let it run build/lint; I watch output, not every keystroke.

I don't maintain fifty custom prompts. I maintain constraints and reference files. That scales across client repos and side projects alike.

Where "3× faster" comes from

I tracked a rough split over two months of client + portfolio work:

Not measured in a lab — measured in shipped PRs. The multiplier drops to ~1.5× on greenfield architecture where I'm thinking more than typing. It spikes on audits, migrations, and "make this match the rest of the repo" work. That's the honest curve.

TL;DR — copy my workflow

1. Write a one-paragraph scope with files, done criteria, and constraints (SEO, a11y, mobile).
2. First agent pass: analyze only — patterns, risks, file list. No edits.
3. Second pass: implement with "minimal diff, match existing conventions, run build."
4. Review every file — boundaries, secrets, SEO, taste.
5. Point at reference files in your repo, not generic best-practice essays.
6. Bail out when the agent loops or over-abstracts; narrow scope and retry.

Closing

Cursor AI React development isn't about replacing engineers — it's about removing the tax on work that was never the hard part: renaming files, hunting typos, extracting data modules, and writing the third similar component. I still own architecture, review, and what ships to production. The workflow above is how I do that 3× faster without shipping slop.

More on how I build: projects, RSC vs client components, Next.js performance case study. Building something similar or want to compare notes on Agent setup? safdarali.in/contact.