Skeleton Svelte
Builds theme-aware, responsive user interfaces in Svelte using the Skeleton UI component library and its design patterns.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Implementation patterns for using built-in design presets
- State management patterns using Svelte 5 runes
- Workflows for creating responsive layouts with semantic HTML
- Best practices for Skeleton's component composition pattern
- Guidance on Skeleton's theme-aware color pairing system for automatic dark mode
Use cases
- Creating a responsive page layout, like a dashboard or a two-column view.
- Building a new UI component, such as a card or dialog, using Skeleton's composed elements.
- Styling an application to support both light and dark themes without manual prefixes.
FAQ
What does the Skeleton Svelte skill do?
This skill enhances Claude's ability to build user interfaces in Svelte using the Skeleton UI component library. It provides expert guidance on Skeleton's core principles, including its theme-aware color system, component composition, design presets, and responsive layout patterns.
How does this skill improve my workflow?
It speeds up development by providing correct, best-practice implementations for Skeleton's features. The skill ensures you use theme-aware color pairings for automatic dark mode and proper component composition, reducing errors and saving time on documentation lookups.
What key capabilities does this skill provide?
It provides workflows for building components and layouts, guidance on Skeleton's unique theme-aware color pairing system, best practices for component composition and design presets, and state management patterns using Svelte 5 runes within Skeleton components.
When should I use this skill?
Use this skill when building UI components, styling elements, or creating page layouts in Svelte 5 and SvelteKit 2+ projects that use the `@skeletonlabs/skeleton-svelte` library. It's ideal for tasks requiring theme-aware and responsive design.
Related skills
Next.js React Implementation
Generates production-ready Next.js/React components with TypeScript, Tailwind CSS, Vitest tests, and Storybook stories from design specifications.
Design Tools212 ptsReact Component Creation
Guides the creation of standardized, production-ready React components using best practices for TypeScript, CSS Modules, Storybook, and testing.
Design Tools212 ptsComponent Layer
Standardizes React component development by enforcing shadcn/ui patterns and structured directory organization for scalable frontend architectures.
Design Tools12 pts