Este guia apresenta o processo de configuração do Claude (aplicativo Desktop ou web) com servidores MCP para desenvolvimento profissional em Svelte 5. Ao final, o Claude será capaz de ler e gravar arquivos diretamente no seu projeto, consultar seu banco de dados Supabase para obter contexto, acessar a documentação atualizada do Svelte 5 e validar o código antes de enviá-lo para você.

O Que Estamos Construindo

Aqui está a configuração 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                    │
└─────────────────────────────────────────────────────────────┘

Duas Formas de Usar o Claude com MCP

Existem duas maneiras principais de conectar o Claude a servidores MCP, e a configuração difere para cada uma:

Plataforma	Tipo de MCP	Método de Configuração
Claude Desktop (app)	Servidores MCP locais	Editar `claude_desktop_config.json`
Claude.ai (web)	Servidores MCP remotos	Configurações → Conectores

Este guia aborda as duas abordagens.

Pré-requisitos

Antes de começar, certifique-se de ter o Node.js 18+ instalado (execute node --version para verificar), um projeto Svelte/SvelteKit para trabalhar e o aplicativo Claude Desktop ou uma conta paga no Claude.ai (Pro, Max, Team ou Enterprise para conectores web).

Parte 1: Configuração do Claude Desktop

Se você estiver usando o aplicativo Claude Desktop, siga esta seção.

Etapa 1: Baixar e Instalar

Baixe o Claude Desktop em https://claude.ai/download. Ele está disponível para macOS, Windows e Linux. Após a instalação, abra o aplicativo e faça login com sua conta Anthropic.

Etapa 2: Abrir as Configurações do Desenvolvedor

Para configurar servidores MCP, você precisa editar um arquivo de configuração JSON. Veja como acessá-lo:

Clique no menu Claude na barra de menus do sistema (no macOS, fica no topo da tela, não dentro da janela do aplicativo)
Selecione "Settings..."
Na janela de Configurações, clique em "Developer" na barra lateral esquerda
Clique no botão "Edit Config"

Isso abre o arquivo claude_desktop_config.json. O arquivo está localizado em:

SO	Localização do Arquivo de Configuração
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json`
Linux	`~/.config/Claude/claude_desktop_config.json`

Se o arquivo não existir, clicar em "Edit Config" irá criá-lo automaticamente.

Etapa 3: Adicionar Servidores MCP à Configuração

Substitua o conteúdo de claude_desktop_config.json pela configuração a seguir. Este exemplo inclui o context-coder para acesso a arquivos, o Supabase para consultas ao banco de dados e o Svelte MCP para documentação:

{
	"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"]
		}
	}
}

Salve o arquivo após editar.

Etapa 4: Iniciar os Serviços Necessários

Antes que o Claude possa usar esses servidores MCP, você precisa iniciar os serviços aos quais eles se conectam.

Para o context-coder, abra um terminal no diretório do seu projeto Svelte e execute:

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

Você deverá ver uma saída como:

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

Mantenha este terminal aberto enquanto trabalha.

Para o Supabase (se você estiver usando-o), inicie a instância local do Supabase:

supabase start

Etapa 5: Reiniciar o Claude Desktop

Feche o Claude Desktop completamente (certifique-se de que não está sendo executado em segundo plano) e reabra-o. Isso é necessário para que o Claude carregue a nova configuração do servidor MCP.

Etapa 6: Verificar a Conexão

Após reiniciar, você verá um + (ícone de mais) no canto inferior esquerdo da caixa de entrada de conversa. Clique neste indicador para ver a lista de ferramentas disponíveis dos seus servidores MCP conectados. Na parte inferior, você verá a opção connectors. Ao abri-la, verá os servidores MCP listados. Você pode ativá-los ou desativá-los conforme necessário. Para mais informações sobre isso, consulte a documentação oficial.

Você deverá ver ferramentas do context-coder, do Supabase e do Svelte MCP listadas. Se não as vir, verifique novamente o arquivo de configuração em busca de erros de sintaxe e certifique-se de que os serviços estão em execução.

Parte 2: O Que Cada Servidor MCP Faz

Aqui está um resumo das ferramentas que cada servidor MCP fornece:

Context-Coder (Acesso a Arquivos)

Este servidor MCP permite que o Claude leia e grave arquivos no seu projeto:

Ferramenta	Finalidade
`get_codebase`	Ler todo o seu projeto (paginado)
`get_codebase_size`	Verificar o tamanho do projeto antes de ler
`write_file`	Criar ou sobrescrever arquivos
`edit_file`	Fazer edições direcionadas baseadas em linhas
`read_file`	Ler um arquivo específico
`create_directory`	Criar pastas
`remove_file`	Excluir arquivos
`execute_command`	Executar comandos shell

Supabase (Acesso ao Banco de Dados)

Este servidor MCP permite que o Claude consulte seu banco de dados PostgreSQL:

Ferramenta	Finalidade
`query`	Executar consultas SQL somente leitura

Use-o para explorar seu esquema, consultar dados para obter contexto ou ajudar o Claude a entender seu modelo de dados.

Svelte MCP (Documentação e Validação)

Este servidor MCP fornece documentação atualizada do Svelte e validação de código:

Ferramenta	Finalidade
`list-sections`	Listar toda a documentação disponível
`get-documentation`	Buscar documentação para tópicos específicos
`svelte-autofixer`	Validar código Svelte em busca de erros
`playground-link`	Gerar URLs de playground compartilháveis

O svelte-autofixer é particularmente valioso. O Claude o utiliza para validar o código antes de enviá-lo para você, detectando erros de sintaxe e padrões obsoletos (como a sintaxe do Svelte 4 em projetos Svelte 5).

Parte 3: Arquivos de Configuração do Projeto

Para obter os melhores resultados do Claude, adicione esses arquivos ao seu projeto.

Arquivo 1: `PROJECT.md`

Crie o PROJECT.md na raiz do seu projeto. Isso fornece ao Claude contexto sobre a arquitetura e os padrões do seu projeto:

EXEMPLO DE PROJECT.md

Projeto: Field Service SaaS

Visão Geral

Aplicativo de gerenciamento de serviços de campo (como o Jobber) para pequenos operadores de serviço.

Escopo do MVP: Irlanda, setor de paisagismo, somente inglês
Objetivo: Fluxo de trabalho Clientes → Trabalhos → Faturas

Stack Tecnológica

Camada	Escolha
Framework	SvelteKit 2.27+
UI	Svelte 5 com Runes
Banco de dados	Supabase PostgreSQL
Auth	Supabase Auth
Validação	Valibot
Armazenamento	Supabase Storage
Pagamentos	Stripe

Arquitetura

Multi-Tenancy (Crítico!)

Toda consulta ao banco de dados DEVE filtrar por company_id:

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

Carregamento de Dados

Necessidade	Usar
Dados iniciais da página, SSR	`+page.server.ts` load
Formulário com validação	Remote Function `form`
Ação de botão	Remote Function `command`
Busca sob demanda	Remote Function `query`

Estrutura de Arquivos

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
}

Banco de Dados

Tabelas

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

Convenções

Todas as tabelas: company_id, created_at, updated_at
Exclusão suave: deleted_at (nullable)

Fluxos de Status

Job: Rascunho → Agendado → Em Andamento → Concluído → Faturado

Invoice: Rascunho → Enviado → Visualizado → Pago / Em Atraso

Regras de Negócio

Impostos (Irlanda)

IVA padrão: 23%

Preços

Starter: €29/mês (50 clientes, 100 trabalhos/mês)
Pro: €59/mês (ilimitado)

Definições 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 {}

Checklist do MVP

Configuração do Supabase
CRUD de Clientes
Trabalhos com serviços
Geração de faturas
Geração de PDF
Assinaturas do Stripe

Notas para o Claude

Usar runes do Svelte 5
Sempre filtrar por company_id
Usar Valibot para validação
Executar svelte-autofixer antes de enviar o código

Arquivo 2: `.cocoignore`

Na documentação do context-coder você verá que é possível criar um .cocoignore na raiz do seu projeto para excluir arquivos que não são necessários para o contexto. Isso mantém o contexto pequeno e focado:

# 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: adicionar Prompt para o Claude

Agora que estabelecemos nossa conexão entre o Claude e nosso projeto usando servidores MCP e adicionamos os arquivos de contexto do projeto, é hora de dar ao Claude instruções sobre como construir nosso projeto.

Abra o Claude App
Crie um novo projeto
Nomeie como "Field Service SaaS Platform"
Nas instruções, escreva sua tarefa conforme o exemplo abaixo:

EXEMPLO - INSTRUÇÕES

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

Nos "arquivos" do projeto, adicione o prompt como arquivo ou cole seu texto diretamente. Isso fornece ao Claude instruções detalhadas sobre como construir a plataforma:

EXEMPLO - PROMPT

Plataforma SaaS de Serviços de Campo - Guia Abrangente de Desenvolvimento

Quero construir uma plataforma SaaS de serviços de campo semelhante ao Jobber, voltada para pequenos operadores de serviços (paisagistas, encanadores, eletricistas), começando na Irlanda, com suporte futuro para múltiplos países, múltiplos ramos e múltiplos idiomas. A plataforma deve permitir que os usuários gerenciem clientes, trabalhos, serviços personalizados, campos dinâmicos e gerem faturas legais incluindo cálculos de impostos, além de gerenciar planos de assinatura com aplicação de capacidades. O objetivo é atingir ~€5.000/mês de receita.

Quero que você atue como um especialista em arquitetura e desenvolvimento full-stack SaaS. Seu objetivo é gerar orientações práticas passo a passo, trechos de código, schemas e padrões de design para implementar esta plataforma.

Stack Tecnológica

Banco de Dados: PostgreSQL (Supabase) com Row Level Security
Auth: Supabase Auth
Backend: SvelteKit Remote Functions (sem servidor de API separado)
Frontend: SvelteKit com Svelte 5 Runes
Validação: Valibot (mais leve que o Zod, suporte nativo a Remote Functions)
Pagamentos: Stripe (assinaturas + coleta de pagamentos)
Armazenamento de Arquivos: Supabase Storage
E-mail: Resend ou Postmark (via Supabase Edge Functions)
Geração de PDF: Supabase Edge Functions com pdf-lib
Hospedagem: Vercel ou Cloudflare Pages

1. Domínio Principal & Modelo de Dados

Forneça um schema PostgreSQL totalmente 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 (pagamentos de clientes, não assinaturas)
- subscriptions, subscription_plans
- files/attachments
- audit_logs
Explique o design multi-tenant usando company_id para escopo com Row Level Security (RLS) no Supabase
Mostre como armazenar snapshots para faturas e orçamentos usando JSONB para garantir imutabilidade
Forneça exemplos de campos personalizados por serviço, incluindo tipos de campo (text, number, boolean, select, date, file), validação e armazenamento
Inclua estratégia de exclusão suave (timestamps deleted_at) para recuperação de dados

2. Autenticação & Autorização

Implemente o fluxo de autenticação usando Supabase Auth:
- Cadastro com e-mail/senha com verificação de e-mail
- Opção de login por magic link
- Fluxo de redefinição de senha
- Gerenciamento de sessão e tokens de atualização
Projete o controle de acesso baseado em funções (RBAC):
- Funções: Owner, Admin, Employee, Viewer
- Matriz de permissões para cada entidade (clients, jobs, invoices, settings)
- Políticas de Row Level Security no PostgreSQL
Mostre o fluxo de convite para adicionar membros da equipe a uma empresa
Mostre como acessar o contexto de autenticação em Remote Functions usando getRequestEvent()

3. Backend com SvelteKit Remote Functions

Use SvelteKit Remote Functions (disponível desde o SvelteKit 2.27) como a camada de backend principal. As Remote Functions fornecem RPC com tipagem segura sem a necessidade de construir endpoints de API separados.

Tipos de Remote Function

Mostre exemplos usando todos os quatro tipos de remote function:

query - Leitura de dados (clients, jobs, invoices)
query.batch - Leituras em lote resolvendo problemas n+1
form - Envios de formulário com validação integrada
command - Mutações a partir de manipuladores de eventos
prerender - Dados de configuração estáticos (países, planos, templates de ramo)

Estrutura de Arquivos

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

Exemplos de Remote Functions

Forneça arquivos .remote.ts completos para:

Clients: Operações CRUD com escopo de empresa
Jobs: Criação com serviços, transições de status, agendamento
Invoices: Geração a partir de job, cálculo de imposto, criação de snapshot
Quotes: CRUD, conversão para job
Recurring Jobs: Gerenciamento de templates, geração de jobs
Payments: Registrar pagamento, histórico de pagamentos
Reports: Receita, estatísticas de jobs (somente plano Pro)

Validação com Valibot

Mostre a validação de schema com Valibot integrada às 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 em Remote Functions

Mostre como usar getRequestEvent() para:

Obter o usuário/empresa atual
Escopo de dados multi-tenant
Verificações de permissão

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
}

Single-Flight Mutations

Mostre padrões de UI otimista com withOverride:

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

Supabase Edge Functions

Use Supabase Edge Functions apenas para:

Geração de PDF (faturas, orçamentos)
Webhooks do Stripe
Jobs agendados (geração recorrente de faturas)
Envio de e-mails

4. Frontend (SvelteKit + Svelte 5 Runes)

Recursos Obrigatórios do Svelte 5

Use estes recursos modernos do Svelte 5:

$state - Estado reativo
$state.raw - Para arrays/objetos grandes (desempenho)
$derived - Valores computados
$derived overrides - UI otimista (Svelte 5.25+)
$effect - Efeitos colaterais
$effect.pending() - Indicadores de carregamento assíncrono (Svelte 5.36+)
$props - Props de componente
$props.id() - IDs únicos para acessibilidade de formulários (Svelte 5.20+)
await em templates - Renderização assíncrona direta (Svelte 5.36+, experimental)
<svelte:boundary> - Limites de erro e estados de carregamento (Svelte 5.3+)

Estrutura de Pastas do 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

Forneça um componente FieldRenderer que:

Renderize formulários com base em templates de serviço
Suporte todos os tipos de campo (text, number, boolean, select, date, textarea, file)
Integre-se com os campos form de Remote Functions
Use $props.id() para labels de formulário acessíveis
Trate a validação com exibição de erros

Usando Remote Functions em Componentes

Mostre padrões para:

Leitura de dados com await em 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>

Envios de formulário com validação:

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

Commands com estado de carregamento:

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

Padrões de Gerenciamento de Estado

Mostre padrões de runes do Svelte 5 para:

Estado de autenticação usando o objeto page de $app/state
Contexto de empresa atual
Capacidades do plano com o helper can('feature')
i18n com troca reativa de localidade

Componentes a Construir

Forneça componentes para:

Prévia de Orçamento/Fatura - Leitura de snapshot JSON
Visão de Calendário - Agendamento de jobs com arrastar e soltar
Upload de Arquivo - Arrastar e soltar, progresso, prévia
Busca/filtro - Busca global, filtragem de listas
Dashboard - Widgets de métricas principais
Tabelas de dados - Listas ordenáveis e filtráveis

Design Responsivo para Mobile

Inclua considerações de mobile-first:

Controles amigáveis para toque
Navegação responsiva
Indicadores de UI para estado offline

5. Campos Personalizados / Templates de Ramo

Mostre a estrutura de configuração de template de ramo para Paisagismo, Encanamento, Eletricistas
Use remote functions prerender para configurações de ramo estáticas:

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

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

Inclua atributos dinâmicos para serviços com:
- Definições de tipo de campo
- Regras de validação (required, min, max, pattern)
- Visibilidade condicional
- Valores padrão
- Tipos de unidade (horas, m², itens)
Explique como adicionar novos campos por ofício sem migração de banco de dados (orientado por configuração)
Mostre schemas Valibot compartilhados para validação no frontend e no backend

6. Fluxo de Orçamentos e Trabalhos

Forneça o fluxo de orçamentos:
- Criar orçamento com serviços e precificação
- Geração de PDF (Edge Function)
- E-mail para o cliente
- Converter orçamento aprovado em trabalho
Forneça o fluxo de trabalhos:
- Status do trabalho: Rascunho → Agendado → Em Andamento → Concluído → Faturado
- Atribuição a membros da equipe
- Agendamento com data/hora
- Notas e fotos do trabalho
- Checklist de conclusão
Mostre trabalhos recorrentes:
- Definição de modelo (frequência, serviços, cliente)
- Geração automática de trabalhos (tarefa agendada de Edge Function)
- Pular/reagendar ocorrências individuais

7. Faturamento e Impostos

Mostre o fluxo de trabalho → fatura usando Remote Functions:
- Validações pré-fatura
- Criação de fatura com snapshot
- Transições de status: Rascunho → Enviado → Visualizado → Pago → Atrasado
- Bloqueio de faturas após envio
- Numeração sequencial de faturas por empresa
Explique o cálculo de impostos baseado nas regras de cada país:
- Alíquotas de IVA da Irlanda (padrão 23%, reduzida 13,5%, zero)
- Tratamento de isenção fiscal
- Use prerender para configurações de impostos por país
Forneça o snapshot de fatura armazenado como JSONB:
- Dados completos do cliente no momento da fatura
- Todos os itens de linha com preços, quantidades e imposto
- Dados e identidade visual da empresa
- Condições de pagamento e dados bancários
Mostre o registro de pagamentos:
- Entrada manual de pagamento
- Links de pagamento Stripe
- Pagamentos parciais
Mostre a geração de PDF via Supabase Edge Function

8. Precificação e Assinaturas

Forneça planos com 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']
	}
}))

Mostre a aplicação centralizada de capacidades:
- can(company, 'feature') - verificação booleana
- limit(company, 'resource') - limite numérico
- usage(company, 'resource') - contagem de uso atual
- Implementar em $lib/server/capabilities.ts
Mostre a aplicação de limites flexíveis:
- Backend: Verificar nas Remote Functions antes das operações
- Frontend: Desabilitar UI, exibir CTA de upgrade
Mostre a integração com Stripe:
- Criação de sessão de checkout (comando Remote Function)
- Tratamento de webhook (Supabase Edge Function)
- Mapeamento e sincronização de planos
- Tratamento do período de trial

9. Notificações

Projete o sistema de notificações para:
- Fatura enviada ao cliente (e-mail)
- Pagamento recebido (e-mail, in-app)
- Lembrete de trabalho (e-mail)
- Orçamento expirando (e-mail)
- Falha no pagamento da assinatura (e-mail)
- Membro da equipe convidado (e-mail)
Use Supabase Edge Functions para envio de e-mails com Resend/Postmark
Mostre a estrutura de templates de e-mail
Inclua preferências de notificação por usuário

10. Portal do Cliente

Projete um portal do cliente simplificado (funcionalidade da Fase 2):
- Cliente visualiza seus orçamentos, trabalhos e faturas
- Aprovar orçamentos online
- Pagar faturas via Stripe
- Sem necessidade de login (tokens de magic link seguros)
Mostre a implementação de acesso baseado em tokens seguros

11. Fluxo de Onboarding

Forneça um fluxo de onboarding passo a passo (meta: primeira fatura em 5 minutos):
1. Cadastro com e-mail + nome da empresa
2. Tela de boas-vindas com proposta de valor
3. Adicionar primeiro cliente (formulário simplificado)
4. Criar primeiro trabalho com serviço de exemplo pré-preenchido
5. Marcar trabalho como concluído
6. Pré-visualizar fatura (momento uau!)
7. Enviar fatura ou baixar PDF
8. Exibir CTA de upgrade ao atingir limites
Use <svelte:boundary> para estados de carregamento suaves durante o onboarding
Inclua indicador de progresso e opções de pular
Inclua opção de dados de exemplo para explorar com conteúdo de demonstração
Inclua boas práticas de UI/UX para conversão:
- Formulários de coluna única
- Validação inline com campos de formulário Remote Function
- CTAs claros
- Momentos de celebração

12. Suporte a Múltiplos Países e Múltiplos Idiomas

Forneça uma estrutura orientada por configuração para países usando prerender:

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

Mostre a implementação de i18n:
- Traduções de rótulos da UI
- Formatação de datas e números
- Rótulos de campos em templates por ofício
- Templates de fatura por locale
Explique como novos ofícios e países podem ser adicionados sem alterações no schema

13. Arquivos e Anexos

Projete o sistema de armazenamento de arquivos:
- Supabase Storage para hospedagem de arquivos
- Associação de arquivos a entidades (trabalhos, faturas, clientes)
- Compressão de imagens para fotos
Mostre o componente de upload de arquivos com:
- Arrastar e soltar
- Seleção de múltiplos arquivos
- Indicador de progresso usando $effect.pending()
- Pré-visualização para imagens
Inclua limites de armazenamento por plano de assinatura

14. Busca e Filtragem

Implemente a funcionalidade de busca:
- Busca global usando remote function query
- Busca de texto completo no PostgreSQL
- Acesso rápido a itens recentes
Mostre filtragem e ordenação para visualizações de lista com estado reativo $derived

15. Relatórios e Análises

Forneça relatórios principais (somente plano Pro):
- Receita por período
- Trabalhos concluídos por status
- Faturas em aberto / relatório de aging
- Valor vitalício do cliente
Mostre widgets do dashboard com <svelte:boundary> para estados de carregamento
Inclua a funcionalidade de exportar para CSV

16. Segurança e Conformidade

Implemente boas práticas de segurança:
- Validação de entrada via Valibot em todas as Remote Functions
- Row Level Security no PostgreSQL
- Proteção CSRF (integrada nas Remote Functions)
- Rate limiting na autenticação
Trate a conformidade com o RGPD (obrigatório para Irlanda/UE):
- Requisitos de política de privacidade
- Comando de exportação de dados
- Comando de exclusão de dados
- Consentimento de cookies
Mostre o registro de auditoria:
- Quem fez o quê e quando
- Alterações em dados sensíveis
- Histórico de login

17. Tratamento de Erros e Monitoramento

Implemente o tratamento de erros com <svelte:boundary>:
- Limites de erro por seção
- Mensagens de erro amigáveis ao usuário
- Funcionalidade de nova tentativa com reset
Mostre o hook handleValidationError para erros de validação de Remote Function
Configure o monitoramento:
- Rastreamento de erros (Sentry)
- Log estruturado
- Monitoramento de uptime

18. Arquitetura do Projeto e Fluxo de Desenvolvimento

Mostre a estrutura completa do projeto:

/
  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/

Inclua recomendações de CI/CD:
- GitHub Actions para testes e deploy
- Deploy de preview para PRs
- Estratégia de migração de banco de dados
Inclua estratégia de testes:
- Testes unitários para lógica de negócio
- Testes de componentes com Svelte Testing Library
- Testes E2E para fluxos críticos (Playwright)

19. Roadmap do MVP ao Lançamento

Fase 1: MVP Principal (Semanas 1-6) - Irlanda, Paisagismo, Inglês

Semana 1-2: Fundação

Schema do banco de dados e configuração do Supabase
Fluxo de autenticação com Supabase Auth
Gerenciamento de empresa e usuário
CRUD básico de clientes com Remote Functions

Semana 3-4: Trabalhos e Serviços

Template por ofício para Paisagismo
Criação de trabalho com campos dinâmicos
Fluxo de status do trabalho
Visualização básica de calendário

Semana 5-6: Faturamento

Geração de fatura a partir do trabalho
Cálculo de imposto (IVA da Irlanda)
Geração de PDF (Edge Function)
Envio de e-mail de fatura
Fluxo de onboarding

Fase 2: Pagamento e Refinamento (Semanas 7-10)

Semana 7-8: Assinaturas

Integração com Stripe
Aplicação de capacidades por plano
Fluxos de upgrade/downgrade

Semana 9-10: Refinamento e Lançamento

Correções de bugs e melhorias de UX
Tratamento de erros e monitoramento
Landing page
Lançamento beta para 10-20 usuários

Fase 3: Crescimento (Semanas 11-16)

Trabalhos recorrentes
Módulo de orçamentos
Portal do cliente
Ofícios adicionais (Encanamento, Elétrica)
Relatórios e análises
Países adicionais (Reino Unido)

Marcos de Receita

Período	Meta
Mês 1-2	10 usuários beta (gratuito)
Mês 3	20 clientes pagantes × €30 = €600/mês
Mês 6	80 clientes × €45 média = €3.600/mês
Mês 9	130 clientes × €50 média = €6.500/mês

Requisitos de Configuração

svelte.config.js

Habilite os recursos experimentais:

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

export default config

Requisitos de Saída

Forneça snippets de código usando:
- SQL para esquema de banco de dados
- TypeScript para todo o código
- Sintaxe de runes do Svelte 5 ($state, $derived, $effect, $props)
- Remote Functions (query, form, command, prerender)
- Valibot para esquemas de validação
Sem padrões legados:
- Sem Svelte stores (use runes)
- Sem funções de carregamento +page.server.ts onde Remote Functions funcionam melhor
- Sem rotas de API separadas (use Remote Functions)
Forneça instruções claras e acionáveis
Inclua tipos/interfaces TypeScript para todas as entidades principais
Estruture a resposta para que um desenvolvedor solo possa seguir do início ao fim

Notas Extras

Priorize simplicidade e manutenibilidade
Use Remote Functions como camada de dados principal
Use Supabase Edge Functions apenas para webhooks, PDFs e tarefas agendadas
Garanta que todos os fluxos sejam seguros para múltiplos tenants com RLS
Foque no MVP para a Irlanda, apenas inglês, Paisagismo primeiro
Planeje futuros ofícios, países e idiomas via configuração
Design mobile-first para trabalhadores de campo
Considere suporte offline como melhoria futura

Sua tarefa é atuar como arquiteto e engenheiro de produto SaaS full-stack e gerar um guia abrangente com exemplos e snippets de código para construir esta plataforma usando os recursos mais recentes do Svelte 5 e SvelteKit. Torne-o detalhado o suficiente para que um desenvolvedor solo possa segui-lo do início ao fim para lançar um MVP funcional e escalar depois.

Parte 6: Fluxo de Trabalho Diário

Veja como usar a configuração no dia a dia.

Iniciando Sua Sessão (Claude Desktop)

Primeiro, abra seu projeto em um terminal e inicie o context-coder:

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

Se estiver usando o Supabase, inicie-o em outro terminal:

supabase start

Em seguida, abra o Claude Desktop. Os servidores MCP vão se conectar automaticamente. Você pode verificar clicando no ícone de controle deslizante na área de entrada para ver as ferramentas disponíveis.

Iniciando Sua Sessão (Claude)

Abra o Claude App e comece a conversar — o Claude usará as ferramentas automaticamente quando relevante. Se a conexão entre seu projeto local e o Claude App não for estabelecida, você verá uma mensagem de erro ao tentar usar as ferramentas como toasts.

Exemplos de Prompts

Aqui estão alguns exemplos de prompts para experimentar:

Ler e entender o projeto:

P: "Leia meu código-base e resuma a estrutura"

Criar uma nova página:

P: "Crie uma página de lista de clientes em src/routes/(app)/clients com busca e paginação"

Consultar o banco de dados para contexto:

P: "Mostre-me o esquema da tabela clients e depois crie um tipo TypeScript para ela"

Corrigir um problema:

P: "Leia src/routes/(app)/dashboard/+page.svelte e corrija os erros TypeScript"

Validar código:

P: "Use o svelte-autofixer para validar o componente que acabei de pedir para você criar"

Encerrando Sua Sessão

Quando terminar de trabalhar, pare o context-coder pressionando Ctrl+C em seu terminal. Se estiver usando o Supabase, execute supabase stop. Em seguida, feche o Claude Desktop ou seu navegador.

Parte 6: Solução de Problemas

Servidor MCP Não Aparece (Claude Desktop)

Se o ícone de controle deslizante não aparecer ou não mostrar ferramentas:

Certifique-se de ter reiniciado o Claude Desktop completamente após editar a configuração
Verifique se seu claude_desktop_config.json possui sintaxe JSON válida (sem vírgulas finais)
Verifique se os serviços estão em execução (o terminal do context-coder deve mostrar "running")
Verifique os logs em busca de erros:

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

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

Context-Coder Não Conecta

Se o Claude não consegue acessar seus arquivos:

Verifique se o context-coder está em execução no diretório correto (seu projeto Svelte)
Certifique-se de que está em execução na porta 3001
Verifique se há mensagens de erro no terminal do context-coder

Falha na Conexão com o Supabase

Se as consultas ao banco de dados não funcionarem:

Certifique-se de que o Supabase está em execução: supabase status
Verifique se a string de conexão em sua configuração corresponde à sua instalação
Verifique a porta (o padrão é 54322 para o banco de dados Supabase local)

Claude Gera Código Svelte 4

Se o Claude usar sintaxe legada como export let, $: ou on:click:

Adicione ao PROJECT.md: "Sempre use runes do Svelte 5, nunca sintaxe legada"
Peça explicitamente: "Use o svelte-autofixer para validar este código"
Lembre ao Claude: "Converta isto para a sintaxe de runes do Svelte 5"

Parte 7: Referência Rápida

Localização do Arquivo de Configuração (Claude Desktop)

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

Localização do Arquivo de Log (Claude Desktop)

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

Comandos

Ação	Comando
Iniciar context-coder	`npx context-coder --edit-file-mode`
Iniciar Supabase	`supabase start`
Parar Supabase	`supabase stop`
Verificar status Supabase	`supabase status`

Arquivos do Projeto

Arquivo	Finalidade
`PROJECT.md`	Contexto do projeto para o Claude
`.cocoignore`	Arquivos a excluir do contexto

Resumo

Agora você tem um ambiente de desenvolvimento completo assistido por IA. Para usuários do Claude Desktop, você tem o context-coder para acesso a arquivos, o Supabase MCP para consultas ao banco de dados e o Svelte MCP para documentação e validação. Para usuários do Claude.ai, você tem o conector Svelte MCP com suas capacidades de documentação e autofixer.

O fluxo de trabalho diário é simples: inicie seus serviços, abra o Claude e comece a programar. O Claude lerá seu código-base, entenderá seus padrões a partir do PROJECT.md e gerará código Svelte 5 validado que segue as melhores práticas modernas.

Bom código! 🚀

O Que Estamos Construindo

Duas Formas de Usar o Claude com MCP

Pré-requisitos

Parte 1: Configuração do Claude Desktop

Etapa 1: Baixar e Instalar

Etapa 2: Abrir as Configurações do Desenvolvedor

Etapa 3: Adicionar Servidores MCP à Configuração

Etapa 4: Iniciar os Serviços Necessários

Etapa 5: Reiniciar o Claude Desktop

Etapa 6: Verificar a Conexão

Parte 2: O Que Cada Servidor MCP Faz

Context-Coder (Acesso a Arquivos)

Supabase (Acesso ao Banco de Dados)

Svelte MCP (Documentação e Validação)

Parte 3: Arquivos de Configuração do Projeto

Arquivo 1: PROJECT.md

EXEMPLO DE PROJECT.md

Projeto: Field Service SaaS

Visão Geral

Stack Tecnológica

Arquitetura

Multi-Tenancy (Crítico!)

Carregamento de Dados

Estrutura de Arquivos

Helper de Auth

Banco de Dados

Tabelas

Convenções

Fluxos de Status

Regras de Negócio

Impostos (Irlanda)

Preços

Definições de Tipos

Checklist do MVP

Notas para o Claude

Arquivo 2: .cocoignore

Parte 5: adicionar Prompt para o Claude

EXEMPLO - INSTRUÇÕES

EXEMPLO - PROMPT

Plataforma SaaS de Serviços de Campo - Guia Abrangente de Desenvolvimento

Stack Tecnológica

1. Domínio Principal & Modelo de Dados

2. Autenticação & Autorização

3. Backend com SvelteKit Remote Functions

Tipos de Remote Function

Estrutura de Arquivos

Exemplos de Remote Functions

Validação com Valibot

Contexto de Auth em Remote Functions

Single-Flight Mutations

Supabase Edge Functions

4. Frontend (SvelteKit + Svelte 5 Runes)

Recursos Obrigatórios do Svelte 5

Estrutura de Pastas do SvelteKit

Componente FieldRenderer Dinâmico

Usando Remote Functions em Componentes

Padrões de Gerenciamento de Estado

Componentes a Construir

Design Responsivo para Mobile

5. Campos Personalizados / Templates de Ramo

6. Fluxo de Orçamentos e Trabalhos

7. Faturamento e Impostos

8. Precificação e Assinaturas

9. Notificações

10. Portal do Cliente

11. Fluxo de Onboarding

12. Suporte a Múltiplos Países e Múltiplos Idiomas

13. Arquivos e Anexos

14. Busca e Filtragem

15. Relatórios e Análises

16. Segurança e Conformidade

17. Tratamento de Erros e Monitoramento

18. Arquitetura do Projeto e Fluxo de Desenvolvimento

19. Roadmap do MVP ao Lançamento

Fase 1: MVP Principal (Semanas 1-6) - Irlanda, Paisagismo, Inglês

Fase 2: Pagamento e Refinamento (Semanas 7-10)

Fase 3: Crescimento (Semanas 11-16)

Marcos de Receita

Requisitos de Configuração

svelte.config.js

Arquivo 1: `PROJECT.md`

Arquivo 2: `.cocoignore`