Claude Code Plugins

Community-maintained marketplace

Feedback

svelte5

@archoda/covenant
0
0

Guidance for building Svelte 5 components with runes, JSDoc-typed props/state, snippets/slots, events, and accessibility/styling. Use when editing `.svelte` files, designing component APIs, handling component state/effects, or debugging rendering issues; pair with `sveltekit2` for routing/load/action work.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name svelte5
description Guidance for building Svelte 5 components with runes, JSDoc-typed props/state, snippets/slots, events, and accessibility/styling. Use when editing `.svelte` files, designing component APIs, handling component state/effects, or debugging rendering issues; pair with `sveltekit2` for routing/load/action work.

Svelte 5

Overview

Use this skill for component-level work in Svelte 5: runes-based state, props/events, snippets/slots, styling, and accessibility. For routing, load/actions, or endpoints, load the companion sveltekit2 skill alongside this one.

Quick start

  • Reach for official syntax when uncertain: https://svelte.dev/docs/llms.txt (light) or https://svelte.dev/docs/llms-full.txt (full).
  • Check repo conventions before coding: .github/AGENTS.md, .github/AGENTS-SVELTE.md, .github/AGENTS-SVELTE-JSDocs.md. If doing SEO/GEO, also .github/AGENTS-SEO-GEO.md.
  • Prefer $state, $derived, $effect, $props, $bindable for reactivity; keep components small and extract shared pieces to $lib.
  • Document props/state with JSDoc before $props() destructuring; type event payloads and async handlers.
  • Keep styling scoped; reuse existing tokens/utilities; ensure ARIA/keyboard support on interactive elements.
  • Treat error handling as part of the component contract: use svelte:boundary or shared ErrorBoundary components, surface user-friendly fallbacks, and let unrecoverable faults bubble to SvelteKit error routes.
  • If the change touches data loading/mutations/routing, pull in the sveltekit2 skill for load/actions/endpoint patterns.

Workflow

  1. Clarify component contract: props (typed), events, slots/snippets, bindables. Keep single responsibility and reuse $lib for shared logic.
  2. Model state with runes ($state for local mutation, $derived for computed values, $effect for side-effects). Guard expensive effects and clean up subscriptions.
  3. Compose UI with snippets/slots; pass fallbacks via snippets for resilience.
  4. Wire events with createEventDispatcher or callbacks; type payloads. Sanitize any HTML before {@html ...}.
  5. Style and ensure accessibility: semantic elements, labels/roles, focus order, keyboard handlers. Use keyed {#each} for lists and minimal work inside effects.
  6. Test when behavior changes. For SvelteKit apps, see sveltekit2 references for Vitest/Playwright commands.

References

  • references/runes.md — rune patterns for props/state/effects, snippets, events/bindings.
  • references/components-and-testing.md — component composition, accessibility/styling reminders, and lightweight test pattern; see sveltekit2 for app-level CLI/tests.