Svelte Core Best Practices: revise reatividade sem efeitos desnecessários

ANÁLISE EDITORIAL

Um componente Svelte parou de atualizar quando uma prop mudou. O impulso comum é acrescentar um $effect que copia o valor para outro estado. Isso pode esconder o problema e criar uma segunda fonte de verdade. A Skill oficial svelte-core-bestpractices ajuda o agente de programação a reconhecer esse tipo de escolha: quando usar $derived, como tratar eventos, quando manter uma referência de contexto e quais recursos ainda exigem cuidado. É uma coleção de instruções para revisão e escrita de código, não um otimizador que mede desempenho sozinho.

O que a Skill faz

O material mantido pela equipe Svelte reúne orientações para componentes e módulos modernos. O arquivo principal distingue estado reativo de variável comum, recomenda $derived para valores calculados e reserva $effect para integrações que realmente precisem de efeito colateral. Também aborda props que mudam, rastreamento com $inspect.trace, listas com chave estável, snippets, estilos de componentes e contexto.

As nove referências Markdown incluídas aprofundam pontos específicos, como {@attach}, bindings de função, blocos {#each}, {@render} e APIs de reatividade. Ao pedir uma alteração, o agente pode consultar o tópico pertinente sem transformar toda sugestão em regra universal. O próprio documento observa que objetos e arrays em $state são reativos em profundidade e podem ter custo de proxy. Quando o valor é grande e só será substituído integralmente, ele aponta $state.raw como alternativa a considerar.

Para quem serve e quando não usar

Serve a desenvolvedores que mantêm interfaces Svelte 5 e querem revisar uma mudança proposta por IA antes de mesclá-la. É especialmente útil quando um componente mistura props, estado derivado e efeitos, quando uma lista perde identidade ao ser reordenada ou quando o CSS do pai precisa influenciar um filho sem espalhar seletores globais. Quem está aprendendo Svelte pode usá-la para discutir por que uma solução usa runes em vez de copiar padrões antigos de $: ou on:click.

Não é ferramenta de benchmark, scanner de segurança nem substituto da documentação do projeto. A Skill não conhece automaticamente a versão instalada, o adaptador, as convenções do time ou os resultados dos testes. Em uma aplicação legada, não peça ao agente que converta o repositório inteiro para runes apenas porque o texto prefere recursos modernos para código novo. Divida a mudança por componente, preserve comportamento observável e compare o diff com a arquitetura existente.

Compatibilidade e pré-requisitos

O documento foi produzido para tarefas com Svelte 5 e o formato SKILL.md pode ser carregado por agentes que aceitam Skills. A documentação da equipe Svelte relaciona o material aos plugins de Claude Code, Codex CLI, GitHub Copilot CLI e OpenCode e também menciona instalação manual em pastas de Skills desses clientes. Esta distribuição local contém apenas os documentos, não instala plugin, servidor MCP, Node.js, Svelte nem dependências do projeto.

Antes de usar, tenha um projeto de teste ou uma branch de trabalho, identifique a versão de svelte e leia package.json e svelte.config.js quando existirem. O cliente deve reconhecer a pasta svelte-core-bestpractices e manter references/ no mesmo nível do SKILL.md. A seção sobre recursos assíncronos cita Svelte 5.36 ou superior e exige experimental.async para as funcionalidades mencionadas. Não ative a opção em produção só para reproduzir um exemplo, pois o material a descreve como experimental e sujeito a mudanças.

Instalação e configuração

Baixe o pacote documental do Bastidores, compare seu SHA-256 com o registro abaixo e abra ORIGEM.md e LICENSE. Extraia em uma pasta chamada svelte-core-bestpractices dentro do diretório de Skills reconhecido pelo seu agente. Mantenha o arquivo principal e as nove referências juntos, porque os links relativos do texto principal apontam para references/. Consulte a documentação do cliente para saber se a pasta deve ficar no projeto ou no perfil do usuário.

O método manual é adequado para inspecionar exatamente o que foi instalado. Se preferir o plugin oficial completo, a instrução da equipe Svelte para Codex CLI mostra como registrar o marketplace e selecionar o plugin. Essa é outra ação: o plugin inclui servidor MCP e agente especializado, além das Skills, e deve ser revisado em escopo próprio. Não confunda o ZIP deste catálogo com a instalação desse conjunto. Para Claude Code, Copilot CLI e OpenCode há instruções separadas no mesmo repositório oficial.

Depois de copiar os documentos, reinicie ou recarregue a sessão se o cliente exigir. Peça ao agente que informe o nome da Skill e quais arquivos leu antes de conceder acesso ao projeto. Se ela não aparecer, confira o caminho da pasta, o nome SKILL.md e se o cliente oferece suporte ao formato. Não coloque chaves, arquivos .env ou dados de cliente dentro do diretório distribuído.

Primeiro uso e resultado esperado

Comece com uma tarefa pequena e reversível em um componente de teste. Por exemplo: “Leia a Skill svelte-core-bestpractices e revise este componente sem editar arquivos. Identifique se algum valor derivado está sendo copiado por $effect, mostre as linhas envolvidas e proponha um diff mínimo”. O resultado esperado é uma explicação ligada ao código real, uma alternativa com $derived quando couber e a indicação dos testes que ainda precisam ser executados. Não aceite “ficou mais rápido” sem medir no projeto.

Um segundo caso é uma lista cujo elemento muda de lugar. Peça que o agente avalie se o bloco {#each} possui uma chave estável e se a identidade escolhida pertence ao item, não à posição. Para props e estilos, peça a comparação entre o comportamento atual e o proposto. A Skill oferece critérios, mas não deve substituir o julgamento de quem conhece a interface. Antes de aplicar, veja o diff, execute as verificações configuradas no repositório e teste a interação no navegador. Caso não haja testes, registre essa limitação em vez de declarar a mudança validada.

Não executamos uma aplicação Svelte nem um benchmark com este ZIP. Verificamos a integridade documental e descrevemos um procedimento que o leitor pode repetir. O conteúdo da Skill pode inspirar uma solução, mas o resultado concreto depende da versão e do código que você fornecer ao agente.

Permissões, privacidade e riscos

O pacote local é texto Markdown e não executa nada por si só. O risco aparece nas permissões dadas ao agente que o lê. Para revisar um componente, comece com acesso de leitura à pasta necessária e só autorize edição depois de entender o plano. Execução de comandos, instalação de pacotes e acesso à rede são passos separados. Se o agente propuser adicionar dependência, usar o servidor MCP do plugin ou alterar a configuração experimental, exija justificativa, escopo e revisão do diff.

O documento alerta para estado compartilhado em módulo, que pode vazar entre usuários na renderização do servidor; ele sugere considerar contexto com escopo apropriado. Isso não é prova de vazamento no seu aplicativo, mas um motivo para examinar onde cada valor é criado. Também alerta que blocos #key recriam o conteúdo interno quando a expressão muda, e que efeitos não devem virar remendo automático para sincronizar estado. Trate essas observações como perguntas de revisão, não como autorização para refatoração ampla.

Se o projeto contém dados privados, não copie arquivos além do necessário para a conversa com o agente. Remova tokens e informações pessoais dos exemplos. A licença MIT permite distribuir o texto da Skill com o aviso preservado, mas não concede acesso a repositórios privados nem direitos sobre conteúdos de terceiros que seu projeto inclua.

Erros comuns e limites

Se o agente não encontrar uma referência, confira se os nove arquivos continuam dentro de references/, pois mover apenas SKILL.md quebra os caminhos relativos. Se a sugestão usar API que não existe na versão instalada, consulte a documentação oficial do Svelte e o package.json do projeto antes de atualizar dependências. Se a solução trocar um $effect por $derived e ainda assim o valor não atualizar, verifique se a entrada é reativa e se a prop pode mudar, em vez de adicionar outro efeito.

Outro erro é ativar experimental.async sem conferir efeitos na aplicação. A referência empacotada relata limitações e possíveis mudanças de comportamento. Use uma branch de teste e mantenha a opção desligada se não houver necessidade clara. Em listas, uma chave baseada no índice pode mascarar o problema, porque a posição não identifica o dado quando a ordem muda. Em CSS, :global tem alcance maior que uma propriedade customizada e exige revisão do seletor.

Versão, licença e download local

A cópia foi fixada no commit f47bce873ee2dd090bb776bb4058f5d431c34380, associado ao release svelte-core-bestpractices-v2026.10.14-074604 de 14 de outubro de 2026. A equipe Svelte mantém o repositório sveltejs/ai-tools. Em 16 de outubro de 2026, a API do GitHub registrava 335 estrelas, abaixo do critério editorial preferencial de mil. A inclusão usa a exceção para Skill oficialmente mantida por fornecedor, com documentação, release e licença MIT verificáveis; não é uma alegação de adoção ampla.

O ZIP hospedado no Bastidores traz SKILL.md, nove referências Markdown, LICENSE e ORIGEM.md. Não contém plugin, executável, dependências ou credenciais. SHA-256 do ZIP: 841acf568ddb9abe9bf8bdd520a09fb84d9bc40b32b7a09efe6992bce75cdde7. O hash do SKILL.md de origem está em ORIGEM.md. Guarde esse registro se precisar comparar uma versão futura.

Fontes primárias

Conferimos o diretório canônico da Skill no commit, o release correspondente, a lista oficial de Skills, as instruções de instalação do plugin e a licença do repositório. O botão para o repositório oficial, no card desta página, é separado do download local e abre a fonte que pode mudar depois do commit auditado.