Frontend Developer - Guía de Entorno¶

Esta guía detalla las herramientas necesarias para que Claude Code pueda ayudarte eficazmente en el desarrollo frontend.

Resumen de Capacidades¶

Con el entorno correctamente configurado, Claude Code podrá:

Capacidad	Herramientas Requeridas
Ejecutar servidor de desarrollo	Node.js, pnpm/npm
Compilar y bundlear	Vite, Webpack, Turbopack
Ejecutar tests	Vitest, Jest, Playwright
Verificar tipos	TypeScript
Formatear código	Prettier, ESLint
Previsualizar componentes	Storybook
Analizar bundle	webpack-bundle-analyzer

Herramientas Base (Obligatorias)¶

Node.js y Gestores de Paquetes¶

# Instalar Node.js LTS (ver guía backend/nodejs.md para detalles)
# Windows
winget install OpenJS.NodeJS.LTS

# macOS
brew install node@22

# Verificar
node --version  # 20.x o 22.x
npm --version

# Instalar pnpm (recomendado)
corepack enable
corepack prepare pnpm@latest --activate
pnpm --version

Git y Control de Versiones¶

git --version  # 2.40+
gh --version   # GitHub CLI (opcional pero útil)

Elige tu Framework¶

React / Next.js

React 19, Next.js 15, RSC, Server Actions

Configurar entorno React
Vue / Nuxt

Vue 3, Composition API, Nuxt 3

Configurar entorno Vue
Angular

Angular 17+, Signals, Standalone Components

Configurar entorno Angular
Svelte / SvelteKit

Svelte 5, SvelteKit, Runes

Configurar entorno Svelte

Herramientas Comunes¶

Build Tools¶

# Vite (recomendado para React, Vue, Svelte)
pnpm create vite@latest my-app

# Crear proyectos con frameworks
pnpm create vite my-react-app -- --template react-ts
pnpm create vite my-vue-app -- --template vue-ts

# Next.js
pnpm create next-app@latest

# Nuxt
pnpm create nuxt@latest

# Angular CLI
npm install -g @angular/cli
ng new my-app

TypeScript¶

# Instalar TypeScript
pnpm add -D typescript

# Configuración recomendada
pnpm add -D @tsconfig/strictest

# tsconfig.json
{
  "extends": "@tsconfig/strictest/tsconfig.json",
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",  // Para React
    "strict": true,
    "noEmit": true
  },
  "include": ["src"]
}

Linting y Formateo¶

# ESLint
pnpm add -D eslint @eslint/js typescript-eslint

# Prettier
pnpm add -D prettier eslint-config-prettier

# Biome (alternativa todo-en-uno)
pnpm add -D @biomejs/biome
pnpm biome init

# Ejecutar
pnpm eslint src/
pnpm prettier --write src/

CSS / Styling¶

# Tailwind CSS
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# CSS Modules (incluido en Vite/Next.js)
# Archivos: Component.module.css

# Styled Components
pnpm add styled-components
pnpm add -D @types/styled-components

# Emotion
pnpm add @emotion/react @emotion/styled

Testing¶

Vitest (Recomendado para Vite)¶

pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom

# vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
  },
})

# Ejecutar
pnpm vitest
pnpm vitest run
pnpm vitest --coverage

Playwright (E2E)¶

# Instalar
pnpm create playwright

# Ejecutar tests
pnpm playwright test

# Con UI
pnpm playwright test --ui

# Generar tests
pnpm playwright codegen localhost:3000

Storybook (Documentación de componentes)¶

# Inicializar
pnpm dlx storybook@latest init

# Ejecutar
pnpm storybook

# Build estático
pnpm build-storybook

IDE y Extensiones¶

Visual Studio Code¶

# Extensiones obligatorias
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss

# Para React
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension styled-components.vscode-styled-components

# Para Vue
code --install-extension Vue.volar
code --install-extension Vue.vscode-typescript-vue-plugin

# Para Angular
code --install-extension Angular.ng-template

# Testing
code --install-extension vitest.explorer
code --install-extension ms-playwright.playwright

# Utilidades
code --install-extension christian-kohler.path-intellisense
code --install-extension usernamehw.errorlens
code --install-extension formulahendry.auto-rename-tag
code --install-extension naumovs.color-highlight

settings.json recomendado:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  }
}

Navegadores y DevTools¶

Navegadores de Desarrollo¶

# Chrome (principal para desarrollo)
winget install Google.Chrome  # Windows
brew install --cask google-chrome  # macOS

# Firefox Developer Edition
winget install Mozilla.Firefox.DeveloperEdition

# Edge (testing Chromium alternativo)
# Preinstalado en Windows

Extensiones de Navegador¶

React: - React Developer Tools - Redux DevTools

Vue: - Vue.js devtools

Angular: - Angular DevTools

General: - Lighthouse - Accessibility Insights - JSON Formatter - ColorZilla

Performance y Bundle Analysis¶

# Vite - análisis de bundle
pnpm add -D rollup-plugin-visualizer

# vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'stats.html',
      open: true,
    }),
  ],
})

# Webpack (Next.js, CRA)
pnpm add -D @next/bundle-analyzer
# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
ANALYZE=true pnpm build

# Lighthouse CI
pnpm add -D @lhci/cli
lhci autorun

Comandos que Claude Code Ejecutará¶

# Desarrollo
pnpm dev
pnpm start
npm run dev

# Build
pnpm build
pnpm preview

# Testing
pnpm test
pnpm vitest
pnpm playwright test

# Linting
pnpm lint
pnpm lint:fix
pnpm format

# Type checking
pnpm tsc --noEmit

# Storybook
pnpm storybook
pnpm build-storybook

# Análisis
ANALYZE=true pnpm build

Verificación del Entorno¶

#!/bin/bash
# verify-frontend-env.sh

echo "=== Verificación Entorno Frontend ==="

echo -e "\n--- Node.js ---"
node --version

echo -e "\n--- Package Managers ---"
npm --version
pnpm --version 2>/dev/null || echo "pnpm no instalado"

echo -e "\n--- TypeScript ---"
npx tsc --version 2>/dev/null || echo "TypeScript no instalado"

echo -e "\n--- Build Tools ---"
npx vite --version 2>/dev/null || echo "Vite no instalado globalmente"

echo -e "\n--- Testing ---"
npx vitest --version 2>/dev/null || echo "Vitest no instalado"
npx playwright --version 2>/dev/null || echo "Playwright no instalado"

echo -e "\n--- Browsers ---"
google-chrome --version 2>/dev/null || echo "Chrome no encontrado en PATH"
firefox --version 2>/dev/null || echo "Firefox no encontrado en PATH"

echo -e "\n=== Verificación Completa ==="

Troubleshooting¶

"ENOENT: no such file or directory, open 'package.json'"¶

# Asegúrate de estar en el directorio correcto
ls package.json
# Si no existe, inicializa el proyecto
pnpm init

Puerto ya en uso¶

# Cambiar puerto en Vite
pnpm vite --port 3001

# O en package.json
"dev": "vite --port 3001"

# Encontrar proceso en puerto
# Windows
netstat -ano | findstr :3000
# Linux/macOS
lsof -i :3000

Errores de ESLint/TypeScript¶

# Limpiar cache
rm -rf node_modules/.cache
pnpm eslint --cache-location node_modules/.cache/eslint --fix .

Siguiente Paso¶

Selecciona tu framework principal para ver la guía específica: