Skills
.Work. You
Rest

shadcn-svelte-skill

Official

Build Svelte UIs fast with customizable components.

Software Engineering#typescript#frontend#tailwind css#svelte#ui components#sveltekit#shadcn-svelte
Authorlinehaul-ai
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you rapidly build accessible, customizable UI components for Svelte/SvelteKit projects, eliminating the complexity of styling and ensuring production-ready elements. It prevents UI library lock-in by giving you full control over the component code.

Core Features & Use Cases

  • Component Installation & Customization: Easily add and modify UI components using the shadcn-svelte CLI.
  • Tailwind CSS v4.1 Integration: Seamlessly integrate with Tailwind CSS v4.1 and Vite for zero-runtime styling.
  • Advanced UI Patterns: Guidance for complex features like form validation with sveltekit-superforms, data tables with TanStack Table v8 (including sorting, filtering, pagination, and row selection), and responsive modals/drawers.
  • Svelte UI Ecosystem Overview: Provides context on other Svelte UI libraries like Skeleton UI and Melt UI to help you choose the right tool.
  • Use Case: Quickly scaffold a dashboard with a data table that includes sorting, filtering, and row selection, along with forms and dialogs, all styled with Tailwind CSS v4.1.

Quick Start

Use the shadcn-svelte-skill to add a 'button' and a 'card' component to my SvelteKit project, ensuring Tailwind v4.1 is configured.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-svelte-skill
Download link: https://github.com/linehaul-ai/linehaulai-claude-marketplace/archive/main.zip#shadcn-svelte-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository