Back to Details

svelte-ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Svelte UI Design System

Svelte UI设计系统

Svelte 5 + Tailwind CSS 4 + Skeleton Labs + Bits UI 통합 디자인 시스템
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
自动触发场景：
  • 任何Svelte组件的创建或修改
  • Svelte项目中所有样式、设计及UI相关工作
  • 组件属性、布局、色彩、间距、排版
  • 表单、按钮、卡片、芯片、徽章、表格、对话框、浮层
  • 动画、过渡效果、悬停效果、响应式设计
  • 深色模式、主题、条件样式、动态值

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 파일만
  1. 组件：仅使用Bits UI无头组件
  2. 样式设计:
    • Skeleton Labs令牌/预设（preset-filled、preset-tonal等）
    • Skeleton Labs Tailwind组件（card、chip、badge、placeholder等 - 类组合）
    • Tailwind CSS工具类
  3. Skeleton色彩/预设：务必参考官方文档，请勿自行组合色调
  4. 渐进式披露：仅参考必要文档
  5. 一级深度引用：仅从SKILL.md引用参考文件

Available References

可用参考文档

Get Started

入门指南

  • introduction.md - Skeleton 개요
  • installation.md - 프레임워크별 설치
  • fundamentals.md - 핵심 개념
  • core-api.md - @base, @theme, @utility, @variant
  • 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 - 아이콘
  • colors-design.md - 色彩调色板及色彩搭配（必看）
  • presets-design.md - 预设系统（必看）
  • themes.md - 主题系统
  • typography-design.md - 排版
  • spacing-design.md - 间距系统
  • iconography.md - 图标

Tailwind CSS 4

Tailwind CSS 4

  • tailwind-utilities.md - Tailwind CSS 4 유틸리티
  • tailwind-colors.md - OKLCH 색상
  • tailwind-theme.md - CSS @theme 설정
  • tailwind-variants.md - 상태 variant
  • tailwind-utilities.md - Tailwind CSS 4工具类
  • tailwind-colors.md - OKLCH色彩
  • tailwind-theme.md - CSS @theme配置
  • tailwind-variants.md - 状态变体

Svelte 5

Svelte 5

  • svelte-class-syntax.md - 클래스 조합
  • svelte-class-syntax.md - 类组合

Tailwind Components (Skeleton Labs 클래스 조합)

Tailwind组件（Skeleton Labs类组合）

클래스로 디자인을 뭉쳐놓은 기본 요소. card, chip, badge, placeholder 등.
  • badges.md, buttons.md, cards.md, chips.md
  • dividers.md, forms.md, placeholders.md, tables.md
通过类组合实现的基础设计元素，如卡片、芯片、徽章、占位符等。
  • badges.md、buttons.md、cards.md、chips.md
  • dividers.md、forms.md、placeholders.md、tables.md

Bits UI - Headless Components

Bits UI - 无头组件

  • bits-ui-complete.md - Bits UI 42개 headless 컴포넌트 완전 문서
  • bits-ui-complete.md - Bits UI 42个无头组件完整文档

Guides

指南

  • dark-mode.md - 다크 모드
  • layouts.md - 레이아웃
  • cookbook.md - 레시피
  • dark-mode.md - 深色模式
  • layouts.md - 布局
  • cookbook.md - 实践指南

Migration

迁移

  • migrate-v2-to-v3.md - v2 → v3
  • migrate-v3-to-v4.md - v3 → v4
  • migrate-v2-to-v3.md - v2 → v3迁移
  • migrate-v3-to-v4.md - v3 → v4迁移

Bits UI - Headless Components (42개)

Bits UI - 无头组件（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
完全可自定义的无样式组件，通过Skeleton Labs令牌/预设进行样式设计。
主要分类：
  • 布局：Accordion、Collapsible、Tabs、Separator
  • 浮层：Dialog、Popover、Tooltip、Context Menu、Drawer
  • 表单：Checkbox、Radio Group、Switch、Slider、Select、Combobox
  • 日期/时间：Calendar、Date Picker、Date Range Picker、Time Field
  • 导航：Dropdown Menu、Menubar、Navigation Menu、Pagination
  • 展示：Avatar、Progress、Meter、Badge
  • 交互：Button、Toggle、Link Preview

Quick Reference

快速参考

Skeleton Labs 중요 규칙

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}
色彩搭配（务必参考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
  • 规则：两个色调值之和为1000 或 单独使用500
  • 示例：
    bg-surface-50-950
    、
    text-primary-200-800
预设（务必参考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 5类组合

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

使用示例

svelte
<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>
svelte
<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인칭 작성
  1. 组件：仅使用Bits UI无头组件
  2. 样式设计：Skeleton Labs令牌/预设 + Tailwind组件（card、chip、badge等） + Tailwind工具类
  3. Skeleton色彩/预设：务必从官方文档(colors-design.md、presets-design.md)中确认
  4. 类组合顺序：Tailwind组件 → 预设 → 布局 → 间距 → 条件类 → 变体
  5. 可访问性：遵循WCAG对比度标准，处理focus-visible状态
  6. 性能：使用Svelte类数组/对象，利用Skeleton预设
  7. 一致性：使用统一术语，采用第三人称撰写