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, help the user configure it, and avoid pretending a component or API exists.
• 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.

Workflow

1. 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.

2. 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.