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

1. 컴포넌트: Bits UI headless 컴포넌트만 사용
2. 스타일링:
   • Skeleton Labs 토큰/프리셋 (preset-filled, preset-tonal 등)
   • Skeleton Labs Tailwind Components (card, chip, badge, placeholder 등 – 클래스 조합)
   • Tailwind CSS 유틸리티
3. Skeleton 색상/프리셋: 반드시 공식 문서 참고, 직접 shade 조합 만들지 말 것
4. Progressive disclosure: 필요한 문서만 참조
5. 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

<!-- 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

<script lang="ts">
  import { Dialog } from "bits-ui";
</script>

<Dialog.Root>
  <Dialog.Trigger class="btn preset-filled-primary-500">
    Open
  </Dialog.Trigger>
  <Dialog.Content class={[
    'card preset-filled-surface-50-950',
    'p-8 rounded-xl shadow-xl'
  ]}>
    <Dialog.Title class="h3 text-primary-600-400">
      Title
    </Dialog.Title>
  </Dialog.Content>
</Dialog.Root>

Best Practices

1. 컴포넌트: Bits UI headless 컴포넌트만 사용
2. 스타일링: Skeleton Labs 토큰/프리셋 + Tailwind Components (card, chip, badge 등) + Tailwind 유틸리티
3. Skeleton 색상/프리셋: 반드시 공식 문서(colors-design.md, presets-design.md)에서 확인
4. Class 조합 순서: Tailwind Components → 프리셋 → 레이아웃 → 간격 → 조건부 → variant
5. 접근성: WCAG 대비 비율, focus-visible 상태
6. 성능: Svelte class 배열/객체 사용, Skeleton 프리셋 활용
7. 일관성: 동일한 용어 사용, 3인칭 작성