shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
- 9,205 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent runs `npx shadcn-svelte@latest`, which downloads a package from npm and writes component files into the project
- The `add` command with a registry URL can pull in code from a third-party source that needs review
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/shadcn-svelteDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent runs `npx shadcn-svelte@latest`, which downloads a package from npm and writes component files into the project
- The `add` command with a registry URL can pull in code from a third-party source that needs review
This is third-party code. Review the repository files before installing.
What it does
The skill sits in the skills/shadcn-svelte folder of the shadcn-svelte repository, a Svelte port of shadcn/ui. The agent first reads `components.json` in the project root and learns the path aliases, the global stylesheet, the visual style, the icon library and the component registry. It then lists the `ui` directory so it does not import anything that has not been added, and installs what is missing with `npx shadcn-svelte@latest add`. When a component is unfamiliar, the agent opens its page on shadcn-svelte.com in `.md` form and follows the documented API. The main part of the skill is a set of rules with incorrect and correct pairs across four files: styling, forms, component composition and icons. Among them: forms are built from `Field.FieldGroup` and `Field.Field`, spacing uses `gap-*` instead of `space-y-*`, colors come from semantic tokens such as `bg-primary`, dialogs and sheets always have a title, and an icon inside a button takes `data-icon` with no size classes. The cli.md file describes the `init`, `add`, `apply`, `update` and `registry build` commands with their flags, and customization.md explains CSS variables, OKLCH colors, dark mode and radii. Updating has an order: commit your work, run `update`, resolve conflicts, and never use `--overwrite` without the user's consent.
Who it is for. For developers on SvelteKit, Vite or Astro who build interfaces from shadcn-svelte components together with an agent.
Good fit when
- You need a login or settings form, and the agent should use `Field` rather than hand-made `div` markup
- The agent inserts wrong imports: the skill checks them against `components.json` and the contents of the `ui` directory
- You need a dashboard of a sidebar, cards and a data table without home-made blocks
- The project switched icon libraries and the agent must not default to `@lucide/svelte`
- Components must be updated from the registry without losing your own edits
Not a fit when
- The project has no `components.json`: the skill activates on that file, so installing it adds little
- The interface is written in React with the original shadcn/ui library: there is a separate shadcn-ui entry
- You need documentation and autofix for Svelte itself: the svelte-mcp entry covers that
- The project does not use Tailwind: the skill's rules rely on its classes and semantic tokens
Example request
Add a profile settings page with name and email fields and a notifications toggle, use shadcn-svelte components and show the error state on required fieldsLimitations
- The skill is marked as not user-invocable: the agent loads it by itself when the project has `components.json` or shadcn-svelte comes up, and it has no command of its own.
- The skill's allowed-actions list covers only `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest` and `bunx --bun shadcn-svelte@latest` calls. Any other run falls under your environment's general rules.
- For uncertain spots the skill points to the online docs at shadcn-svelte.com, so offline the agent relies only on the built-in rules and the `ui` directory.
- The folder contains an `agents/openai.yml` file with a name and icons for the Codex environment, and the skill documentation names Claude Code as an example. The source says nothing about other agents.
- Components from third-party registries by URL are installed only after the source is confirmed, and their imports need checking for hardcoded paths.
How to disable. Delete the shadcn-svelte folder from the agent's skills directory (for example `.claude/skills` in the project or the home folder). Components and `components.json` in the project stay, and you can remove them by hand.
FAQ
What does the skill read in the project?
The `components.json` file and the directory that `aliases.ui` points to. From the first the agent takes path aliases, the Tailwind stylesheet, the visual style, the icon library and the registry address, and from the second it learns which components are already added. By default the skill requests nothing else.
How should a form be built?
By the skill a form consists of `Field.FieldGroup` and nested `Field.Field` with `Field.FieldLabel` labels. An error is marked with `data-invalid` on the field and `aria-invalid` on the input itself, and a disabled field uses `data-disabled` and `disabled`. A choice among two to seven options uses `ToggleGroup`, not a loop over buttons.
How do I pass a ready-made design preset when creating a project?
The shadcn-svelte.com site has a builder that produces a preset string. You pass it to `npx shadcn-svelte@latest init --preset <code>`. The cli.md file in the skill lists the other `init` flags too, such as `--base-color` and `--no-deps`.
How do I update components without losing edits?
Commit or stash your changes first. Then run `npx shadcn-svelte@latest update` with a component name or the `--all` flag, review the changes with `git diff` and resolve conflicts. On the `add` command the skill allows the `--overwrite` flag only with the user's explicit consent.
What do the test cases in the evals folder check?
The evals.json file holds three scenarios. The first asks for a settings form with validation and expects `Field.FieldGroup`, `ToggleGroup`, the `data-invalid` and `aria-invalid` pair, `gap-*` spacing and semantic colors. The other two have expectations written the same way and check that the skill's rules are followed.
Discussion
No questions or reviews yet.
Related
Skillsshadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| shadcn-svelte skill for agents (this entry) | yes | 9,205 | ||
| Svelte MCP | yes | not required | 334 | the official Svelte MCP server: documentation and autofix for Svelte 5 itself, with no shadcn component set |
| shadcn/ui | no | 126,414 | the official skill and MCP server of the original shadcn/ui library for React with registry search |
README in short
The repository's front page briefly presents the project as a set of Svelte components modeled on shadcn/ui and links to the documentation site. Details about the skill live on the site's docs/content/skills.md page: it lists what the assistant learns from `components.json`, which CLI commands are covered and how theming and the registry work, and installation is `skills add huntabyte/shadcn-svelte`. The skill folder itself has a SKILL.md file, four rule files, a CLI reference, a theming guide and three test scenarios.
README badge
Original SKILL.md
--- name: shadcn-svelte description: Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs. user-invocable: false allowed-tools: Bash(npx shadcn-svelte@latest *), Bash(pnpm dlx shadcn-svelte@latest *), Bash(bunx --bun shadcn-svelte@latest *) --- # shadcn-svelte A framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest`, or `bunx --bun shadcn-svelte@latest` — based on the project's package manager. Examples below use `npx shadcn-svelte@latest` but substitute the correct runner for the project. ## Current Project Context Read `components.json` at the project root and, when you need the live file layout, list the directory given by the `aliases.ui` path (resolved with the same rules as the CLI).