# svelte-development

Guides coding assistants on Svelte 5 conventions, focusing on reactivity runes, scoped styling, and component props.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 434 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/svelte-development/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/svelte-development

## What it does

This skill injects Svelte 5 guidelines directly into the agent context. It instructs the assistant to use modern runes such as `$state`, `$derived`, `$effect`, and `$props` rather than legacy syntax.

The reference material covers single-file component anatomy, scoped CSS, event dispatching, and slot projection. Generating code with these patterns breaks immediately on projects configured for older Svelte versions lacking runes support.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svelte-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svelte-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svelte-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svelte-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace svelte-development
```

2. **Manually: put the files in place**
- File: `.github/skills/svelte-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/svelte-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svelte-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/svelte-development/SKILL.md

## When to use it
- manage reactive local state using $state and $derived runes
- define typed component interfaces with the $props rune
- handle lifecycle logic and timers with cleanup in $effect
- build isolated UI components with scoped styles and slots

## Example prompts
- Create a counter component using Svelte 5 runes with doubled count logic.
- Build a modal component featuring named slots and backdrop click handling.
- Define a TypeScript card component that accepts typed properties via $props.

## Similar
- [svelte](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-svelte.md) — skill · 343 installs
- [svelte-core-bestpractices](https://affpapa.org/en/nevibecode/skills/svelte-core-bestpractices.md) — skill · 10900 installs
- [svelte-runes](https://affpapa.org/en/nevibecode/skills/svelte-runes.md) — skill · 1000 installs
- [shadcn-svelte](https://affpapa.org/en/nevibecode/skills/shadcn-svelte.md) — skill · 6700 installs
- [svelte5-best-practices](https://affpapa.org/en/nevibecode/skills/svelte5-best-practices.md) — skill · 16600 installs
- [svelte-code-writer](https://affpapa.org/en/nevibecode/skills/svelte-code-writer.md) — skill · 13000 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 65 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md