How does it ensure consistency with my existing code?

The skill includes a 'Scan before building' rule that requires checking existing components and pages to match established project patterns before generating new code.

Does this skill support TailwindCSS 3?

While it may function with older versions, this skill is specifically optimized for TailwindCSS 4 and its specific semantic token implementation.

Can I use this for marketing or creative websites?

This skill is specifically tuned for application UI (dashboards, forms, settings). For creative or high-impact marketing sites, an 'ultra-frontend' approach is recommended.

Which Svelte version does this skill target?

It exclusively enforces Svelte 5 patterns, utilizing runes like $state and $derived, and prohibits legacy Svelte 4 patterns like stores and slots.

Shadcn-Svelte UI System

Name: Shadcn-Svelte UI System
Author: Bliz243

byBliz243

0•

디자인 도구

Enforces consistent, production-ready UI design using shadcn-svelte, TailwindCSS 4, and Svelte 5 patterns.

This skill acts as a specialized design system architect for Svelte applications, ensuring strict adherence to shadcn-svelte components and TailwindCSS 4 semantic tokens. It prevents style drift by mandating the use of theme-based variables over raw hex codes and enforces modern Svelte 5 patterns such as runes and snippets. By providing standardized layout conventions for dashboards, forms, and data displays, it helps developers maintain a unified visual language and professional code structure across complex web interfaces.

주요 기능

010 GitHub stars

02Strict shadcn-svelte component prioritization to prevent duplication

03Mandatory Svelte 5 pattern compliance including runes and snippets

04Standardized responsive layout wrappers for dashboards and forms

05Pre-build scanning to match existing project UI patterns

06Semantic TailwindCSS 4 token enforcement for consistent branding

사용 사례

01Building consistent administrative dashboards and CRUD interfaces

02Migrating legacy Svelte 4 codebases to modern Svelte 5 UI patterns

03Maintaining design system integrity in large-scale shadcn-svelte projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bliz243/.dotfiles ui-design

For use in Claude.ai and ChatGPT

Download Skill