# Svelte Code Writer

> Svelte code writing and validation workflow. Use when creating, editing, reviewing, or debugging .svelte, .svelte.ts, or .svelte.js files.

- Skill: `spences10/svelte-code-writer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add spences10/svelte-code-writer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spences10/svelte-code-writer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: spences10 (https://skillmd.com/u/spences10)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/spences10/svelte-code-writer

---


<!-- Inspired by the official Svelte AI `svelte-code-writer` skill: https://svelte.dev/docs/ai/skills -->

# Svelte Code Writer

Use this workflow when creating, editing, reviewing, or debugging Svelte files.

## Workflow

1. Load `svelte-core-bestpractices` for baseline Svelte 5 rules.
2. Load deeper local skills as needed: `svelte-runes`, `svelte-template-directives`, `svelte-styling`, `sveltekit-data-flow`, or `sveltekit-structure`.
3. Check relevant official docs when syntax or behavior is uncertain.
4. Validate changed Svelte files before finalizing.

## Official Svelte CLI Helpers

List documentation sections:

```bash
npx @sveltejs/mcp list-sections
```

Fetch relevant documentation sections:

```bash
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
```

Analyze a Svelte file:

```bash
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
```

If a project uses async Svelte features, include `--async`:

```bash
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte --async
```

## Notes

- Prefer checking docs for exact syntax over guessing.
- Escape `$` when passing inline rune code through a shell.
- Run validation on every changed `.svelte`, `.svelte.ts`, and `.svelte.js` file when practical.
- **Last verified:** 2026-05-14