Esta guía te lleva paso a paso por la configuración de Claude (app de escritorio o web) con servidores MCP para el desarrollo profesional con Svelte 5. Al finalizar, Claude podrá leer y escribir archivos directamente en tu proyecto, consultar tu base de datos de Supabase para obtener contexto, acceder a documentación actualizada de Svelte 5 y validar el código antes de enviártelo.

Lo que vamos a construir

Aquí está la configuración completa:

┌─────────────────────────────────────────────────────────────┐
│  Claude Desktop / Claude.ai                                 │
│                                                             │
│  Connected MCP Servers:                                     │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐           │
│  │ Svelte MCP  │ │ Context-    │ │ Supabase    │           │
│  │             │ │ Coder       │ │             │           │
│  │ • Docs      │ │ • Read files│ │ • Query DB  │           │
│  │ • Autofixer │ │ • Write     │ │ • Schema    │           │
│  │ • Validate  │ │ • Edit      │ │             │           │
│  └─────────────┘ └─────────────┘ └─────────────┘           │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  Your Svelte Project                                        │
│  Claude reads/writes files directly here                    │
└─────────────────────────────────────────────────────────────┘

Dos formas de usar Claude con MCP

Hay dos maneras principales de conectar Claude a servidores MCP, y la configuración difiere en cada caso:

Plataforma	Tipo de MCP	Método de configuración
Claude Desktop (app)	Servidores MCP locales	Editar `claude_desktop_config.json`
Claude.ai (web)	Servidores MCP remotos	Configuración → Conectores

Esta guía cubre ambos enfoques.

Requisitos previos

Antes de comenzar, asegúrate de tener Node.js 18+ instalado (ejecuta node --version para verificarlo), un proyecto de Svelte/SvelteKit con el que trabajar, y ya sea la app de Claude Desktop o una cuenta paga de Claude.ai (Pro, Max, Team o Enterprise para conectores web).

Parte 1: Configuración de Claude Desktop

Si estás usando la app de Claude Desktop, sigue esta sección.

Paso 1: Descargar e instalar

Descarga Claude Desktop desde https://claude.ai/download. Está disponible para macOS, Windows y Linux. Después de la instalación, abre la app e inicia sesión con tu cuenta de Anthropic.

Paso 2: Abrir la configuración de desarrollador

Para configurar los servidores MCP, necesitas editar un archivo de configuración JSON. Así puedes acceder a él:

Haz clic en el menú de Claude en la barra de menús de tu sistema (en macOS, esto está en la parte superior de tu pantalla, no dentro de la ventana de la app)
Selecciona "Settings..."
En la ventana de configuración, haz clic en "Developer" en la barra lateral izquierda
Haz clic en el botón "Edit Config"

Esto abre tu archivo claude_desktop_config.json. El archivo se encuentra en:

SO	Ubicación del archivo de configuración
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json`
Linux	`~/.config/Claude/claude_desktop_config.json`

Si el archivo no existe, hacer clic en "Edit Config" lo creará automáticamente.

Paso 3: Agregar servidores MCP a la configuración

Reemplaza el contenido de claude_desktop_config.json con la siguiente configuración. Este ejemplo incluye context-coder para acceso a archivos, Supabase para consultas de base de datos y el Svelte MCP para documentación:

{
	"mcpServers": {
		"context-coder": {
			"command": "npx",
			"args": ["-y", "supergateway", "--streamableHttp", "http://localhost:3001/mcp"]
		},
		"supabase": {
			"command": "npx",
			"args": [
				"-y",
				"@modelcontextprotocol/server-postgres",
				"postgresql://postgres:postgres@127.0.0.1:54322/postgres"
			]
		},
		"svelte": {
			"command": "npx",
			"args": ["-y", "@sveltejs/mcp"]
		}
	}
}

Guarda el archivo después de editarlo.

Paso 4: Iniciar los servicios requeridos

Antes de que Claude pueda usar estos servidores MCP, necesitas iniciar los servicios a los que se conectan.

Para context-coder, abre una terminal en el directorio de tu proyecto Svelte y ejecuta:

cd ~/projects/my-svelte-app
npx context-coder --edit-file-mode

Deberías ver una salida como:

Context-Coder MCP server running on http://localhost:3001/mcp
Working directory: /Users/you/projects/my-svelte-app
Edit mode: enabled

Mantén esta terminal abierta mientras trabajas.

Para Supabase (si lo estás usando), inicia la instancia local de Supabase:

supabase start

Paso 5: Reiniciar Claude Desktop

Cierra Claude Desktop completamente (asegúrate de que no esté ejecutándose en segundo plano) y vuelve a abrirlo. Esto es necesario para que Claude cargue la nueva configuración de servidores MCP.

Paso 6: Verificar la conexión

Después de reiniciar, verás un + (ícono de más) en la esquina inferior izquierda del cuadro de entrada de conversación. Haz clic en este indicador para ver la lista de herramientas disponibles de tus servidores MCP conectados. En la parte inferior verás la opción connectors. Al abrirla, verás los servidores MCP listados. Puedes activarlos o desactivarlos según lo necesites. Para más información sobre esto, consulta la documentación oficial.

Deberías ver herramientas de context-coder, Supabase y Svelte MCP listadas. Si no las ves, revisa tu archivo de configuración en busca de errores de sintaxis y asegúrate de que los servicios estén en ejecución.

Parte 2: Qué hace cada servidor MCP

Aquí hay un desglose de las herramientas que proporciona cada servidor MCP:

Context-Coder (Acceso a archivos)

Este servidor MCP permite que Claude lea y escriba archivos en tu proyecto:

Herramienta	Propósito
`get_codebase`	Leer todo tu proyecto (paginado)
`get_codebase_size`	Verificar el tamaño del proyecto antes de leer
`write_file`	Crear o sobreescribir archivos
`edit_file`	Realizar ediciones puntuales basadas en líneas
`read_file`	Leer un archivo específico
`create_directory`	Crear carpetas
`remove_file`	Eliminar archivos
`execute_command`	Ejecutar comandos de shell

Supabase (Acceso a la base de datos)

Este servidor MCP permite que Claude consulte tu base de datos PostgreSQL:

Herramienta	Propósito
`query`	Ejecutar consultas SQL de solo lectura

Úsalo para explorar tu esquema, consultar datos para obtener contexto, o ayudar a Claude a entender tu modelo de datos.

Svelte MCP (Documentación y validación)

Este servidor MCP proporciona documentación actualizada de Svelte y validación de código:

Herramienta	Propósito
`list-sections`	Listar toda la documentación disponible
`get-documentation`	Obtener documentación sobre temas específicos
`svelte-autofixer`	Validar código Svelte en busca de errores
`playground-link`	Generar URLs de playground para compartir

El svelte-autofixer es especialmente valioso. Claude lo usa para validar el código antes de enviártelo, detectando errores de sintaxis y patrones obsoletos (como la sintaxis de Svelte 4 en proyectos de Svelte 5).

Parte 3: Archivos de configuración del proyecto

Para obtener los mejores resultados de Claude, agrega estos archivos a tu proyecto.

Archivo 1: `PROJECT.md`

Crea PROJECT.md en la raíz de tu proyecto. Esto le proporciona a Claude contexto sobre la arquitectura y los patrones de tu proyecto:

EXAMPLE PROJECT.md

Project: Field Service SaaS

Descripción General

Aplicación de gestión de servicios de campo (similar a Jobber) para pequeños operadores de servicios.

Alcance MVP: Irlanda, sector paisajismo, solo inglés
Objetivo: Flujo de trabajo Clientes → Trabajos → Facturas

Stack Tecnológico

Capa	Elección
Framework	SvelteKit 2.27+
UI	Svelte 5 con Runes
Base de datos	Supabase PostgreSQL
Auth	Supabase Auth
Validación	Valibot
Almacenamiento	Supabase Storage
Pagos	Stripe

Arquitectura

Multi-Tenancy (¡Crítico!)

Cada consulta a la base de datos DEBE filtrar por company_id:

const { data } = await supabase
	.from('clients')
	.select('*')
	.eq('company_id', companyId) // Always required
	.is('deleted_at', null)

Carga de Datos

Necesidad	Usar
Datos iniciales de página, SSR	`+page.server.ts` load
Formulario con validación	Remote Function `form`
Acción de botón	Remote Function `command`
Fetch bajo demanda	Remote Function `query`

Estructura de Archivos

src/routes/(app)/[entity]/
  +page.svelte        # UI
  +page.server.ts     # Initial data (optional)
  data.remote.ts      # Remote Functions

Helper de Auth

// src/lib/server/auth.ts
import { getRequestEvent } from '$app/server'
import { error } from '@sveltejs/kit'

export async function requireAuth() {
	const { locals } = getRequestEvent()
	if (!locals.user) error(401, 'Unauthorized')
	return locals.user
}

export async function getCompanyId() {
	const user = await requireAuth()
	return user.company_id
}

Base de Datos

Tablas

companies, users, clients, jobs, job_services, invoices, invoice_line_items

Convenciones

Todas las tablas: company_id, created_at, updated_at
Borrado lógico: deleted_at (nullable)

Flujos de Estado

Job: Draft → Scheduled → In Progress → Completed → Invoiced

Invoice: Draft → Sent → Viewed → Paid / Overdue

Reglas de Negocio

Impuestos (Irlanda)

IVA estándar: 23%

Precios

Starter: €29/mes (50 clientes, 100 trabajos/mes)
Pro: €59/mes (ilimitado)

Definiciones de Tipos

// src/app.d.ts
declare global {
	namespace App {
		interface Locals {
			user: {
				id: string
				email: string
				company_id: string
				role: 'owner' | 'admin' | 'employee' | 'viewer'
			} | null
		}
	}
}
export {}

Lista de Verificación MVP

Configuración de Supabase
CRUD de Clientes
Trabajos con servicios
Generación de facturas
Generación de PDF
Suscripciones con Stripe

Notas para Claude

Usar runes de Svelte 5
Siempre filtrar por company_id
Usar Valibot para validación
Ejecutar svelte-autofixer antes de enviar código

Archivo 2: `.cocoignore`

En la documentación de context-coder puedes ver que es posible crear .cocoignore en la raíz de tu proyecto para excluir archivos que no son necesarios para el contexto. Esto mantiene el contexto pequeño y enfocado:

# Dependencies
node_modules/

# Build outputs
.svelte-kit/
build/
dist/

# Environment files
.env
.env.*

# Lock files
package-lock.json
pnpm-lock.yaml

# Large assets
static/images/
static/fonts/

# IDE
.vscode/
.idea/

Parte 5: agregar Prompt para Claude

Ahora que hemos establecido nuestra conexión entre Claude y nuestro proyecto usando servidores MCP y hemos agregado los archivos de contexto del proyecto, es momento de darle a Claude instrucciones sobre cómo construir nuestro proyecto.

Abrir la app de Claude
Crear un nuevo proyecto
Nombrarlo "Field Service SaaS Platform"
En las instrucciones, escribir tu tarea como en el ejemplo a continuación:

EJEMPLO - INSTRUCCIONES

You are helping build a Field Service SaaS platform. Full spec is in project knowledge.

## Svelte MCP Tools Available

You have access to Svelte MCP tools. Use them:

- **list-sections** — Find available docs
- **get-documentation** — Fetch docs for specific topics
- **svelte-autofixer** — Validate Svelte code before sending (use this!)
- **playground-link** — Generate shareable playground

When writing Svelte code:
1. Use svelte-autofixer to check code before sending
2. Look up docs if unsure about APIs
3. Don't guess Svelte 5 syntax — verify it

## Project Constraints

- SvelteKit + Remote Functions (no separate backend)
- Svelte 5 runes (not stores)
- Supabase for everything
- Multi-tenant: always filter by company_id
- MVP: Ireland, Landscaping (as initial service), English

En el proyecto "files", agrega el prompt como archivo o pega tu texto directamente. Esto le da a Claude instrucciones detalladas para construir la plataforma:

EJEMPLO - PROMPT

Plataforma SaaS de Servicios de Campo - Guía de Desarrollo Integral

Quiero construir una plataforma SaaS de servicios de campo similar a Jobber, orientada a pequeños operadores de servicios (paisajistas, plomeros, electricistas) comenzando en Irlanda, con soporte futuro para múltiples países, oficios e idiomas. La plataforma debe permitir a los usuarios gestionar clientes, trabajos, servicios personalizados, campos dinámicos, y generar facturas legales con cálculos de impuestos, además de administrar planes de suscripción con restricción de capacidades. El objetivo es alcanzar ~€5,000/mes de ingresos.

Quiero que actúes como un experto en arquitectura y desarrollo full-stack de SaaS. Tu objetivo es generar orientación práctica paso a paso, fragmentos de código, esquemas y patrones de diseño para implementar esta plataforma.

Stack Tecnológico

Base de datos: PostgreSQL (Supabase) con Row Level Security
Auth: Supabase Auth
Backend: SvelteKit Remote Functions (no se necesita servidor de API separado)
Frontend: SvelteKit con Svelte 5 Runes
Validación: Valibot (más liviano que Zod, soporte nativo para Remote Functions)
Pagos: Stripe (suscripciones + cobro de pagos)
Almacenamiento de archivos: Supabase Storage
Email: Resend o Postmark (vía Supabase Edge Functions)
Generación de PDF: Supabase Edge Functions con pdf-lib
Hosting: Vercel o Cloudflare Pages

1. Dominio Principal y Modelo de Datos

Proporcionar un esquema PostgreSQL completamente normalizado para:
- companies, users, user_roles
- clients, client_contacts
- quotes, quote_services
- jobs, job_services, job_service_attributes
- recurring_job_templates
- invoices, invoice_line_items, invoice_tax
- payments (pagos de clientes, no suscripciones)
- subscriptions, subscription_plans
- files/attachments
- audit_logs
Explicar el diseño multi-tenant usando company_id para el alcance con Row Level Security (RLS) en Supabase
Mostrar cómo almacenar snapshots para facturas y presupuestos usando JSONB para garantizar la inmutabilidad
Proporcionar ejemplos de campos personalizados por servicio, incluyendo tipos de campo (text, number, boolean, select, date, file), validación y almacenamiento
Incluir estrategia de eliminación suave (timestamps deleted_at) para recuperación de datos

2. Autenticación y Autorización

Implementar el flujo de autenticación usando Supabase Auth:
- Registro con email/contraseña y verificación de email
- Opción de inicio de sesión con magic link
- Flujo de restablecimiento de contraseña
- Gestión de sesiones y tokens de refresco
Diseñar el control de acceso basado en roles (RBAC):
- Roles: Owner, Admin, Employee, Viewer
- Matriz de permisos para cada entidad (clientes, trabajos, facturas, configuraciones)
- Políticas de Row Level Security en PostgreSQL
Mostrar el flujo de invitación para agregar miembros del equipo a una empresa
Mostrar cómo acceder al contexto de autenticación en Remote Functions usando getRequestEvent()

3. Backend con SvelteKit Remote Functions

Usar SvelteKit Remote Functions (disponibles desde SvelteKit 2.27) como la capa principal del backend. Las Remote Functions proporcionan RPC con tipado seguro sin necesidad de construir endpoints de API separados.

Tipos de Remote Functions

Mostrar ejemplos usando los cuatro tipos de remote functions:

query - Leer datos (clientes, trabajos, facturas)
query.batch - Lecturas en lote que resuelven problemas n+1
form - Envíos de formularios con validación integrada
command - Mutaciones desde manejadores de eventos
prerender - Datos de configuración estáticos (países, planes, plantillas de oficios)

Estructura de Archivos

src/routes/
  (app)/
    clients/
      +page.svelte
      data.remote.ts      ← Client operations
    jobs/
      +page.svelte
      [id]/
        +page.svelte
      data.remote.ts      ← Job operations
    invoices/
      +page.svelte
      data.remote.ts      ← Invoice operations
    settings/
      data.remote.ts      ← Company settings

Ejemplos de Remote Functions

Proporcionar archivos .remote.ts completos para:

Clients: Operaciones CRUD con alcance por empresa
Jobs: Creación con servicios, transiciones de estado, programación
Invoices: Generación desde trabajo, cálculo de impuestos, creación de snapshot
Quotes: CRUD, conversión a trabajo
Recurring Jobs: Gestión de plantillas, generación de trabajos
Payments: Registro de pago, historial de pagos
Reports: Ingresos, estadísticas de trabajos (solo plan Pro)

Validación con Valibot

Mostrar la validación de esquemas con Valibot integrada con Remote Functions:

import * as v from 'valibot'
import { form } from '$app/server'

export const createClient = form(
	v.object({
		name: v.pipe(v.string(), v.nonEmpty('Name is required')),
		email: v.pipe(v.string(), v.email('Invalid email')),
		phone: v.optional(v.string())
	}),
	async (data) => {
		// Implementation here
	}
)

Contexto de Auth en Remote Functions

Mostrar cómo usar getRequestEvent() para:

Obtener el usuario/empresa actual
Alcance de datos multi-tenant
Verificaciones de permisos

import { getRequestEvent } from '$app/server'
import { error } from '@sveltejs/kit'

async function requireAuth() {
	const { locals } = getRequestEvent()
	if (!locals.user) error(401, 'Unauthorized')
	return locals.user
}

Mutaciones Single-Flight

Mostrar patrones de UI optimista con withOverride:

await addLike(item.id).updates(getLikes(item.id).withOverride((n) => n + 1))

Supabase Edge Functions

Usar Supabase Edge Functions únicamente para:

Generación de PDF (facturas, presupuestos)
Webhooks de Stripe
Trabajos programados (generación recurrente de facturas)
Envío de emails

4. Frontend (SvelteKit + Svelte 5 Runes)

Características Requeridas de Svelte 5

Usar estas características modernas de Svelte 5:

$state - Estado reactivo
$state.raw - Para arrays/objetos grandes (rendimiento)
$derived - Valores computados
$derived overrides - UI optimista (Svelte 5.25+)
$effect - Efectos secundarios
$effect.pending() - Indicadores de carga asíncrona (Svelte 5.36+)
$props - Props de componentes
$props.id() - IDs únicos para accesibilidad de formularios (Svelte 5.20+)
await en templates - Renderizado asíncrono directo (Svelte 5.36+, experimental)
<svelte:boundary> - Límites de error y estados de carga (Svelte 5.3+)

Estructura de Carpetas de SvelteKit

src/
  routes/
    (auth)/               # login, signup, forgot-password
      login/
      signup/
      forgot-password/
    (app)/                # authenticated app routes
      +layout.svelte      # app shell with nav
      +layout.server.ts   # auth guard
      dashboard/
      clients/
      quotes/
      jobs/
      invoices/
      calendar/
      settings/
      reports/
  lib/
    components/
      ui/                 # buttons, inputs, modals, cards
      forms/              # FieldRenderer, dynamic forms
      invoices/           # invoice preview, PDF viewer
      calendar/           # job scheduling
    server/
      db.ts               # Supabase client
      auth.ts             # Auth helpers with getRequestEvent
      tax.ts              # Tax calculation
      capabilities.ts     # Plan capability checks
    utils/
    config/
      trades/             # Trade templates (prerender)
      countries/          # Country configs (prerender)
      plans/              # Subscription plans (prerender)
    i18n/

Componente FieldRenderer Dinámico

Proporcionar un componente FieldRenderer que:

Renderice formularios basados en plantillas de servicios
Soporte todos los tipos de campo (text, number, boolean, select, date, textarea, file)
Se integre con los campos form de Remote Functions
Use $props.id() para etiquetas de formulario accesibles
Maneje la validación con visualización de errores

Uso de Remote Functions en Componentes

Mostrar patrones para:

Lectura de datos con await en templates:

<script>
	import { getClients } from './data.remote'
</script>

<svelte:boundary>
	<ul>
		{#each await getClients() as client}
			<li>{client.name}</li>
		{/each}
	</ul>

	{#snippet pending()}
		<p>Loading clients...</p>
	{/snippet}

	{#snippet failed(error, reset)}
		<p>Error: {error.message}</p>
		<button onclick={reset}>Retry</button>
	{/snippet}
</svelte:boundary>

Envíos de formularios con validación:

<script>
	import { createClient } from './data.remote'
</script>

<form {...createClient}>
	<label>
		Name
		<input {...createClient.fields.name.as('text')} />
		{#each createClient.fields.name.issues() as issue}
			<span class="error">{issue.message}</span>
		{/each}
	</label>

	<button>Create</button>
</form>

Comandos con estado de carga:

<script>
	import { deleteClient, getClients } from './data.remote'

	let deleting = $state(false)

	async function handleDelete(id: string) {
		deleting = true
		try {
			await deleteClient(id).updates(getClients())
		} finally {
			deleting = false
		}
	}
</script>

Patrones de Gestión de Estado

Mostrar patrones de runes de Svelte 5 para:

Estado de auth usando el objeto de página $app/state
Contexto de empresa actual
Capacidades del plan con el helper can('feature')
i18n con cambio de idioma reactivo

Componentes a Construir

Proporcionar componentes para:

Vista previa de presupuesto/factura - Lectura de snapshot JSON
Vista de calendario - Programación de trabajos con arrastrar y soltar
Carga de archivos - Arrastrar y soltar, progreso, vista previa
Búsqueda/filtro - Búsqueda global, filtrado de listas
Dashboard - Widgets de métricas clave
Tablas de datos - Listas ordenables y filtrables

Diseño Responsivo para Móviles

Incluir consideraciones mobile-first:

Controles adaptados al tacto
Navegación responsiva
Indicadores de UI con conciencia de estado offline

5. Campos Personalizados / Plantillas por Oficio

Mostrar la estructura de configuración de plantillas por oficio para Paisajismo, Plomería y Electricistas
Usar remote functions prerender para configuraciones de oficios estáticas:

import { prerender } from '$app/server'
import { tradeTemplates } from '$lib/config/trades'

export const getTradeTemplate = prerender(v.string(), async (tradeId) => tradeTemplates[tradeId])

Incluir atributos dinámicos para servicios con:
- Definiciones de tipo de campo
- Reglas de validación (required, min, max, pattern)
- Visibilidad condicional
- Valores por defecto
- Tipos de unidades (horas, m², ítems)
Explicar cómo agregar nuevos campos por oficio sin migración de BD (basado en configuración)
Mostrar esquemas Valibot compartidos para validación en frontend y backend

6. Flujo de Cotizaciones y Trabajos

Proveer flujo de cotizaciones:
- Crear cotización con servicios y precios
- Generación de PDF (Edge Function)
- Correo electrónico al cliente
- Convertir cotización aprobada en trabajo
Proveer flujo de trabajos:
- Estados del trabajo: Borrador → Programado → En Progreso → Completado → Facturado
- Asignación a miembros del equipo
- Programación con fecha/hora
- Notas y fotos del trabajo
- Lista de verificación de finalización
Mostrar trabajos recurrentes:
- Definición de plantilla (frecuencia, servicios, cliente)
- Generación automática de trabajos (tarea programada de Edge Function)
- Omitir/reprogramar ocurrencias individuales

7. Facturación e Impuestos

Mostrar flujo de trabajo → factura usando Remote Functions:
- Validaciones previas a la factura
- Crear factura con instantánea
- Transiciones de estado: Borrador → Enviada → Vista → Pagada → Vencida
- Bloquear facturas después de enviar
- Numeración secuencial de facturas por empresa
Explicar cálculo de impuestos según reglas del país:
- Tasas de IVA de Irlanda (estándar 23%, reducida 13.5%, cero)
- Manejo de exenciones fiscales
- Usar prerender para configuraciones fiscales por país
Proveer instantánea de factura almacenada como JSONB:
- Datos completos del cliente al momento de la factura
- Todas las líneas con precios, cantidades e impuestos
- Datos e identidad visual de la empresa
- Condiciones de pago y datos bancarios
Mostrar registro de pagos:
- Entrada manual de pagos
- Enlaces de pago de Stripe
- Pagos parciales
Mostrar generación de PDF mediante Supabase Edge Function

8. Precios y Suscripciones

Proveer planes con mapas de capacidades:

// Use prerender for static plan config
export const getPlans = prerender(async () => ({
	starter: {
		price: 29,
		users: 1,
		clients: 50,
		jobsPerMonth: 20,
		features: ['invoicing', 'clients', 'jobs']
	},
	pro: {
		price: 79,
		users: 5,
		clients: -1, // unlimited
		jobsPerMonth: -1,
		features: ['invoicing', 'clients', 'jobs', 'quotes', 'recurring', 'reports', 'branding']
	}
}))

Mostrar aplicación centralizada de capacidades:
- can(company, 'feature') - verificación booleana
- limit(company, 'resource') - límite numérico
- usage(company, 'resource') - conteo de uso actual
- Implementar en $lib/server/capabilities.ts
Mostrar aplicación de límites suaves:
- Backend: Verificar en Remote Functions antes de las operaciones
- Frontend: Deshabilitar UI, mostrar CTA de actualización
Mostrar integración con Stripe:
- Creación de sesión de pago (comando Remote Function)
- Manejo de webhooks (Supabase Edge Function)
- Mapeo y sincronización de planes
- Manejo de período de prueba

9. Notificaciones

Diseñar sistema de notificaciones para:
- Factura enviada al cliente (correo electrónico)
- Pago recibido (correo electrónico, en app)
- Recordatorio de trabajo (correo electrónico)
- Cotización por vencer (correo electrónico)
- Pago de suscripción fallido (correo electrónico)
- Miembro del equipo invitado (correo electrónico)
Usar Supabase Edge Functions para envío de correos con Resend/Postmark
Mostrar estructura de plantillas de correo electrónico
Incluir preferencias de notificación por usuario

10. Portal del Cliente

Diseñar portal de cliente liviano (funcionalidad de Fase 2):
- El cliente visualiza sus cotizaciones, trabajos y facturas
- Aprobar cotizaciones en línea
- Pagar facturas mediante Stripe
- Sin inicio de sesión requerido (tokens de magic link seguros)
Mostrar implementación de acceso seguro basado en tokens

11. Flujo de Incorporación

Proveer flujo de incorporación paso a paso (objetivo: primera factura en 5 minutos):
1. Registro con correo electrónico + nombre de empresa
2. Pantalla de bienvenida con propuesta de valor
3. Agregar primer cliente (formulario simplificado)
4. Crear primer trabajo con servicio de muestra precargado
5. Marcar trabajo como completado
6. Vista previa de factura (¡momento wow!)
7. Enviar factura o descargar PDF
8. Mostrar CTA de actualización al alcanzar límites
Usar <svelte:boundary> para estados de carga fluidos durante la incorporación
Incluir indicador de progreso y opciones para omitir pasos
Incluir opción de datos de muestra para explorar con contenido de demostración
Incluir mejores prácticas de UI/UX para conversión:
- Formularios de una sola columna
- Validación en línea con campos de formulario Remote Function
- CTAs claros
- Momentos de celebración

12. Soporte Multi-País e Multi-Idioma

Proveer estructura basada en configuración para países usando prerender:

export const getCountryConfig = prerender(
	v.string(),
	async (countryCode) => countryConfigs[countryCode]
)

Mostrar implementación de i18n:
- Traducciones de etiquetas de UI
- Formato de fechas y números
- Etiquetas de campos en plantillas de oficios
- Plantillas de facturas por locale
Explicar cómo agregar futuros oficios y países sin cambios de esquema

13. Archivos y Adjuntos

Diseñar sistema de almacenamiento de archivos:
- Supabase Storage para alojamiento de archivos
- Asociación de archivos con entidades (trabajos, facturas, clientes)
- Compresión de imágenes para fotos
Mostrar componente de carga de archivos con:
- Arrastrar y soltar
- Selección de múltiples archivos
- Indicador de progreso usando $effect.pending()
- Vista previa para imágenes
Incluir límites de almacenamiento por plan de suscripción

14. Búsqueda y Filtrado

Implementar funcionalidad de búsqueda:
- Búsqueda global usando función remota query
- Búsqueda de texto completo en PostgreSQL
- Acceso rápido a elementos recientes
Mostrar filtrado y ordenamiento para vistas de lista con estado reactivo $derived

15. Reportes y Análisis

Proveer reportes principales (solo plan Pro):
- Ingresos por período
- Trabajos completados por estado
- Facturas pendientes / reporte de antigüedad
- Valor de vida del cliente
Mostrar widgets del panel con <svelte:boundary> para estados de carga
Incluir funcionalidad de exportar a CSV

16. Seguridad y Cumplimiento

Implementar mejores prácticas de seguridad:
- Validación de entradas mediante Valibot en todas las Remote Functions
- Seguridad a nivel de fila en PostgreSQL
- Protección CSRF (integrada en Remote Functions)
- Limitación de tasa en autenticación
Abordar cumplimiento del RGPD (requerido para Irlanda/UE):
- Requisitos de política de privacidad
- Comando de exportación de datos
- Comando de eliminación de datos
- Consentimiento de cookies
Mostrar registro de auditoría:
- Quién hizo qué y cuándo
- Cambios en datos sensibles
- Historial de inicios de sesión

17. Manejo de Errores y Monitoreo

Implementar manejo de errores con <svelte:boundary>:
- Límites de error por sección
- Mensajes de error amigables para el usuario
- Funcionalidad de reintento con reset
Mostrar el hook handleValidationError para errores de validación de Remote Function
Configurar monitoreo:
- Seguimiento de errores (Sentry)
- Registro estructurado
- Monitoreo de disponibilidad

18. Arquitectura del Proyecto y Flujo de Desarrollo

Mostrar estructura completa del proyecto:

/
  src/
    routes/           # SvelteKit routes + Remote Functions
    lib/
      components/     # Svelte 5 components
      server/         # Server-only modules
      config/         # Trade/country/plan configs
      i18n/           # Translations
    hooks.server.ts   # Auth, error handling
    hooks.client.ts   # Client error handling
    app.d.ts          # Type definitions
  supabase/
    migrations/       # Database migrations
    functions/        # Edge Functions (PDF, webhooks, scheduled)
    seed.sql          # Development seed data
  static/
  tests/

Incluir recomendaciones de CI/CD:
- GitHub Actions para pruebas y despliegue
- Despliegues de vista previa para PRs
- Estrategia de migración de base de datos
Incluir estrategia de pruebas:
- Pruebas unitarias para lógica de negocio
- Pruebas de componentes con Svelte Testing Library
- Pruebas E2E para flujos críticos (Playwright)

19. Hoja de Ruta del MVP al Lanzamiento

Fase 1: MVP Central (Semanas 1-6) - Irlanda, Paisajismo, Inglés

Semana 1-2: Fundación

Esquema de base de datos y configuración de Supabase
Flujo de autenticación con Supabase Auth
Gestión de empresa y usuarios
CRUD básico de clientes con Remote Functions

Semana 3-4: Trabajos y Servicios

Plantilla de oficio para Paisajismo
Creación de trabajos con campos dinámicos
Flujo de estados del trabajo
Vista de calendario básica

Semana 5-6: Facturación

Generación de factura desde trabajo
Cálculo de impuestos (IVA de Irlanda)
Generación de PDF (Edge Function)
Envío de factura por correo electrónico
Flujo de incorporación

Fase 2: Pagos y Pulido (Semanas 7-10)

Semana 7-8: Suscripciones

Integración con Stripe
Aplicación de capacidades por plan
Flujos de actualización/degradación

Semana 9-10: Pulido y Lanzamiento

Corrección de errores y mejoras de UX
Manejo de errores y monitoreo
Página de destino
Lanzamiento beta a 10-20 usuarios

Fase 3: Crecimiento (Semanas 11-16)

Trabajos recurrentes
Módulo de cotizaciones
Portal del cliente
Oficios adicionales (Plomería, Electricidad)
Reportes y análisis
Países adicionales (Reino Unido)

Hitos de Ingresos

Cronograma	Objetivo
Mes 1-2	10 usuarios beta (gratuito)
Mes 3	20 clientes pagos × €30 = €600/mes
Mes 6	80 clientes × €45 promedio = €3.600/mes
Mes 9	130 clientes × €50 promedio = €6.500/mes

Requisitos de Configuración

svelte.config.js

Habilitar características experimentales:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		experimental: {
			remoteFunctions: true
		}
	},
	compilerOptions: {
		experimental: {
			async: true // Enable await in templates
		}
	}
}

export default config

Requisitos de Salida

Proporciona fragmentos de código usando:
- SQL para el esquema de base de datos
- TypeScript para todo el código
- Sintaxis de runes de Svelte 5 ($state, $derived, $effect, $props)
- Remote Functions (query, form, command, prerender)
- Valibot para esquemas de validación
Sin patrones heredados:
- Sin stores de Svelte (usar runes)
- Sin funciones de carga +page.server.ts donde las Remote Functions funcionen mejor
- Sin rutas de API separadas (usar Remote Functions)
Proporciona instrucciones claras y accionables
Incluye tipos/interfaces de TypeScript para todas las entidades principales
Estructura la respuesta para que un desarrollador independiente pueda seguirla de principio a fin

Notas Adicionales

Prioriza la simplicidad y mantenibilidad
Usa las Remote Functions como capa de datos principal
Usa las Supabase Edge Functions solo para webhooks, PDFs y tareas programadas
Asegúrate de que todos los flujos sean seguros para multi-tenant con RLS
Enfócate en el MVP para Irlanda, solo inglés, Paisajismo primero
Planifica futuros oficios, países e idiomas mediante configuración
Diseño mobile-first para trabajadores en campo
Considera el soporte sin conexión como mejora futura

Tu tarea es actuar como arquitecto e ingeniero de productos SaaS full-stack y generar una guía completa con ejemplos y fragmentos de código para construir esta plataforma usando las últimas características de Svelte 5 y SvelteKit. Hazla lo suficientemente detallada para que un desarrollador independiente pueda seguirla de principio a fin y lanzar un MVP funcional que pueda escalar posteriormente.

Parte 6: Flujo de Trabajo Diario

Así es como usar la configuración día a día.

Iniciando Tu Sesión (Claude Desktop)

Primero, abre tu proyecto en una terminal e inicia context-coder:

cd ~/projects/my-svelte-app
npx context-coder --edit-file-mode

Si usas Supabase, inícialo en otra terminal:

supabase start

Luego abre Claude Desktop. Los servidores MCP se conectarán automáticamente. Puedes verificarlo haciendo clic en el ícono de controles deslizantes en el área de entrada para ver las herramientas disponibles.

Iniciando Tu Sesión (Claude)

Abre la aplicación Claude y comienza a chatear — Claude usará las herramientas automáticamente cuando sea relevante. Si la conexión entre tu proyecto local y la aplicación Claude no se establece, verás un mensaje de error al intentar usar las herramientas en forma de notificaciones emergentes.

Prompts de Ejemplo

Aquí hay algunos prompts de ejemplo para probar:

Leer y entender el proyecto:

P: "Read my codebase and summarize the structure"

Crear una nueva página:

P: "Create a clients list page at src/routes/(app)/clients with search and pagination"

Consultar la base de datos para contexto:

P: "Show me the clients table schema, then create a TypeScript type for it"

Corregir un problema:

P: "Read src/routes/(app)/dashboard/+page.svelte and fix the TypeScript errors"

Validar código:

P: "Use svelte-autofixer to validate the component I just asked you to create"

Finalizando Tu Sesión

Cuando termines de trabajar, detén context-coder presionando Ctrl+C en su terminal. Si usas Supabase, ejecuta supabase stop. Luego cierra Claude Desktop o tu navegador.

Parte 6: Solución de Problemas

El Servidor MCP No Aparece (Claude Desktop)

Si el ícono de controles deslizantes no aparece o no muestra herramientas:

Asegúrate de haber reiniciado Claude Desktop completamente después de editar la configuración
Verifica que tu claude_desktop_config.json tenga sintaxis JSON válida (sin comas finales)
Comprueba que los servicios estén en ejecución (la terminal de context-coder debe mostrar "running")
Revisa los registros en busca de errores:

# macOS/Linux
tail -n 20 -f ~/Library/Logs/Claude/mcp*.log

# Windows
type %APPDATA%\Claude\logs\mcp.log

Context-Coder No Se Conecta

Si Claude no puede acceder a tus archivos:

Verifica que context-coder esté en ejecución en el directorio correcto (tu proyecto de Svelte)
Asegúrate de que esté ejecutándose en el puerto 3001
Revisa los mensajes de error en la terminal de context-coder

La Conexión con Supabase Falla

Si las consultas a la base de datos no funcionan:

Asegúrate de que Supabase esté en ejecución: supabase status
Verifica que la cadena de conexión en tu configuración coincida con tu entorno
Comprueba el puerto (el valor predeterminado es 54322 para la base de datos local de Supabase)

Claude Genera Código de Svelte 4

Si Claude usa sintaxis heredada como export let, $: o on:click:

Agrega a PROJECT.md: "Always use Svelte 5 runes, never legacy syntax"
Solicita explícitamente: "Use svelte-autofixer to validate this code"
Recuérdale a Claude: "Convert this to Svelte 5 runes syntax"

Parte 7: Referencia Rápida

Ubicación del Archivo de Configuración (Claude Desktop)

SO	Ruta
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json`
Linux	`~/.config/Claude/claude_desktop_config.json`

Ubicación de los Archivos de Registro (Claude Desktop)

SO	Ruta
macOS	`~/Library/Logs/Claude/mcp*.log`
Windows	`%APPDATA%\Claude\logs\`

Comandos

Acción	Comando
Iniciar context-coder	`npx context-coder --edit-file-mode`
Iniciar Supabase	`supabase start`
Detener Supabase	`supabase stop`
Verificar estado de Supabase	`supabase status`

Archivos del Proyecto

Archivo	Propósito
`PROJECT.md`	Contexto del proyecto para Claude
`.cocoignore`	Archivos a excluir del contexto

Resumen

Ahora tienes un entorno de desarrollo completo asistido por IA. Para los usuarios de Claude Desktop, cuentas con context-coder para el acceso a archivos, Supabase MCP para consultas a la base de datos y Svelte MCP para documentación y validación. Para los usuarios de Claude.ai, tienes el conector Svelte MCP con sus capacidades de documentación y autofixer.

El flujo de trabajo diario es sencillo: inicia tus servicios, abre Claude y empieza a programar. Claude leerá tu código base, entenderá tus patrones desde PROJECT.md y generará código Svelte 5 validado que sigue las mejores prácticas modernas.

¡Feliz programación! 🚀

Lo que vamos a construir

Dos formas de usar Claude con MCP

Requisitos previos

Parte 1: Configuración de Claude Desktop

Paso 1: Descargar e instalar

Paso 2: Abrir la configuración de desarrollador

Paso 3: Agregar servidores MCP a la configuración

Paso 4: Iniciar los servicios requeridos

Paso 5: Reiniciar Claude Desktop

Paso 6: Verificar la conexión

Parte 2: Qué hace cada servidor MCP

Context-Coder (Acceso a archivos)

Supabase (Acceso a la base de datos)

Svelte MCP (Documentación y validación)

Parte 3: Archivos de configuración del proyecto

Archivo 1: PROJECT.md

EXAMPLE PROJECT.md

Project: Field Service SaaS

Descripción General

Stack Tecnológico

Arquitectura

Multi-Tenancy (¡Crítico!)

Carga de Datos

Estructura de Archivos

Helper de Auth

Base de Datos

Tablas

Convenciones

Flujos de Estado

Reglas de Negocio

Impuestos (Irlanda)

Precios

Definiciones de Tipos

Lista de Verificación MVP

Notas para Claude

Archivo 2: .cocoignore

Parte 5: agregar Prompt para Claude

EJEMPLO - INSTRUCCIONES

EJEMPLO - PROMPT

Plataforma SaaS de Servicios de Campo - Guía de Desarrollo Integral

Stack Tecnológico

1. Dominio Principal y Modelo de Datos

2. Autenticación y Autorización

3. Backend con SvelteKit Remote Functions

Tipos de Remote Functions

Estructura de Archivos

Ejemplos de Remote Functions

Validación con Valibot

Contexto de Auth en Remote Functions

Mutaciones Single-Flight

Supabase Edge Functions

4. Frontend (SvelteKit + Svelte 5 Runes)

Características Requeridas de Svelte 5

Estructura de Carpetas de SvelteKit

Componente FieldRenderer Dinámico

Uso de Remote Functions en Componentes

Patrones de Gestión de Estado

Componentes a Construir

Diseño Responsivo para Móviles

5. Campos Personalizados / Plantillas por Oficio

6. Flujo de Cotizaciones y Trabajos

7. Facturación e Impuestos

8. Precios y Suscripciones

9. Notificaciones

10. Portal del Cliente

11. Flujo de Incorporación

12. Soporte Multi-País e Multi-Idioma

13. Archivos y Adjuntos

14. Búsqueda y Filtrado

15. Reportes y Análisis

16. Seguridad y Cumplimiento

17. Manejo de Errores y Monitoreo

18. Arquitectura del Proyecto y Flujo de Desarrollo

19. Hoja de Ruta del MVP al Lanzamiento

Fase 1: MVP Central (Semanas 1-6) - Irlanda, Paisajismo, Inglés

Fase 2: Pagos y Pulido (Semanas 7-10)

Fase 3: Crecimiento (Semanas 11-16)

Hitos de Ingresos

Requisitos de Configuración

svelte.config.js

Archivo 1: `PROJECT.md`

Archivo 2: `.cocoignore`