Skip to main content
skill CX Codex

svelte-development — Claude Code skill: what it does, how to install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code
Open on GitHub

What svelte-development 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.

What it helps with

  • 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 for the agent

  • 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.

How to install svelte-development

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code

2Manually: put the files in place

~/.claude/skills/svelte-development/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/svelte-development/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about svelte-development

How do I install svelte-development in Claude Code?

Run npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code. Alternatively, copy the skill file to ~/.claude/skills/svelte-development/SKILL.md.

What does the svelte-development skill do?

It provides syntax references for Svelte 5, preventing the assistant from emitting obsolete export let statements or dollar label reactivity.

Does this skill cover TypeScript support?

Yes, it contains examples for typing component properties by passing TypeScript interfaces to $props.

Similar skills

All skills for Frontend and UI →

From the same set65

mlops-workflows Integrates MLflow practices into your AI coding assistant. The skill guides experiment tracking, model registry management, and parameter logging. CX Codex +1 444installs dbt-data-transformation A dbt skill for analytics engineering: models, tests, docs, incremental builds, macros and packages. Useful when your warehouse SQL needs structure. CX Codex +1 441installs shell-testing-framework This skill guides Bash test design, from Arrange–Act–Assert structure to coverage checks and performance validation. CX Codex +1 439installs apache-airflow-orchestration A skill for Apache Airflow work: writing DAGs, wiring task dependencies, branching, and getting pipelines ready for production. CX Codex +1 437installs terraform-infrastructure Guides the AI agent in writing HashiCorp Configuration Language code for AWS, Azure, and GCP, covering reusable modules, variable validation, and multi-environment state. CX Codex +1 437installs claude-sdk-integration-patterns A skill with ready patterns for the Claude API and TypeScript SDK: streaming, tool use, error handling, token savings. CX Codex +1 434installs unix-goto-development Walks an agent through adding features to the unix-goto navigation tool: a 9-step workflow, 100% test coverage, and sub-100ms cached navigation. CX Codex +1 427installs FastAPI Customer Support Tech Enablement Guides agents in building customer support APIs with FastAPI, covering ticket workflows and operator authentication. CX Codex +1 422installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor