用途
ui-builder 是一个用于构建现代用户界面的技能，定位于“使用 React、Tailwind CSS、Shadcn/ui 和现代设计模式构建美观、响应式 UI 的专家指南”。资料说明其在创建组件、布局等场景中使用，适用于构建新 UI 组件、创建布局和页面结构、实现响应式设计、添加动画与过渡、处理表单和输入、实现深色模式、确保可访问性、优化 UI 性能、创建加载状态以及构建导航组件。
核心原则
资料列出四项核心原则：
- 移动优先设计：从移动端布局开始，使用响应式断点 sm（640px）、md（768px）、lg（1024px）、xl（1280px），并在多种屏幕尺寸上测试。
- 可访问性：使用语义化 HTML，在需要时添加 ARIA 标签，确保键盘导航可用，保持颜色对比度，支持屏幕阅读器。
- 性能：懒加载重型组件，优化图片，尽可能使用 CSS 动画而非 JS，减少重渲染。
- 一致性：使用设计令牌（颜色、间距、排版），遵循既定模式，保持视觉层次。
主要能力与示例
资料以大量代码示例展示基于 Tailwind CSS 的常见模式：
- 布局：Flex、Grid、Container、居中布局。
- 响应式设计：移动优先文本、按断点隐藏/显示、响应式内边距/外边距。
- 颜色与主题：背景色、文本色、悬停状态、聚焦状态。
- 间距：margin/padding 刻度，space-y 与 gap 用法。
- 常见组件模式：Button、Card、Input、Modal/Dialog、Dropdown Menu、Form，均提供代码示例。
- 动画：Tailwind 过渡（悬停缩放、淡入淡出、位移）与 Framer Motion（淡入、滑入、交错子元素）。
- 图标：Lucide React 的基本用法、着色与按钮内使用。
- 加载状态：Skeleton 与 Spinner。
- 深色模式：使用 next-themes 的 ThemeProvider、Theme Toggle 组件、Tailwind dark 样式与 tailwind.config.js 配置。
- 工具函数：cn 函数，结合 clsx 与 tailwind-merge。
- 常见布局：Dashboard Layout 与 Landing Page Hero。
使用方式
资料在“When to Use This Skill”中说明，当进行以下工作时调用该技能：构建新 UI 组件、创建布局和页面结构、实现响应式设计、添加动画和过渡、处理表单和输入、实现深色模式、确保可访问性、优化 UI 性能、创建加载状态、构建导航组件。资料未提供安装命令或部署步骤，暂未提供。
实践清单
资料还提供三类检查清单：
- 可访问性：语义化 HTML、图片 alt 文本、颜色对比度（普通文本 4.5:1）、键盘导航支持、ARIA 标签、focus-visible、屏幕阅读器测试。
- 性能：使用 next/image、懒加载视口外组件、减少客户端 JavaScript、优先 CSS 动画、加载骨架屏、优化字体加载、使用合适图片格式（WebP、AVIF）。
- 响应式设计：移动优先设计、多屏幕尺寸测试、响应式图片、触控目标至少 44x44px、横竖屏测试、移动端安全区域、考虑可折叠设备。
适用场景与限制
该技能适用于 React 与 Tailwind CSS 技术栈下的 UI 开发，特别是需要响应式、可访问、暗色模式与动画的界面构建。资料未说明其支持的平台范围、是否需要特定框架版本、是否收费或价格，也未提供安装命令与效果的量化说明，这些信息暂未提供。