frontend

svelte-skills

Claude Code plugin marketplace for Svelte developers. Disciplined workflows for frontend development, Svelte components, and Svelte 5 migration.

Plugins

Five plugins. Four with layered dependencies, one standalone:

agent  <--  frontend  <--  svelte-5  <--  svelte-5-migration
bonus (standalone)

Plugin	Skills/Hooks	What it does
agent	4 skills	Research, planning, self-checks, completion verification
frontend	11 skills	Validation, pixel-perfect, editing, code style, testing, migration
svelte-5	5 skills	Svelte code style, component docs, Storybook, Svelte testing
svelte-5-migration	1 skill	Svelte 3/4 to 5 migration workflow
bonus	2 hooks	nogrep (force dedicated tools), formatter (auto-format after edits)

Installation

1. Add the marketplace

/plugin marketplace add fubits1/svelte-skills

For local development/testing:

/plugin marketplace add /path/to/svelte-skills

2. Install prerequisites

Superpowers plugin (required by agent):

/plugin install superpowers

Svelte MCP (required by svelte-5 and svelte-5-migration). Provides svelte:svelte-code-writer, svelte:svelte-core-bestpractices, and the Svelte autofixer (mcp__svelte__svelte-autofixer):

/plugin marketplace add sveltejs/ai-tools
/plugin install svelte

Or directly via CLI:

claude mcp add -t stdio -s project svelte -- npx -y @sveltejs/mcp

Playwright MCP (required by frontend). Provides browser screenshots, navigation, and browser_evaluate for measurements:

claude mcp add playwright -- npx @playwright/mcp@latest

See Playwright MCP docs for options (headless, scope, etc.).

Storybook MCP (optional, used by svelte-5:storybook). Provides story instructions and preview tools:

pnpm add -D @storybook/addon-mcp

Then add @storybook/addon-mcp to your .storybook/main.ts addons. The MCP server runs at http://localhost:6006/mcp when Storybook is running. See @storybook/addon-mcp.

3. Install the plugins (in order)

/plugin install agent
/plugin install frontend
/plugin install svelte-5
/plugin install svelte-5-migration
/plugin install bonus

bonus is standalone and optional — install it independently of the others.

4. Set up your project

See SETUP.md for copying template scripts, wiring package.json tasks, and installing dev dependencies.

Skill behavior

Skills in this marketplace have auto-invocation triggers defined in their descriptions. Claude Code may invoke them automatically when it detects relevant context (e.g., editing a .svelte file, declaring a task done, starting a migration). You can also invoke any skill manually at any time via /skill-name. To disable auto-invocation for a specific skill, add disable-model-invocation: true to that skill's SKILL.md frontmatter.

Context budget

Claude Code allocates 1% of context window (fallback: 8,000 chars) for skill descriptions. Each description is capped at 250 chars. With this marketplace (~21 skills) plus superpowers (~14) and Svelte MCP (~2), you'll have ~37 skill descriptions loaded.

• Opus 4.6 (1M context): budget is ~40,000 chars. 37 skills fit comfortably.
• Sonnet (200k context): budget is ~8,000 chars. Descriptions may get truncated, reducing auto-invocation accuracy.

Run /context to check for budget warnings. Override with SLASH_COMMAND_TOOL_CHAR_BUDGET=<chars>.

Source: Claude Code skills docs

Complementary resources

• For forward-looking Svelte 5 or SvelteKit specific skills, see spences10/svelte-skills-kit.
• mattpocock/skills — standalone skills including grill-me (get relentlessly interviewed about a plan or design — or use it to grill the agent about its own plan before it starts implementing).

Recommended tooling

These tools are referenced by the skills. Not all are required -- install what your project uses.