| name | svelte-ui-design |
| description | ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design. |
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
Design System
Tailwind CSS 4
Svelte 5
Tailwind Components (Skeleton Labs 클래스 조합)
클래스로 디자인을 뭉쳐놓은 기본 요소. card, chip, badge, placeholder 등.
Bits UI - Headless Components
Guides
Migration
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
- 컴포넌트: Bits UI headless 컴포넌트만 사용
- 스타일링: Skeleton Labs 토큰/프리셋 + Tailwind Components (card, chip, badge 등) + Tailwind 유틸리티
- Skeleton 색상/프리셋: 반드시 공식 문서(colors-design.md, presets-design.md)에서 확인
- Class 조합 순서: Tailwind Components → 프리셋 → 레이아웃 → 간격 → 조건부 → variant
- 접근성: WCAG 대비 비율, focus-visible 상태
- 성능: Svelte class 배열/객체 사용, Skeleton 프리셋 활용
- 일관성: 동일한 용어 사용, 3인칭 작성
