Synthèse automatique
Cette compétence guide l'écriture et la relecture de code Svelte 5 et SvelteKit en imposant les runes, des patterns de composants modernes et des conventions de routage.
Points forts
- Impose clairement les runes Svelte 5 et liste explicitement les API héritées à éviter
- Fournit des exemples concrets pour le pattern composable createX() et le pattern de contexte par Symbol
- Couvre aussi bien l'architecture des composants que le routage SvelteKit et les tests
- Inclut des règles de réactivité précises ($state, $derived, $effect, $props, $bindable)
Limites
- Suppose une base Svelte 5 déjà installée et ne traite pas des migrations depuis Svelte 4
- Les conseils sur les tests restent succincts, sans exemples de code
Utilisez cette compétence lorsque vous écrivez ou révisez du code Svelte 5 ou SvelteKit et souhaitez éviter les anciens patterns.
Ne l'utilisez pas pour des projets Svelte 3 ou 4 où les runes et les callback props ne sont pas disponibles.
Analyse de sécurité
SûrThe skill is a pure documentation/guidance file with code examples and no declared tools or execution instructions. It does not request secrets, network calls, file deletion, shell commands, or any destructive behavior.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Write a Svelte 5 component for a toggleable settings panel using $state, $derived, and $props with TypeScript types.Refactor this Svelte component to Svelte 5 runes: replace export let with $props(), $: with $derived, and on:click with onclick.Extract the counter logic from this component into a createCounter() composable in a .svelte.ts file with readonly getters.name: svelte-best-practices description: Svelte 5 runes, component patterns, stores, transitions, and SvelteKit routing. Use when writing or reviewing Svelte code.
Svelte 5 Best Practices
Runes Only
Svelte 5 uses runes. No legacy patterns.
Use: $state, $derived, $effect, $props, $bindable
Don't use: export let, $:, on:click, writable, readable, derived
<!-- Correct -->
<script lang="ts">
let count = $state(0);
let doubled = $derived(count * 2);
function increment() {
count++;
}
</script>
<button onclick={increment}>{doubled}</button>
Component Architecture
- One component per file
- Props via
$props()with TypeScript types - Events via callback props (not
createEventDispatcher) - Slots via
{@render children()} - Reactive declarations via
$derived, not$:
Composable Pattern (createX())
All stateful logic lives in .svelte.ts files using the createX() pattern:
export function createCounter(initial = 0) {
let count = $state(initial);
let doubled = $derived(count * 2);
return {
get count() { return count; },
get doubled() { return doubled; },
increment() { count++; },
reset() { count = initial; },
};
}
Key rules:
- Return readonly getters for state
- Keep state private inside the closure
- Export types alongside the function
- Use
.svelte.tsextension for files containing runes
Context Pattern
Shared state uses Symbol keys with centralized factories:
// sidebar-context.svelte.ts
const SidebarContext = Symbol('sidebar');
export function setSidebar(state: SidebarState) {
setContext(SidebarContext, state);
}
export function getSidebar(): SidebarState {
return getContext(SidebarContext);
}
Reactivity Rules
$statefor mutable reactive state$derivedfor computed values (never assign)$effectfor side effects (return cleanup function)$effect.prefor effects that need to run before DOM update$props()for component inputs$bindable()for two-way binding props
SvelteKit Conventions
+page.sveltefor routes+layout.sveltefor shared layout+page.server.tsfor server-side data loading+error.sveltefor error boundaries- Use
goto()for programmatic navigation - Use
invalidateAll()to refresh data
Testing
@testing-library/sveltefor component testsvitestfor unit tests- Test user interactions, not implementation details
- Mock external dependencies (API calls, stores)
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/svelte-5-best-practices-mrwakfqc' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/svelte-5-best-practices-mrwakfqc/download' --output '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md.part' && mv '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md.part' '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && test -s '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/svelte-best-practices' && cp -R '.skill-downloads/svelte-5-best-practices-mrwakfqc' '.claude/skills/svelte-best-practices'Cursor
test -f '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && test -s '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/svelte-best-practices' && cp -R '.skill-downloads/svelte-5-best-practices-mrwakfqc' '.cursor/skills/svelte-best-practices'Codex
test -f '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && test -s '.skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/svelte-best-practices' && cp -R '.skill-downloads/svelte-5-best-practices-mrwakfqc' '.agents/skills/svelte-best-practices'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/svelte-5-best-practices-mrwakfqc'openskills read 'svelte-5-best-practices-mrwakfqc'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/svelte-5-best-practices-mrwakfqc/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.