Svelte UI Design System

Svelte 5 + Tailwind CSS 4 + Skeleton Labs + Bits UI 통합 디자인 시스템

When to Use This Skill

자동 활성화:

ANY Svelte component creation or modification
ALL styling, design, and UI work in Svelte projects
Component props, layouts, colors, spacing, typography
Forms, buttons, cards, chips, badges, tables, dialogs, overlays
Animations, transitions, hover effects, responsive design
Dark mode, themes, conditional styling, dynamic values

Core Principles

컴포넌트: Bits UI headless 컴포넌트만 사용
스타일링:
- Skeleton Labs 토큰/프리셋 (preset-filled, preset-tonal 등)
- Skeleton Labs Tailwind Components (card, chip, badge, placeholder 등 - 클래스 조합)
- Tailwind CSS 유틸리티
Skeleton 색상/프리셋: 반드시 공식 문서 참고, 직접 shade 조합 만들지 말 것
Progressive disclosure: 필요한 문서만 참조
1-level deep 참조: SKILL.md → reference 파일만

Available References

Get Started

introduction.md - Skeleton 개요
installation.md - 프레임워크별 설치
fundamentals.md - 핵심 개념
core-api.md - @base, @theme, @utility, @variant

Design System

colors-design.md - 색상 팔레트 및 Color Pairings (필수 참고)
presets-design.md - 프리셋 시스템 (필수 참고)
themes.md - 테마 시스템
typography-design.md - 타이포그래피
spacing-design.md - 간격 시스템
iconography.md - 아이콘

Tailwind CSS 4

tailwind-utilities.md - Tailwind CSS 4 유틸리티
tailwind-colors.md - OKLCH 색상
tailwind-theme.md - CSS @theme 설정
tailwind-variants.md - 상태 variant

Svelte 5

svelte-class-syntax.md - 클래스 조합

Tailwind Components (Skeleton Labs 클래스 조합)

클래스로 디자인을 뭉쳐놓은 기본 요소. card, chip, badge, placeholder 등.

badges.md, buttons.md, cards.md, chips.md
dividers.md, forms.md, placeholders.md, tables.md

Bits UI - Headless Components

bits-ui-complete.md - Bits UI 42개 headless 컴포넌트 완전 문서

Guides

dark-mode.md - 다크 모드
layouts.md - 레이아웃
cookbook.md - 레시피

Migration

migrate-v2-to-v3.md - v2 → v3
migrate-v3-to-v4.md - v3 → v4

Bits UI - Headless Components (42개)

완전히 커스터마이징 가능한 unstyled 컴포넌트. Skeleton Labs 토큰/프리셋으로 스타일링.

주요 카테고리:

Layout: Accordion, Collapsible, Tabs, Separator
Overlays: Dialog, Popover, Tooltip, Context Menu, Drawer
Forms: Checkbox, Radio Group, Switch, Slider, Select, Combobox
Date/Time: Calendar, Date Picker, Date Range Picker, Time Field
Navigation: Dropdown Menu, Menubar, Navigation Menu, Pagination
Display: Avatar, Progress, Meter, Badge
Interactive: Button, Toggle, Link Preview

Quick Reference

Skeleton Labs 중요 규칙

Color Pairings (반드시 colors-design.md 참고):

패턴: {property}-{color}-{lightShade}-{darkShade}
허용 조합: 50-950, 100-900, 200-800, 300-700, 400-600, 500, 600-400, 700-300, 800-200, 900-100, 950-50
규칙: 두 shade의 합이 1000 또는 500 단독
예: bg-surface-50-950, text-primary-200-800

Presets (반드시 presets-design.md 참고):

Filled: preset-filled-{color}-{lightShade}-{darkShade} 또는 preset-filled-{color}-500
Tonal: preset-tonal-{color}
Outlined: preset-outlined-{color}-{lightShade}-{darkShade}

Svelte 5 Class Composition

svelte

<!-- Array form -->
<div class={['base', condition && 'extra']}>

<!-- Object form -->
<div class={{ 'active': isActive, 'disabled': !enabled }}>

<!-- Style directive for dynamic values -->
<div
  class="bg-(--brand-color)"
  style:--brand-color={dynamicValue}>

Usage Pattern