Shadcn SvelteKit Design

Use this skill to create polished SvelteKit UI while grounding component decisions in the configured shadcn-svelte MCP instead of memory.

Preconditions

Expect these MCP tools to be available: shadcn-svelte-search, shadcn-svelte-get, shadcn-svelte-list, shadcn-svelte-icons, and bits-ui-get.
If the MCP is missing, say that clearly and offer setup before continuing: hosted https://shadcn.svelte-apps.me/mcp or local stdio npx -y shadcn-svelte-mcp (Bun: bunx). Never pretend a component or API exists; when forced to work without the MCP, verify against official shadcn-svelte docs only.
Treat shadcn-svelte-get as the source of truth for any component, block, chart, or docs page you plan to use.
Treat official shadcn-svelte CLI installation as the default path for any library component that exists upstream.

Understand the target before designing. Ask for the screen type, audience, content density, brand direction, and whether the work should preserve an existing visual language or introduce a new one.
Discover before composing. If the user describes a feature vaguely, start with references/mcp-workflow.md and use the discovery tools before writing UI code.