skills.rest
spences10
spences10COMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte-components

Provide reusable Svelte component patterns for web components and libraries.

Updated Dec 15, 2025
Search Tags:#svelte#snippets#web-components#slots#form-patterns#component-libraries
One-click install
npx skills add https://github.com/spences10/claudefiles --skill svelte-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-components
Source: https://github.com/spences10/claudefiles/tree/main/skills/svelte-components
Command: npx skills add https://github.com/spences10/claudefiles --skill svelte-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides patterns and guidance for building reusable Svelte components, libraries, and web components.

Core Features & Use Cases

  • Web Components: How to create customElement components.
  • Component libraries: Guidance for Bits UI, Ark UI, Melt UI.
  • Form patterns: Advanced patterns for forms and slots.

Quick Start

Create a simple custom element and wire it into a page.

Frequently Asked Questions about svelte-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build reusable Svelte components?▼

Build reusable Svelte components by applying standardized patterns for slots, snippets, and form behavior. The Skill provides component patterns for web components, libraries like Bits UI and Ark UI, and third-party integrations to guide your implementation.

Can I use Svelte with web components and custom elements?▼

Yes, Svelte supports web components through customElement implementations. This Skill covers how to create and wire custom elements into pages, with compatibility guidance for Svelte 5.

What component libraries work with Svelte?▼

Bits UI, Ark UI, and Melt UI are component libraries compatible with Svelte. This Skill provides library-agnostic guidance on integrating these libraries into your component architecture.

How do I implement advanced form patterns in Svelte?▼

Advanced form patterns in Svelte leverage slots and snippets for flexible, reusable form components. This Skill provides sample code blocks and reference files demonstrating form behavior and integration scenarios.

What's the difference between building Svelte components and web components?▼

Svelte components are framework-specific, while web components are standards-based custom elements. This Skill covers both approaches, helping you choose when to use native web components versus Svelte-native patterns.

Do I need to refactor existing components to use these patterns?▼

Refactoring is optional and depends on your project needs. This Skill provides guidance on applying patterns to standardize implementations across new and existing components, with reference files to support the process.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
zxpmailzxpmail
18

release-builder

Automate build, test, and publish lifecycle for web, desktop, and CLI applications.

Community
Advanced
cofincofin
15

svelte

Develop Svelte 5 components using runes for state and reactivity.

Community
Intermediate
haxlyshaxlys

web-component-design

Document reusable UI component patterns for React, Vue, and Svelte.

Community
Intermediate