skills.rest
saad-tayyab
saad-tayyabCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-svelte

Manages shadcn-svelte components for adding, updating, styling, and composing Svelte UI.

Updated Jul 24, 2026
Search Tags:#theming#design system#cli#svelte#tailwind#ui components#shadcn-svelte
One-click install
npx skills add https://github.com/saad-tayyab/lumora --skill shadcn-svelte-saad-tayyab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-svelte
Source: https://github.com/saad-tayyab/lumora/tree/main/.agents/skills/shadcn-svelte
Command: npx skills add https://github.com/saad-tayyab/lumora --skill shadcn-svelte-saad-tayyab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, accessible UI in Svelte projects with shadcn-svelte requires knowing the correct component composition patterns, import conventions, CLI commands, and styling rules. This Skill encodes those rules so generated code follows official shadcn-svelte conventions instead of ad-hoc markup. ## Core Features & Use Cases - Component Management: Initialize projects, add components from the registry, and update installed components using the shadcn-svelte CLI with the correct package runner. - Composition & Styling Rules: Enforces correct patterns for forms (Field.FieldGroup), overlays (Dialog.Title), icons (data-icon), spacing (gap-*), and semantic color tokens. - Theming Guidance: Covers CSS variables, dark mode, presets, and custom colors via the components.json configuration. - Use Case: When asked to build a settings form in a SvelteKit app, the Skill produces code using Field.FieldGroup, ToggleGroup, data-invalid/aria-invalid validation, and semantic tokens rather than raw divs and hardcoded colors. ## Quick Start Ask the assistant to add a dialog component to your shadcn-svelte project and build a profile editing form using it.

Frequently Asked Questions about shadcn-svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn-svelte components to my SvelteKit project?▼

Run the CLI with your project's package runner, for example npx shadcn-svelte@latest add button card. Running add with no arguments opens an interactive component picker, and you can also pass a registry URL for custom items.

How do I update installed shadcn-svelte components?▼

Use the update command, such as npx shadcn-svelte@latest update button or --all for every installed component. Commit your work first since updates overwrite files, then review changes with git diff.

How should forms be structured in shadcn-svelte?▼

Forms use Field.FieldGroup and Field.Field for layout instead of raw divs with space-y utilities. Validation states require data-invalid on the Field and aria-invalid on the control, and option sets of two to seven choices use ToggleGroup.

Does shadcn-svelte support dark mode and custom themes?▼

Yes, dark mode uses a class-based .dark toggle, typically with mode-watcher in SvelteKit. Theming works through semantic CSS variables in the global CSS file referenced by components.json, or via encoded presets passed to init or apply.

Why should I avoid space-y and raw color classes with shadcn-svelte?▼

The styling rules require gap-* with flex layouts instead of space-x or space-y, and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components consistent across light and dark themes without manual dark: overrides.

Which icon library does shadcn-svelte use?▼

The icon library is determined by the iconLibrary field in components.json, such as @lucide/svelte or @tabler/icons-svelte. Icons inside components use the data-icon attribute and receive no manual sizing classes.

Related Skills

Explore More Software Engineering Skills→
bobbymanninobobbymannino

shadcn-svelte

Manages shadcn-svelte components for adding, updating, styling, and composing Svelte UI.

Community
Advanced
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
ajianazajianaz
4

shadcn-svelte-management

Automate Svelte UI component integration across shadcn-svelte, Skeleton UI, and Melt UI.

Community
Advanced