What is the shadcn-svelte skill?
The shadcn-svelte skill is a folder in the huntabyte/shadcn-svelte repository that guides an agent through components.json, the CLI and component composition for Svelte projects. It enforces rules on styling, forms, icons and imports, and prefers existing components over custom markup. It does not build non-Svelte apps.
The shadcn-svelte skill lives in the skills folder of the huntabyte/shadcn-svelte repository. Its SKILL.md says it manages components and projects: adding, updating, fixing, debugging, styling and composing, triggered by a components.json file or registry URLs.
The project itself is an unofficial, community-led Svelte port of shadcn/ui, made with the original author's blessing but not affiliated. The skill packages its conventions so an agent stops guessing and follows them.
Rules the agent has to follow
- Styling: use class for layout, never for restyling a component. Use flex gap rather than space-x or space-y, and size-* when width equals height.
- Colors: semantic tokens such as bg-primary and text-muted-foreground, never raw values like bg-blue-500, and no manual dark: overrides.
- Forms: wrap controls in Field.FieldGroup and Field.Field, and mark errors with data-invalid on the field plus aria-invalid on the control.
- Composition: Dialog, Sheet and Drawer always need a Title, Avatar needs a Fallback, and Button has no isLoading prop, so combine Spinner with disabled.
- Icons: place them with data-icon set to inline-start or inline-end, and add no sizing classes.
How the agent works through a task
- Read components.json to learn the aliases, the Tailwind CSS file, the style and the icon library.
- Check which components are already installed before adding anything.
- Run the CLI add command with no arguments to discover what the registry offers.
- Add a component by name or by registry URL, then fix imports for anything added by URL.
- Review the added files, and confirm with you before using an unknown registry URL.
Who the shadcn-svelte skill is for
Best for
- SvelteKit and Svelte 5 projects that already use, or want to start with, shadcn-svelte components.
- Teams tired of agents reaching for custom markup or arbitrary colors when a component exists. A related review pass is shadcn-improve.
- Anyone composing screens from parts, such as a settings page from Tabs, Card and form controls.
Not for
- React projects. The React original is covered in shadcn, and its import style differs from the Svelte one here.
- Projects with no components.json. The skill starts from that file and expects the CLI.
- Defining a brand from scratch. For tokens and scale choices, read tailwind-design-system.
Use it with UiChemy
A SvelteKit app built with this skill is not a WordPress site. If the screen design starts in Figma, Figma to WordPress converts it. Click Get Started on uichemy.com, then review the result in the editor.
Before building, settle the form layout with form-design and write down each part in a component-spec. The skill's composition rules then map cleanly onto those parts when the agent builds.
How to install shadcn-svelte Skill: Svelte UI Components Done by the Rules
git clone https://github.com/huntabyte/shadcn-svelte.gitClone the repository
Run
git clone https://github.com/huntabyte/shadcn-svelte.git. The skill sits in the skills/shadcn-svelte folder, beside the main library source.Copy the skill folder
Copy skills/shadcn-svelte into the place your agent loads skills from. Keep SKILL.md together with the rules folder, cli.md and customization.md, because SKILL.md points to them.
Work inside a project with components.json
Open a Svelte project where components.json exists or will be created by the CLI. Its docs list
initas the way to set one up.Ask for a component task
Ask the agent to add a component, fix an import or compose a screen. The skill is marked user-invocable false, so the agent loads it from its description, not by a slash command.
Check that it loaded
Ask the agent to add a dialog with a form. It should read components.json, use the namespace import for Dialog, include a Dialog title, wrap fields in Field groups, and use semantic colors without raw values.
Key features
- Project context firstThe agent reads components.json and lists the directory behind the aliases.ui setting. It then knows the Tailwind CSS file, the style, the icon library and the registry before it touches code.
- Svelte import rulesMulti-part components use a namespace import such as
import * as Dialog from "$lib/components/ui/dialog". Single-component barrels use named imports like { Button }. - Components before custom markupAlert for callouts, Empty for empty states, svelte-sonner for toasts, plus Separator, Skeleton and Badge. The skill says to use these instead of hand-built divs.
- Composition recipesA Settings page becomes Tabs plus Card plus form controls. A Dashboard becomes Sidebar plus Card plus Chart plus Table. Built-in variants come before any custom styling.
- Styling rules filerules/styling.md covers layout-only classes, flex gap, size-*, the truncate shorthand, cn() for conditional classes and no manual z-index on overlays.
- Forms rules filerules/forms.md covers Field groups, InputGroup with Addon for buttons inside inputs, ToggleGroup for two to seven options and FieldSet with FieldLegend for grouped checkboxes and radios.
- Icon handlingrules/icons.md says to pass icons as components from the configured iconLibrary, for example @lucide/svelte, and to position them with data-icon rather than size classes.
- Component selection tableA lookup maps needs to parts: Dialog, Sheet and Drawer for overlays, Command inside a Dialog for search, Chart for LayerChart graphs, and menus, tooltips and navigation each with a named choice.
- CLI workflow and presetsCommands cover init, init with a preset code from the design-system builder, add, update, and registry build. Update asks you to commit or stash first. On add, the skill says never to use --overwrite without your explicit approval when it would destroy intentional edits.
- Reference docs per componentDocumentation pages follow the pattern shadcn-svelte.com/docs/components/<name>.md, and the folder also ships cli.md, customization.md and an evals file.
Frequently asked questions
What is the shadcn-svelte skill?
It is an agent skill in the huntabyte/shadcn-svelte repository. It tells a coding agent how to add, update, debug and compose shadcn-svelte components, using rules for styling, forms, icons and imports, and a workflow that begins with reading components.json.
How do I install the shadcn-svelte skill?
Clone the repository and copy skills/shadcn-svelte into your agent's skills folder, keeping the whole folder together. There is no official one-line install command for the skill in the README, so the clone and copy route is the documented-safe path.
Which AI coding agents can use it?
The folder has a standard SKILL.md and an agents/openai.yml file, and the metadata says the skill is not user-invocable. Any agent that loads SKILL.md folders may work, including Claude Code, but the repository does not confirm each one.
Is this the same as the shadcn skill for React?
No. The README calls shadcn-svelte an unofficial, community-led Svelte port of shadcn/ui. The skill targets the Svelte version, with Svelte import patterns, svelte-sonner for toasts and LayerChart for charts. React projects should look at the separate shadcn skill instead.
Does the skill change the CLI commands I run?
It uses the same commands: init, add, update and registry build. It adds judgment around them, such as checking installed components first, committing or stashing before an update, reviewing the git diff after, and asking before using any unknown registry URL.
What does the skill say about colors and spacing?
Use semantic colors like bg-primary and text-muted-foreground, never values like bg-blue-500, and never hand-write dark: overrides. For spacing, use flex with gap instead of space-x or space-y, and use size-* when width and height match.
Why does a Dialog need a title?
The composition rules say Dialog, Sheet and Drawer must include a Title for accessibility. If the title should not show, it can be hidden visually with sr-only. The skill also expects Avatar to include a Fallback and Tabs.Trigger to sit inside Tabs.List.
What license does shadcn-svelte use?
The repository metadata and the README both list the MIT license. The project was built by huntabyte, CokaKoala and the community. Check the repository before redistributing the skill folder or any copied component code.