🎯

svelte-components

🎯Skill

from spences10/svelte-claude-skills

What it does

Builds and manages Svelte web components, form patterns, and component library integrations with best practices and accessibility.

📦

Part of

spences10/svelte-claude-skills(7 items)

svelte-components

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add spences10/claude-code-toolkit

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add spences10/svelte-skills-kit

Install PluginInstall plugin from marketplace

/plugin install toolkit-skills@spences10-claude-code-toolkit

Install PluginInstall plugin from marketplace

/plugin install svelte-skills@spences10-svelte-skills-kit

git cloneClone repository

git clone https://github.com/yourusername/svelte-claude-skills.git ~/.claude/skills/svelte

+ 1 more commands

📖 Extracted from docs: spences10/svelte-claude-skills

Need more details? View full documentation on GitHub →

5Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

Overview

# Svelte Components

Quick Start

Component libraries: Bits UI (headless) | Ark UI | Melt UI

(primitives)

Form trick: Use form attribute when form can't wrap inputs:

```svelte

```

Web Components

```javascript

// svelte.config.js

export default {

compilerOptions: {

customElement: true,

};

```

```svelte

```

Reference Files

[component-libraries.md](references/component-libraries.md) - Bits

UI, Ark UI setup

[web-components.md](references/web-components.md) - Building custom

elements

[form-patterns.md](references/form-patterns.md) - Advanced form

handling

Notes

Bits UI 1.0: flexible, unstyled, accessible components for Svelte
Form defaultValue attribute enables easy form resets
Use snippets to wrap rich HTML in custom select options
Last verified: 2025-01-14

More from this repository6

🎯

sveltekit-structure🎯Skill

Provides comprehensive guidance for structuring SvelteKit projects, covering routing, layouts, error handling, and SSR best practices.

🎯

sveltekit-data-flow🎯Skill

Guides SvelteKit developers through optimal data flow strategies, load function selection, form actions, and server-client data handling patterns.

🎯

svelte-runes🎯Skill

Provides comprehensive guidance for Svelte runes, helping developers correctly implement reactive state, props, effects, and attachments in Svelte 5.

🎯

sveltekit-remote-functions🎯Skill

Enables type-safe, schema-validated remote function calls in SvelteKit using command(), query(), and form() patterns with server-side execution.

🎯

research🎯Skill

Fetches, reads, and verifies source content to provide accurate research findings by directly examining original documents.

🎯

svelte-deployment🎯Skill

Deploys Svelte projects with adapter configurations, Vite setup, pnpm management, and production build optimizations.