agentleFS
Sign inStart free
jscott3201jscott3201/yet-more-skills/skills/svelte-components-runes/SKILL.md

svelte-components-runes

Skill4 starsChanged 2 months agoApache-2.0View on GitHub

Implement or review Svelte components and reactive modules, including version-supported runes, snippets, ownership, effects, and external integrations. Not for React components or automatic migrations.

The file

We split this skill into the rules it gives an agent

9 rules. About 0 are common, 8 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈8

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Read the installed Svelte version, compiler options, component mode, local conventions, and checking/test commands.

    line 10
  2. Distinctive:

    Use reactive state for values that must drive reactive consumers.

    line 17
  3. Distinctive:

    Keep ownership explicit across props and bindings.

    line 22
  4. Distinctive:

    Do not make an effect callback async and expect a returned promise to become its teardown.

    line 29
  5. Distinctive:

    Prefer an event handler for a user action.

    line 30
  6. Very specific:

    Use the project's snippet, event, and component conventions, not React children/hooks or Radix asChild copied into a Svelte component.

    line 35
  7. Distinctive:

    Use the Svelte-specific shadcn skill for its primitives.

    line 37
  8. Distinctive:

    Run the project's Svelte-aware type/compiler checks and focused component tests.

    line 39
  9. Distinctive:

    Read practice notes and sources only when the task needs more depth.

    line 46

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Svelte Components and Runes

Inspect the Svelte context

Read the installed Svelte version, compiler options, component mode, local conventions, and checking/test commands. Distinguish a plain Svelte/Vite client from SvelteKit. Do not convert a working legacy component or enable experimental compiler features as an incidental fix. Match newly used APIs to the actual supported version.

Model reactivity with one owner

Use reactive state for values that must drive reactive consumers. Prefer a derived value for computations from state instead of maintaining a second value through an effect. Keep derived expressions free of side effects. Understand whether data is deeply proxied, an ordinary class instance, or raw state updated by replacement before choosing a mutation strategy.

Keep ownership explicit across props and bindings. Do not mutate parent-owned objects casually or snapshot a changing prop into a one-time local value accidentally. Destructuring ordinary reactive objects can lose a live relationship; distinguish that from Svelte's supported $props syntax. Use stable keys for identity-bearing lists.

Effects are for external synchronization, with cleanup for listeners, observers, and imperative widgets. Read dependencies intentionally and handle async work without stale result acceptance. Do not make an effect callback async and expect a returned promise to become its teardown. Prefer an event handler for a user action. Use version-supported attachment/action APIs without migrating every existing integration to the newest syntax.

Compose and validate

Use the project's snippet, event, and component conventions, not React children/hooks or Radix asChild copied into a Svelte component. Preserve labels, focus, and keyboard behavior. Use the Svelte-specific shadcn skill for its primitives.

Run the project's Svelte-aware type/compiler checks and focused component tests. When permitted and available, official Svelte documentation/MCP analysis can help investigate unfamiliar syntax; review suggestions against source and behavior. Tool availability does not justify claiming a check ran, and an autofixer is not a replacement for tests or human-readable code.

Further guidance

Read practice notes and sources only when the task needs more depth.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free