tapforce-shadcn-svelte_skill

Overview

This skill provides practical guidance for setting up and using the shadcn-svelte library in Svelte and SvelteKit projects. It focuses on installation, configuration, component imports, theming, and dark-mode integration so you can ship consistent, accessible UI quickly. Use it to verify prerequisites and apply best practices for maintainable component usage.

How this skill works

The guidance inspects project requirements (SvelteKit ^2, Svelte 5, TailwindCSS) and shows you how to initialize shadcn-svelte with the CLI to generate components and global CSS variables. It explains the components.json presence check, CLI commands to add components, recommended import patterns, and how the generated CSS maps variables into Tailwind v4 utilities. It also covers dark-mode setup using mode-watcher and theme variable conventions.

When to use it

• Starting a new SvelteKit project and you want a component library scaffolded quickly.
• Adding shadcn-svelte to an existing Svelte/SvelteKit app and you need correct aliases and global CSS.
• Importing individual components into pages or layouts while keeping imports predictable.
• Customizing theme colors or mapping design tokens to Tailwind utilities.
• Implementing dark mode and a reliable theme toggle in your root layout.

Best practices

• Verify SvelteKit ^2 and Svelte 5, and ensure TailwindCSS is configured before running init.
• Check for components.json in project root to avoid re-initializing an existing setup.
• Use destructured imports from each component folder (e.g., import { Button } from "$lib/components/ui/button").
• Keep CLI usage consistent (pnpm dlx shadcn-svelte@latest init/add) and pass aliases if your $lib differs.
• Use the generated CSS variables and the Tailwind @theme inline mapping for consistent theming across components.

Example use cases

• Initialize shadcn-svelte, pick a base color, and generate global CSS and component files for a new app.
• Add a Button and Dialog to an existing app via pnpm dlx shadcn-svelte@latest add button dialog and import them into a page.
• Implement a theme toggle using mode-watcher and keep per-component styles consistent with CSS variables.
• Customize primary and accent colors by editing the generated :root variables and mapping to Tailwind utilities.
• Install all components for prototyping with the -a/--all CLI flag, then prune unused components before production.