Epicenter
Local-first, open source apps
Skills give AI assistants like Claude Code project-aware context about shadcn-svelte. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
For example, you can ask your AI assistant to:
- "Add a login form with email and password fields."
- "Create a settings page with a form for updating profile information."
- "Build a dashboard with a sidebar, stats cards, and a data table."
The skill reads your project's components.json and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
Install
This installs the shadcn-svelte skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn-svelte components.
Learn more about skills at skills.sh.
What's Included
The skill provides your AI assistant with the following knowledge:
Project Context
On every interaction, the skill reads your components.json to get your project's configuration: framework (SvelteKit, Vite, Astro), Tailwind version, aliases, installed components, icon library, and resolved file paths.
CLI Commands
Full reference for the shadcn-svelte CLI commands: init, add, and registry build. Includes flags and smart merge workflows.
Theming and Customization
How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.
Registry Authoring
How to build and publish custom component registries: registry.json format, item types, file objects, dependencies, CSS variables, building, and hosting.
How It Works
- Project detection — The skill activates when it finds a
components.jsonfile in your project. - Context injection — It reads your project configuration and injects it into the assistant's context.
- Pattern enforcement — The assistant follows shadcn-svelte composition rules: using
Field.Groupfor forms, namespace imports, Svelte 5 runes, and correct Bits UI APIs. - Component discovery — The assistant checks installed components and local docs before generating code.