Lección 33 de 61 · Módulo 06: 1/16
Técnico Nivel · intermedio

SvelteKit 2 + Svelte 5 + TypeScript + Vite

Por qué te debe importar

Escoger framework no es decisión neutral para un MVP con agentes. SvelteKit le da al agente SSR, file-based routing y tipado nativo sin configuración — menos superficie = menos decisiones = menos errores sutiles que tienes que cazar. La regla: el framework que el agente puede razonar bien es el que minimiza tu tiempo de revisión.

Idea central

Framework que desaparece para que el agente escriba features en vez de pelear con config.

Por qué SvelteKit encaja con agentes

  • File-based routing (file-based-routing): el agente sabe que src/routes/foo/+page.svelte es la ruta /foo. Sin convenciones adicionales.
  • SSR (ssr) por defecto: el agente escribe +page.server.js y sabe que corre en servidor. Separación explícita.
  • TypeScript nativo: el agente detecta errores de tipo antes de entregar código. Menos loops de "corrige este bug".
  • Svelte 5 runes ($state, $derived, $effect): primitivas reactivas explícitas. El agente no necesita adivinar dependencias como en otros frameworks.

Qué NO usar en MVP

  • Svelte 3/4: Svelte 5 es mejor para el agente, mejor DX, y migración es tarea del agente mismo.
  • Frameworks CSS-in-JS propios: Tailwind 4 simplemente funciona y es texto plano que el agente lee limpio.

Setup mínimo

npm create svelte@latest → TypeScript, ESLint, Prettier, Vitest. 30 segundos y estás. Agrega Tailwind con pnpm dlx sv add tailwindcss.

Ejemplos en escalera
✓ Checkpoint

Corre `npm create svelte@latest test-project`, escoge TypeScript. Observa cuántos archivos hay: ~15. Compara mentalmente con el último proyecto Node + Express que armaste. ¿Cuántas horas menos?

Resumen — tres cosas que deberías recordar
  1. SvelteKit minimiza superficie: routing, SSR y TS con cero config explícita.
  2. Svelte 5 runes son primitivas que el agente entiende sin adivinar dependencias.
  3. Menos archivos de config = menos lugares donde el agente se pierde.
Qué sigue
Lección 34 · Setup y prompt Tailwind CSS 4 con @tailwindcss/typography → Continuar