skills.rest
AI-Riksarkivet
AI-RiksarkivetOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-svelte-skill

Validate SKILL.md files and capture metadata into a YAML schema.

2|Updated Feb 27, 2026
Search Tags:#storybook#deno#sveltekit#shadcn-svelte#tailwind-v4#layerchart
One-click install
npx skills add https://github.com/AI-Riksarkivet/ra-hcp --skill shadcn-svelte-skill-ai-riksarkivet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-svelte-skill
Source: https://github.com/AI-Riksarkivet/ra-hcp/tree/main/.claude/skills/shadcn-svelte-skill
Command: npx skills add https://github.com/AI-Riksarkivet/ra-hcp --skill shadcn-svelte-skill-ai-riksarkivet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers building SvelteKit apps often struggle to assemble polished, accessible UI components quickly while maintaining a consistent design system. This Skill provides a structured approach to using shadcn-svelte with a modern toolchain (Deno-based SvelteKit, Tailwind CSS v4, Storybook, Lucide icons, LayerChart, and motion-sv) to streamline component libraries and documentation.

Core Features & Use Cases

  • Ready-to-tailor Svelte UI components from shadcn-svelte for rapid UI composition.
  • Guidance on integrating Deno, Tailwind v4, Storybook, and related references to build, document, and test components.
  • Use cases include building a design system, prototyping dashboards, and delivering accessible, themed UI elements for production apps.

Quick Start

Initialize a SvelteKit project with Deno, install Tailwind v4 and shadcn-svelte, then start the development environment.

Frequently Asked Questions about shadcn-svelte-skill

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

FAQPage Schema
How do I build accessible SvelteKit UIs with shadcn-svelte?▼

Build accessible SvelteKit UIs with shadcn-svelte by applying ready-to-tailor components and maintaining a consistent design system. This approach streamlines component libraries and documentation for production apps.

Does shadcn-svelte work with Tailwind CSS v4 and Deno?▼

Yes, shadcn-svelte works with Tailwind CSS v4 and Deno. Initialize a SvelteKit project with Deno, install Tailwind v4 and shadcn-svelte, then start the development environment.

What's the best way to document and test Svelte components?▼

Document and test Svelte components using Storybook. This Skill provides guidance on integrating Storybook with shadcn-svelte to build and document component libraries effectively.

Can I use LayerChart and Lucide icons in a SvelteKit design system?▼

Yes, you can use LayerChart and Lucide icons in a SvelteKit design system. The toolchain supports these references to build polished, themed UI elements and data visualizations.

How do I structure Svelte UI components for automated discovery?▼

Structure Svelte UI components for automated discovery by validating a SKILL.md with a name and description. Capture metadata fields like dependencies into a machine-readable YAML schema.

Why do I need a structured approach for SvelteKit component composition?▼

A structured approach for SvelteKit composition is needed because developers often struggle to assemble polished UI components quickly while maintaining a consistent design system.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
HKTITANHKTITAN
5

cursor-best-practices

Generate a YAML metadata block for a Cursor Skill unit.

Community
Advanced
Niller2005Niller2005
18

svelte-ui-standards

Define Svelte UI standards for dashboards with formatting, file structure, and component exports.

Community
Intermediate
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate