# Svelte UI 设计系统 Svelte 5 + Tailwind CSS 4 + Skeleton Labs + Bits UI 集成设计系统 ## 何时使用此技能 **自动激活：** * 任何 Svelte 组件创建或修改 * Svelte 项目中的所有样式、设计和 UI 工作 * 组件道具、布局、颜色、间距、排版 * 表格、按钮、卡片、芯片、徽章、表格、对话框、覆盖层 * 动画、过渡、悬停效果、响应式设计 * 深色模式、主题、条件样式、动态值 ## 核心原则 1. **组件**：仅使用 Bits UI 无头组件 2. **造型**： * Skeleton Labs 令牌/预设（预设填充、预设色调等） * Skeleton Labs Tailwind 组件（卡、芯片、徽章、占位符等 - 类别组合） * Tailwind CSS 实用程序 3. **骨架颜色/预设**：一定要参考官方文档，不要自己创建阴影组合。 4. **渐进式披露**：仅查看必要的文件 5. **1级深度参考**：SKILL.md → 仅参考文件 ## 可用参考资料 ### 开始吧 * [introduction.md]() \- 骨架概述 * [installation.md]() \- 特定于框架的安装 * [fundamentals.md]() \- 核心概念 * [core-api.md]() \- @base, @theme, @utility, @variant ### 设计系统 * [colors-design.md]() \- **调色板和颜色搭配** (必填参考) * [presets-design.md]() \- **预设系统** (必填参考) * [themes.md]() \- 主题系统 * [typography-design.md]() \- 版式 * [spacing-design.md]() \- 间距系统 * [iconography.md]() \- 图标 ### 顺风 CSS 4 * [tailwind-utilities.md]() \- Tailwind CSS 4 实用程序 * [tailwind-colors.md]() \- OKLCH 颜色 * [tailwind-theme.md]() \- CSS @主题设置 * [tailwind-variants.md]() \- 状态变体 ### 苗条 5 * [svelte-class-syntax.md]() \- 类组合 ### Tailwind 组件（骨架实验室课程的组合）按类分组在一起的设计的基本元素。卡、芯片、徽章、占位符等 * [badges.md](), [buttons.md](), [cards.md](), [chips.md]() * [dividers.md](), [forms.md](), [placeholders.md](), [tables.md]() ### Bits UI - 无头组件 * [bits-ui-complete.md]() \- **Bits UI 42개 headless 컴포넌트 완전 문서** ### 指南 * [dark-mode.md]() \- 다크 모드 * [layouts.md]() \- 레아웃 * [cookbook.md]() \- 레시피 ### 迁移 * [migrate-v2-to-v3.md]() \- v2 → v3 * [migrate-v3-to-v4.md]() \- v3 → v4 ## Bits UI - 无头组件 (42개) 未设计风格。 Skeleton Labs 토큰/프리셋으로 스타일링。 **주요 카테고리:** * 布局：手风琴式、可折叠式、选项卡式、分隔符式 * 叠加层：对话框、弹出窗口、工具提示、上下文菜单、抽屉 * 形式：复选框、单选组、开关、滑块、选择、组合框 * 日期/时间：日历、日期选择器、日期范围选择器、时间字段 * 导航：下拉菜单、菜单栏、导航菜单、分页 * 显示：头像、进度、仪表、徽章 * 交互：按钮、切换、链接预览 ## 快速参考 ### 骨架实验室 중요 규칙 **颜色搭配** (반드시 [colors-design.md]() 참고): * 表格: `{属性}-{颜色}-{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]() 참고): * 填充：`预设填充-{颜色}-{lightShade}-{darkShade}` 또는`预设填充-{颜色}-500` * 色调：`预设色调-{颜色}` * 轮廓：`预设轮廓-{颜色}-{lightShade}-{darkShade}` ### Svelte 5 类组合

### 使用模式 <脚本语言=“ts”> 从“bits-ui”导入{对话框}； <对话框.根> 打开标题 ## 最佳实践 1. **组件**：仅使用 Bits UI 无头组件 2. **造型**：Skeleton Labs 令牌/预设 + Tailwind 组件（卡、芯片、徽章等）+ Tailwind 实用程序 3. **骨架颜色/预设**：一定要参考官方文档（[colors-design.md]()，查看[presets-design.md]()) 4. **类组合顺序**：Tailwind 组件 → 预设 → 布局 → 间距 → 条件 → 变体 5. **辅助功能**：与 WCAG 相比的比率，焦点-可见状态 6. **性能**：使用Svelte类数组/对象，使用Skeleton预设 7. **一致性**：使用相同的术语，以第三人称书写

简洁的用户界面设计

包含技能