From svelte-shadcn
Use shadcn-svelte components for any Svelte/SvelteKit UI work. Triggers on requests to "add a button/dialog/form/table/sidebar", "scaffold a page", "build a UI", "shadcn", "shadcn-svelte", "components.json", any UI primitive name (button, input, dialog, sheet, card, table, form, combobox, calendar, date picker, dropdown, popover, tooltip, alert, badge, toast, sonner, drawer, accordion, tabs, breadcrumb, navigation menu, sidebar, command palette, hover card, context menu, menubar, slider, switch, checkbox, radio, select, textarea, label, separator, skeleton, progress, avatar, aspect ratio, carousel, chart, data table, pagination, resizable, scroll area, toggle), or when the project contains components.json or svelte.config.js.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-shadcn:shadcn-svelte-usageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Bias every Svelte/SvelteKit UI task toward the shadcn-svelte registry. Hand-roll only as last resort.
Bias every Svelte/SvelteKit UI task toward the shadcn-svelte registry. Hand-roll only as last resort.
https://www.shadcn-svelte.com/llms.txt enumerates every component. If a primitive matches the user's request, install it.bunx cache bug on Windows + Bun with shadcn-svelte's esrap/@jridgewell/sourcemap-codec deps):
bun add -D shadcn-svelte
bun x shadcn-svelte add <component> --yes
bunx shadcn-svelte@latest add <component> works on most setups but currently throws Cannot find package '@jridgewell/sourcemap-codec' on Bun + Windows. Local install + bun x works everywhere.$lib/components/ui/<component>/. Re-export aggregated index from $lib/components/ui/<component>/index.ts (CLI does this).$lib/components/<feature>/ with project-specific props rather than editing the generated files.bunx sv create my-app --template minimal --types ts --add tailwindcss="plugins:none" --install bun
cd my-app
bun add -D shadcn-svelte
bun x shadcn-svelte init
Init flow (v1.2.7+):
vega is the canonical default.neutral, stone, zinc, mauve, olive, mist, taupe. (Legacy slate / gray are removed in v1.2+.)src/app.css. If the project was scaffolded via sv create + the tailwindcss add-on, the CSS file is at src/routes/layout.css — point init at that path.components / ui / lib / utils / hooks (defaults are $lib/...).Result: writes components.json, src/lib/utils.ts (with cn + WithElementRef / WithoutChildren* type helpers), seeds Tailwind v4 CSS variables in the chosen CSS file, installs clsx, tailwind-merge, tailwind-variants, bits-ui, @lucide/svelte, tw-animate-css.
Don't skip init — components installed without src/lib/utils.ts will fail svelte-check because shadcn-svelte primitives import cn, WithElementRef, WithoutChildren* from that file.
Re-fetch llms.txt if a user asks for something not in this list — registry evolves.
$state, $derived, $effect, $props, $bindable. No export let, no $:, no implicit stores.bun install, bun run dev, bun run build, bun run check, bunx shadcn-svelte@latest …. Never npm/yarn/pnpm.--background, --foreground, --primary, etc. in src/app.css..svelte.ts for runed modules outside .svelte files.+page.server.ts for loaders + actions, $lib/server/ for server-only logic.Use Formsnap + sveltekit-superforms:
bunx shadcn-svelte@latest add formsnap
bun add sveltekit-superforms zod
+page.server.ts defines the schema + action, +page.svelte consumes via superForm.
Use shadcn-svelte data-table (wraps TanStack Table) for any list with sort/filter/pagination. Hand-rolled <table> only for static display.
CSS variables in src/app.css:
@import "tailwindcss";
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
--color-primary: hsl(222.2 47.4% 11.2%);
/* ...etc */
}
@layer base {
.dark {
--color-background: hsl(222.2 84% 4.9%);
--color-foreground: hsl(210 40% 98%);
}
}
Toggle dark mode via mode-watcher package (registry-recommended) or manual class="dark" on <html>.
svelteThe svelte plugin is the canonical authority on Svelte 5 syntax + autofixing. Use it together with this one:
svelte:svelte-file-editor agent — permissionMode: acceptEdits, MUST be invoked for any .svelte / .svelte.ts / .svelte.js write. Loads svelte-core-bestpractices, calls svelte-autofixer, retries until clean. Brief it with: target path, imports (from $lib/components/ui/...), layout, project rules (runes, Tailwind v4 utilities + theme vars, British English).svelte-core-bestpractices skill — reference for $state vs $state.raw, $derived vs $effect, snippets vs slots, keyed each blocks, CSS custom property styling. Load when explaining or deciding patterns.svelte-code-writer skill — CLI fallback (npx @sveltejs/mcp@latest …) when MCP tools aren't available.mcp__plugin_svelte_svelte__*): list-sections, get-documentation, playground-link, svelte-autofixer. Direct calls fine for lookups; for writes go via svelte:svelte-file-editor.Division of labour:
bunx shadcn-svelte@latest add, route layout, form/data-table scaffolding, project rules.svelte plugin: actual .svelte file authoring + Svelte 5 idiom enforcement + autofixer loop.svelte:svelte-file-editor runs svelte-autofixer per file — trust its report.bun run check — project-wide svelte-check.$lib/components/ui/* directly (use wrappers instead — re-running add will overwrite).bits-ui directly when the shadcn-svelte wrapper exists.style= for theme values (use Tailwind utilities + CSS vars).Button component when Button from shadcn-svelte already covers the variant.npx claudepluginhub sling86/svelte-shadcn-plugin --plugin svelte-shadcnProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.