Construye un Frontend React/TypeScript con Claude Code: Guía Práctica (2026)

¿Puede Claude Code construir un frontend React/TS?

Sí: Claude Code puede construir un frontend React/TypeScript completo, desde un solo componente hasta una funcionalidad entera con tests y ajuste de rendimiento. Esa es la respuesta corta si todavía lo estás sopesando. Pero para entender por qué lo hace mejor que un chatbot en el que pegas código, necesitas saber qué hace diferente a Claude Code.

Claude Code es una CLI agéntica: en vez de devolverte un fragmento suelto para que lo copies, lee el árbol de tu proyecto directamente, abre varios archivos a la vez, los edita según la especificación y luego ejecuta comandos (servidor de desarrollo, tests, typecheck) y lee la salida para seguir corrigiendo. Ese bucle de "leer el repo -> editar -> ejecutar -> leer el error -> volver a corregir" es lo que lo hace una buena opción para React/TS, porque un proyecto frontend de verdad siempre tiene piezas interconectadas: un componente nuevo necesita un tipo de otro archivo, necesita los imports correctos, necesita encajar con tu tema y con tus tests existentes. Un modelo que solo ve un único prompt no puede ver esas restricciones; Claude Code sí, porque mantiene el proyecto entero como contexto.

En la práctica es más fuerte cuando dejas que ejecute typecheck y tests después de cada cambio: un tipo equivocado o un import roto aparece en la misma sesión, en lugar de esperar para morderte a la hora del build. Si eres completamente nueva, lee primero qué es Claude Code y cómo funciona para asimilar el modelo agéntico antes de lanzarte.

Configuración: instalar Claude Code + hacer el scaffold de un proyecto React/TS

Tres cosas antes de escribir tu primer prompt: instalar Claude Code, montar un esqueleto React-TS y luego lanzar Claude Code dentro del directorio del proyecto.

1. Instala Claude Code. Consulta el recorrido por sistema operativo en nuestra guía sobre cómo instalar Claude Code. Una vez instalado, ejecuta claude --version para confirmar que la CLI está lista.
2. Crea una app Vite + React + TypeScript. Vite es el valor por defecto ligero para una SPA de React:

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

Eso monta una estructura src/, una configuración de TypeScript y un servidor de desarrollo en localhost:5173. Si tu objetivo es Next.js en lugar de una SPA, mira el FAQ al final.

1. Abre Claude Code en el repositorio. Desde la raíz del proyecto, ejecuta:

claude

Claude Code reconoce esto como un proyecto React-TS por el package.json y el tsconfig.json. A partir de aquí das instrucciones en español sencillo. Un pequeño hábito: antes de delegar cualquier trabajo real, pídele Read the src/ structure and summarize the stack in use para confirmar que de verdad "entiende" el proyecto.

Configurar CLAUDE.md para un proyecto React/TS

Este es el paso que dos de cada tres competidores se saltan, y decide la calidad de todo lo que viene después. CLAUDE.md es un archivo que Claude Code lee automáticamente en cada sesión; piénsalo como las "convenciones del proyecto" que escribes una vez para no tener que repetir tu stack y tus reglas en cada prompt. Para un frontend, una plantilla práctica se ve así:

# 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.

Las líneas más valiosas: "no any", "absolute imports" y "run typecheck after every change". Cortan de raíz justo los errores que Claude Code tiende a cometer cuando le faltan restricciones. Para profundizar en la escritura de este archivo, mira la guía completa de CLAUDE.md. El punto clave para el trabajo de frontend: cuanto más claramente fijes la stack y la regla de "revisar el diff antes de aceptar", más se ajustará la salida al estilo de tu proyecto en vez de desviarse cada vez.

Generar tu primer componente React/TS (un recorrido real)

Este es el corazón del asunto. Cómo escribes el prompt decide el 80% del resultado. Un buen prompt declara la stack + las restricciones + los estados a manejar, no solo el objetivo. Compara:

• Prompt débil: "Crea un componente UserCard." -> Claude Code tiene que adivinar las props, adivinar el estilizado y puede que traiga una librería por su cuenta.
• Prompt bueno: "Crea un componente UserCard en src/components/. Props tipadas: user (id, name, avatarUrl, role), isLoading, error. Muestra un skeleton mientras carga; muestra un mensaje en caso de error; estiliza con Tailwind usando el tema existente. Añade un archivo de test básico. No añadas dependencias nuevas."

Con el segundo prompt, Claude Code suele crearlo todo de una vez: UserCard.tsx, la interfaz de props, tres ramas de renderizado (loading/error/data) y UserCard.test.tsx. Un ejemplo de la interfaz que genera:

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

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

El paso que no debes saltarte: revisar el diff antes de aceptar. Claude Code muestra los cambios por archivo como un diff. Léelo con cuidado: comprueba si los imports existen de verdad, si tocó otros archivos sin avisar, si algún tipo se aflojó a any. Acepta las partes con las que estés conforme y pídele que corrija el resto (por ejemplo: "extrae el skeleton a su propio componente"). Después de aceptar, deja que ejecute npm run typecheck y los tests allí mismo en la sesión.

Estado, obtención de datos & enrutado

Para un proyecto React moderno de 2026, no dejes que Claude Code recurra directamente a Redux por defecto. El patrón más ligero para la mayoría de los casos: hooks para el estado local, TanStack Query para el estado de servidor, TanStack Router para la navegación, y recurre al estado global (Zustand/Context) solo cuando de verdad tengas estado compartido entre muchas ramas.

Un prompt de ejemplo para generar un hook de fetch con loading/error integrados vía 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) permite que un componente "suspenda" el renderizado hasta que los datos estén listos, empujando el estado de loading hacia el <Suspense> padre en lugar de esparcir if (isLoading) por todas partes: un código notablemente más limpio (mira la documentación de TanStack Query, 2026). La regla cuando delegas: di explícitamente "el estado de servidor va en Query, no lo metas en un store global", de lo contrario Claude Code tiende a sobreingenierizar con un store grande que no necesitas.

Estilizado & responsive (sistema de diseño, modo oscuro)

Claude Code estiliza componentes rápido, pero fijará colores y espaciados en el código tan campante si no lo frenas. La forma de forzarlo a seguir tu sistema de diseño: declara en CLAUDE.md que use solo tokens/tema y luego sé específica en el prompt.

• Cíñete a los tokens, no fijes valores en el código: "Usa clases de Tailwind de la configuración existente (espaciado y colores del tema); no escribas valores hex crudos." Con MUI v7: "estiliza vía sx y el tema, usa theme.palette, sin colores fijados en el código."
• Responsive: nombra los breakpoints que quieres — "una columna en móvil, cambiando a dos columnas a partir de 768px."
• Modo oscuro: pídele que use las variables de tema existentes / las clases dark:, y que no construya un mecanismo de temas paralelo.

De nuevo, revisa el diff y comprueba si coló una librería de UI nueva. Si quieres profundizar en el lado estético y de experiencia, nuestro artículo sobre diseñar UI/UX con Claude Code se centra específicamente en construir interfaces pulidas y consistentes.

Tests & accesibilidad para componentes

Este es un gran punto ciego en los posts de la competencia: mencionan los tests y la a11y de pasada. Pero el ciclo de vida real de un componente incluye ambos. Claude Code escribe tests bien precisamente porque puede ejecutarlos y seguir corrigiendo hasta que pasen en verde.

Tests con Vitest + React Testing Library. Un prompt eficaz detalla las ramas a cubrir:

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.

Un ejemplo de caso de test que genera:

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

Accesibilidad. Aquí es donde Claude Code tiende a olvidarse, a menos que se lo recuerdes. Una vez que el componente funciona, dale una tarea directa: "Audita la accesibilidad de UserCard y corrígela: asegúrate de que los roles/aria sean adecuados, de que la imagen del avatar tenga texto alt, de que se pueda operar con el teclado y de que el contraste de color sea suficiente." Añadirá alt, colocará el aria-label/role correcto y ajustará el foco. Aun así, verifica navegando de verdad con el tabulador por el componente: la a11y es fácil de "suponer correcta".

Optimización del rendimiento (lazy loading, memo, bundle)

A medida que la app crece, pídele a Claude Code que optimice, pero de forma deliberada, no prematura.

• Code splitting por ruta: React.lazy + <Suspense> para dividir el bundle por página, cargando solo lo necesario (mira la documentación de React - lazy, 2026). Prompt: "Mueve las rutas a React.lazy + Suspense para dividir el bundle."
• Memoiza donde cuenta: useMemo para cálculos costosos, memo para componentes que se re-renderizan a menudo con props estables. No lo envuelvas todo: una memoización descuidada puede costar más de lo que ahorra.
• Encuentra re-renders innecesarios: "Encuentra re-renders innecesarios en <lista de componentes> y sugiere correcciones." Como Claude Code puede leer el árbol de componentes entero, puede señalar el origen real en vez de adivinar.

Una advertencia sin rodeos: optimizar demasiado pronto hace el código más difícil de leer sin garantizar que sea más rápido. Optimiza solo una vez que hayas medido (el tamaño del bundle, el React DevTools Profiler) y tengas un problema real.

Ir más rápido con una skill de frontend prefabricada (AgentKit)

Reescribir el CLAUDE.md, fijar tus convenciones de React/TS, recordarle "usa Suspense" y "cíñete al tema" en cada proyecto nuevo se vuelve tedioso. Hay un atajo: usar una skill de frontend prefabricada. En concreto, la skill ak-frontend-development de AgentKit empaqueta patrones modernos de React/TS — componentes funcionales, React.lazy/Suspense, useSuspenseQuery, MUI v7, TanStack Router — para que Claude Code los aplique de inmediato sin que tengas que volver a describirlos cada vez.

Para evitar confusiones: AgentKit aquí es un kit para Claude Code (agentkit.best, la CLI ak), no el "AgentKit de OpenAI". Para la visión general primero, mira qué es AgentKit y si vale la pena. Si las skills son un concepto nuevo, lee qué es una skill en Claude Code. La skill ak-frontend-development vive en el Engineer Kit; el desglose completo está en nuestra reseña del Engineer Kit (con la skill ak-frontend-development).

¿Cuándo construye Claude Code React mal? Modos de fallo comunes

La honestidad es lo que los competidores esquivan. Claude Code no es perfecto; conocer sus puntos débiles de antemano te ayuda a proteger los lugares correctos.

• Imports alucinados / versión equivocada de librería. Puede importar de un paquete que no has instalado, o usar la API de una versión antigua (por ejemplo, un patrón de React Query v4 mientras tu proyecto está en v5). Protección: fija las versiones en CLAUDE.md y déjalo ejecutar typecheck de inmediato: un import roto aflora al instante.
• Sobreingeniería. Un formulario simple puede terminar con toda una máquina de estados atornillada. Protección: declara la complejidad que quieres ("mantenlo simple, sin librerías nuevas").
• Prop drilling. Pasar props a través de muchas capas en lugar de usar context/composición. Protección: pide una revisión de arquitectura cuando el árbol de componentes se vuelva profundo.
• Olvidar la accesibilidad. Como se dijo arriba: la a11y es fácil de dejar caer por defecto a menos que la pidas.
• APIs de React desactualizadas. A veces recurre a la obtención de datos al estilo antiguo con useEffect en vez de Suspense/Query. Protección: fija el patrón moderno en CLAUDE.md.

El hilo común en cada protección: revisa el diff + ejecuta tests/typecheck en el acto, no aceptes a ciegas. Eso también te mantiene lejos del "AI slop": código que funciona pero es desordenado y difícil de mantener.

Preguntas frecuentes (FAQ)

¿Claude Code ejecuta npm run dev y los tests por su cuenta?

Sí. Claude Code ejecuta comandos de terminal en tu proyecto — arrancando el servidor de desarrollo, corriendo tests, haciendo typecheck — y luego lee la salida para corregirse solo. Adopta el hábito de pedirle que ejecute tests/typecheck después de cada cambio para que los bugs afloren pronto.

¿Puedo usarlo para Next.js o solo para Vite?

Para ambos. Claude Code no está atado a un framework concreto; funciona con Next.js, Vite, Remix o React Native siempre que el proyecto esté bien estructurado. Solo declara el framework en CLAUDE.md para que siga las convenciones correctas (por ejemplo, el App Router de Next.js).

¿Necesito saber React antes de usarlo?

Deberías. Claude Code escribe código rápido, pero necesitas suficiente conocimiento de React/TS para leer el diff, detectar dónde se equivocó y fijar las restricciones correctas. Una principiante total aún puede aprender, pero no aceptes código que no entiendes: esa es la fuente de bugs difíciles de deshacer.

¿Puedo usarlo junto con Cursor o VS Code?

Sí. Claude Code es una CLI y corre junto a cualquier editor. Muchos devs dejan que Claude Code se encargue del trabajo agéntico (generar/editar muchos archivos, correr tests) mientras mantienen VS Code abierto para leer y ajustar a mano. Las dos herramientas se complementan.

¿Cómo evito código desactualizado o versiones equivocadas de librería?

Fija versiones específicas en CLAUDE.md, pídele que ejecute typecheck de inmediato y detalla los patrones modernos que quieres (Suspense, TanStack Query v5). Cuando veas que recurre a una API antigua, señálalo y dile que se actualice según la documentación más reciente.

¿Hay una skill prefabricada para el trabajo de frontend?

Sí. La skill ak-frontend-development de AgentKit (Engineer Kit, agentkit.best) empaqueta patrones modernos de React/TS para que Claude Code los aplique de inmediato, en vez de que configures convenciones en cada proyecto. Este es el AgentKit para Claude Code, que es distinto del AgentKit de OpenAI.

Conclusión + próximos pasos

El flujo se reduce a seis pasos repetibles: instalar + scaffold -> escribir el CLAUDE.md -> generar componentes con prompts bien acotados y revisar siempre el diff -> añadir estado/datos con TanStack Query/Router -> testear y corregir la a11y -> optimizar el rendimiento cuando haga falta. La clave no es "un prompt más largo", sino restricciones claras + revisar el diff + ejecutar los tests en el acto. A continuación: lee diseñar UI/UX con Claude Code para subir el nivel de la interfaz, combínalo con construir una API de backend con Claude Code para una app full-stack y estandariza tu flujo de git con Claude Code cuando hagas commit de los cambios. ¿Todavía configurando tu entorno? Vuelve a instalar Claude Code. Y si construir frontends es tu trabajo diario, un bundle de AgentKit — ahora $149 (de $198) con skills prefabricadas te ahorrará una buena dosis de configuración repetitiva.