Build a React/TypeScript Frontend with Claude Code: A Hands-On Guide (2026)

Can Claude Code build a React/TS frontend?

Yes - Claude Code can build a complete React/TypeScript frontend, from a single component to a full feature with tests and performance tuning. That is the short answer if you are still weighing it up. But to understand why it does this better than a chatbot you paste code into, you need to know what makes Claude Code different.

Claude Code is an agentic CLI: instead of handing back a loose snippet for you to copy, it reads your project tree directly, opens multiple files at once, edits them to spec, then runs commands (dev server, tests, typecheck) and reads the output to keep fixing. That "read the repo -> edit -> run -> read the error -> fix again" loop is what makes it a good fit for React/TS, because a real frontend project always has interconnected pieces: a new component needs a type from another file, needs the right imports, needs to match your theme and your existing tests. A model that only sees a single prompt can't see those constraints; Claude Code can, because it holds the whole project as context.

In practice it is strongest when you let it run typecheck and tests after every change - a wrong type or a broken import shows up in the same session instead of waiting to bite you at build time. If you are completely new, read what Claude Code is and how it works first to get the agentic model down before you dive in.

Setup: install Claude Code + scaffold a React/TS project

Three things before you type your first prompt: install Claude Code, scaffold a React-TS shell, then launch Claude Code inside the project directory.

1. Install Claude Code. See the OS-by-OS walkthrough in our guide on how to install Claude Code. Once it's installed, run claude --version to confirm the CLI is ready.
2. Create a Vite + React + TypeScript app. Vite is the lightweight default for a React SPA:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

That scaffolds a src/ structure, a TypeScript config, and a dev server on localhost:5173. If you are targeting Next.js instead of an SPA, see the FAQ at the end.

1. Open Claude Code in the repo. From the project root, run:

claude

Claude Code recognizes this as a React-TS project from package.json and tsconfig.json. From here you give instructions in plain English. One small habit: before handing off any real work, ask it Read the src/ structure and summarize the stack in use to confirm it actually "understands" the project.

Configure CLAUDE.md for a React/TS project

This is the step two out of three competitors skip, and it decides the quality of everything downstream. CLAUDE.md is a file Claude Code reads automatically every session - think of it as the "project conventions" you write once so you don't have to repeat your stack and rules in every prompt. For a frontend, a practical template looks like this:

# CLAUDE.md - React/TS project

## Stack
- Vite + React 19 + TypeScript (strict mode)
- Styling: Tailwind CSS (or MUI v7 - pick one, don't mix)
- Data: TanStack Query; Routing: TanStack Router
- Testing: Vitest + React Testing Library

## Code conventions
- Functional components + hooks only. No class components.
- TypeScript strict: NO `any`. If a type is unclear, ask first.
- Absolute imports via the `@/` alias (already set in tsconfig).
- Every component has explicit prop types (a `XxxProps` interface).
- Complex components ship with a test.

## Workflow
- Before editing multiple files, outline a short plan for me to approve.
- After each change: run `npm run typecheck` and the relevant tests.
- Don't install new dependencies without asking.

The most valuable lines: "no any", "absolute imports", and "run typecheck after every change". They head off exactly the mistakes Claude Code tends to make when it lacks constraints. To go deeper on writing this file, see the complete CLAUDE.md guide. The core point for frontend work: the more clearly you lock the stack and the "review the diff before you accept" rule, the more the output matches your project style instead of drifting every time.

Generating your first React/TS component (a real walkthrough)

This is the heart of it. How you write the prompt decides 80% of the result. A good prompt states the stack + the constraints + the states to handle, not just the goal. Compare:

• Weak prompt: "Create a UserCard component." -> Claude Code has to guess the props, guess the styling, and might pull in a library on its own.
• Good prompt: "Create a UserCard component in src/components/. Typed props: user (id, name, avatarUrl, role), isLoading, error. Show a skeleton while loading; show a message on error; style with Tailwind using the existing theme. Add a basic test file. Don't add new dependencies."

With the second prompt, Claude Code usually creates all at once: UserCard.tsx, the props interface, three render branches (loading/error/data), and UserCard.test.tsx. An example of the interface it generates:

interface User {
 id: string;
 name: string;
 avatarUrl: string;
 role: string;
}

interface UserCardProps {
 user?: User;
 isLoading?: boolean;
 error?: string | null;
}

The step you must not skip: review the diff before you accept. Claude Code shows changes per file as a diff. Read it carefully - check whether the imports actually exist, whether it quietly touched other files, whether a type got loosened to any. Accept the parts you're happy with and ask it to fix the rest (for example: "pull the skeleton out into its own component"). After you accept, let it run npm run typecheck and the tests right there in the session.

State, data fetching & routing

For a modern 2026 React project, don't let Claude Code default straight to Redux. The leaner pattern for most cases: hooks for local state, TanStack Query for server state, TanStack Router for navigation, and reach for global state (Zustand/Context) only when you genuinely have state shared across many branches.

A sample prompt to generate a fetch hook with built-in loading/error via Suspense:

Create a `useUser(id)` hook using TanStack Query `useSuspenseQuery`,
fetching from /api/users/:id and returning a typed User.
Wrap UserCard in a <Suspense fallback> and an error boundary.
Don't create global state.

useSuspenseQuery (TanStack Query v5) lets a component "suspend" rendering until the data is ready, pushing the loading state up to the parent <Suspense> instead of scattering if (isLoading) everywhere - noticeably cleaner code (see the TanStack Query docs, 2026). The rule when you delegate: say explicitly "server state goes in Query, don't stuff it in a global store", otherwise Claude Code tends to over-engineer with a big store you don't need.

Styling & responsive (design system, dark mode)

Claude Code styles components quickly, but it will happily hard-code colors and spacing if you don't stop it. The way to force it onto your design system: declare in CLAUDE.md that it uses tokens/theme only, then be specific in the prompt.

• Stick to tokens, don't hard-code: "Use Tailwind classes from the existing config (spacing and colors from the theme); don't write raw hex values." With MUI v7: "style via sx and the theme, use theme.palette, no hard-coded colors."
• Responsive: name the breakpoints you want - "one column on mobile, switch to two columns at 768px and up."
• Dark mode: ask it to use the existing theme variables / dark: classes, not to build a parallel theming mechanism.

Again, review the diff and check whether it slipped in a new UI library. If you want to go deeper on the aesthetics and experience side, our piece on designing UI/UX with Claude Code focuses specifically on building interfaces that are polished and consistent.

Testing & accessibility for components

This is a big blind spot in competing posts: they mention testing and a11y in passing. But the real lifecycle of a component includes both. Claude Code writes tests well precisely because it can run them and keep fixing until they go green.

Testing with Vitest + React Testing Library. An effective prompt spells out the branches to cover:

Write tests for UserCard with Vitest + React Testing Library:
- render loading state -> shows a skeleton
- render with a user -> shows name and role
- render with an error -> shows the error message
Run the tests and fix until they pass.

An example of a test case it generates:

it('shows a message when there is an error', () => {
 render(<UserCard error="Failed to load" />);
 expect(screen.getByText('Failed to load')).toBeInTheDocument();
});

Accessibility. This is where Claude Code tends to forget unless you remind it. Once the component runs, hand it a direct task: "Audit accessibility for UserCard and fix it: make sure roles/aria are appropriate, the avatar image has alt text, it's keyboard-operable, and color contrast is sufficient." It will add alt, attach the right aria-label/role, and adjust focus. Still verify by actually tabbing through the component - a11y is easy to "assume correct".

Performance optimization (lazy loading, memo, bundle)

As the app grows, ask Claude Code to optimize - but deliberately, not prematurely.

• Route-based code splitting: React.lazy + <Suspense> to split the bundle per page, loading only what's needed (see the React docs - lazy, 2026). Prompt: "Move the routes to React.lazy + Suspense to split the bundle."
• Memoize where it counts: useMemo for expensive computations, memo for components that re-render often with stable props. Don't wrap everything - careless memoization can cost more than it saves.
• Find wasteful re-renders: "Find unnecessary re-renders in <list of components> and suggest fixes." Because Claude Code can read the whole component tree, it can point to the actual source instead of guessing.

A blunt warning: optimizing too early makes code harder to read without guaranteeing it's faster. Only optimize once you've measured (bundle size, the React DevTools Profiler) and have a real problem.

Going faster with a prebuilt frontend skill (AgentKit)

Rewriting CLAUDE.md, locking your React/TS conventions, reminding it to "use Suspense" and "stick to the theme" for every new project gets tedious. There's a shortcut: use a prebuilt frontend skill. Specifically, the ak-frontend-development skill in AgentKit packages modern React/TS patterns - functional components, React.lazy/Suspense, useSuspenseQuery, MUI v7, TanStack Router - so Claude Code applies them right away without you re-describing them each time.

To avoid confusion: AgentKit here is a kit for Claude Code (agentkit.best, the ak CLI) - not "OpenAI's AgentKit". For the big-picture overview first, see what AgentKit is and whether it's worth it. If skills are a new concept, read what a skill in Claude Code is. The ak-frontend-development skill lives in the Engineer Kit; the full breakdown is in our Engineer Kit review (with the ak-frontend-development skill).

When does Claude Code build React badly? Common failure modes

Honesty is what competitors dodge. Claude Code isn't perfect - knowing its weak spots up front helps you guard the right places.

• Hallucinated imports / wrong library version. It can import from a package you haven't installed, or use an old version's API (for example a React Query v4 pattern while your project is on v5). Guard: pin versions in CLAUDE.md and let it run typecheck immediately - a broken import surfaces at once.
• Over-engineering. A simple form can end up with a whole state machine bolted on. Guard: state the complexity you want ("keep it simple, no new libraries").
• Prop drilling. Passing props through many layers instead of using context/composition. Guard: ask for an architecture review when the component tree gets deep.
• Forgetting accessibility. As noted above - a11y is easy to drop by default unless you prompt for it.
• Outdated React APIs. It sometimes reaches for old-style useEffect data fetching instead of Suspense/Query. Guard: lock the modern pattern in CLAUDE.md.

The common thread across every guard: review the diff + run tests/typecheck right away, don't accept blindly. That also keeps you clear of "AI slop" - code that runs but is messy and hard to maintain.

Frequently asked questions (FAQ)

Does Claude Code run npm run dev and tests on its own?

Yes. Claude Code runs terminal commands in your project - starting the dev server, running tests, typechecking - then reads the output to fix itself. Make it a habit to ask it to run tests/typecheck after every change so bugs surface early.

Can I use it for Next.js, or only Vite?

Both. Claude Code isn't tied to a specific framework; it works with Next.js, Vite, Remix, or React Native as long as the project is well structured. Just declare the framework in CLAUDE.md so it follows the right conventions (for example Next.js's App Router).

Do I need to know React before using it?

You should. Claude Code writes code fast, but you need enough React/TS knowledge to read the diff, spot where it went wrong, and set the right constraints. A complete beginner can still learn, but don't accept code you don't understand - that's the source of bugs that are hard to unwind.

Can I use it alongside Cursor or VS Code?

Yes. Claude Code is a CLI and runs alongside any editor. Plenty of devs let Claude Code handle the agentic work (generating/editing many files, running tests) while keeping VS Code open to read and hand-tweak. The two tools complement each other.

How do I avoid outdated code or wrong library versions?

Pin specific versions in CLAUDE.md, ask it to run typecheck immediately, and spell out the modern patterns you want (Suspense, TanStack Query v5). When you see it reach for an old API, point it out and tell it to update to the latest docs.

Is there a prebuilt skill for frontend work?

Yes. The ak-frontend-development skill in AgentKit (Engineer Kit, agentkit.best) packages modern React/TS patterns for Claude Code to apply right away, instead of you configuring conventions on every project. This is AgentKit for Claude Code, which is different from OpenAI's AgentKit.

Conclusion + next steps

The workflow boils down to six repeatable steps: install + scaffold -> write CLAUDE.md -> generate components with tightly-scoped prompts and always review the diff -> add state/data with TanStack Query/Router -> test and fix a11y -> optimize performance when needed. The key isn't "a longer prompt" but clear constraints + reviewing the diff + running tests right away. Next up: read designing UI/UX with Claude Code to level up the interface, pair it with building a backend API with Claude Code for a full-stack app, and standardize your git workflow with Claude Code when you commit the changes. Still setting up your environment? Head back to installing Claude Code. And if building frontends is your daily work, an AgentKit bundle — now $149 (from $198) with prebuilt skills will save you a fair amount of repetitive setup.