用途
该技能为 JARVIS AI 助手界面提供 Tailwind CSS 样式开发能力，采用 utility-first CSS 的方式，目标是创建一致且可维护的 HUD 设计。主要用例包括：全息 UI 面板样式、响应式 HUD 布局、过渡动画工具类、自定义 JARVIS 主题配置。风险等级标注为 LOW，属于样式框架，安全暴露面较小。技能文件采用拆分结构，高级模式参见 references/ 目录（如 references/advanced-patterns.md 中的复杂布局模式）。
核心原则
- TDD 优先：先编写组件测试，再进行样式实现。
- 性能意识：优化 CSS 输出体积与渲染性能。
- 工具类优先：由工具类组合样式，模式重复时再提取组件。
- 设计系统：在配置中定义 JARVIS 配色与间距。
- 响应式设计：移动优先，配合断点工具类。
- 默认暗色：HUD 始终为暗色主题。
- 可访问性：保持足够的对比度。
使用方式（实现工作流）
技能给出基于 TDD 的四步流程：
- 先写失败测试：以 Vue 组件 HUDPanel 为例，使用 vitest 与 @vue/test-utils 编写测试，断言元素带有如 bg-jarvis-bg-panel/80、border-jarvis-primary/30、backdrop-blur-sm 等类，响应式栅格包含 grid-cols-1、md:grid-cols-2、lg:grid-cols-3，状态指示器颜色随 status 变化，交互元素包含 focus:ring-2、focus:outline-none。
- 实现最小可用代码：按测试要求编写组件模板与 props，statusClasses 根据 active/warning/error/inactive 返回对应类。
- 按需重构：将重复模式提取为 @apply 指令，例如在 @layer components 中定义 .hud-panel 与 .hud-grid。
- 运行完整验证：运行样式相关测试、检查未使用 CSS、验证构建体积（示例命令包括 npm run test -- --grep "HUDPanel"、npx tailwindcss --content './components/**/.vue' --output /dev/null、npm run build && ls -lh .output/public/_nuxt/.css）。
性能模式
- Purge 优化：content 路径应精确，避免包含测试、stories 等未使用文件。
- JIT 模式效率：只扩展需要的主题项，避免定义未使用的 variants。
- @apply 提取策略：仅在模式重复 3 次以上时提取，单次使用的样式直接在模板中用工具类。
- 响应式断点效率：移动优先，避免冗余断点。
- 暗色模式效率：JARVIS 始终为暗色，直接定义暗色配色，避免不必要的 light/dark 变体。
- 动画性能：使用 GPU 加速属性（如 opacity），避免触发重排的属性（如 width）。
技术栈与配置
推荐版本：tailwindcss ^3.4.0（含 JIT）、@nuxtjs/tailwindcss ^6.0.0、tailwindcss-animate ^1.0.0。 配置示例（tailwind.config.js）包括：content 覆盖 components、layouts、pages、composables、plugins；darkMode 设为 'class'；扩展 jarvis 配色（primary #00ff41、secondary #0891b2、warning #f59e0b、danger #ef4444、bg.dark #0a0a0f、bg.panel #111827）；字体 mono 为 JetBrains Mono、display 为 Orbitron；动画与关键帧（pulse-slow、scan、glow）；插件 @tailwindcss/forms 与 tailwindcss-animate。
实现模式
提供 HUD 面板组件（含扫描线覆盖层、绝对定位与 animate-scan）、状态指示器（active 用 animate-pulse，error 用 animate-ping）、按钮变体（primary、secondary、danger，含 focus ring 与 offset 颜色）等示例代码。
质量与常见反模式
质量方面要求保持足够对比度、提供可见的 focus 状态、为屏幕阅读器添加 sr-only 文本。常见反模式包括：滥用自定义 CSS（应优先使用工具类）、间距不一致（应使用 4、8、12、16 等一致刻度）、硬编码颜色（应使用主题色如 text-jarvis-primary 而非 text-[#00ff41]）。
实施前检查清单
第一阶段（写代码前）：为预期类应用编写组件测试、确认 JARVIS 主题色已定义、检查 content 路径覆盖所有源文件、检查现有组件中的可复用模式。第二阶段（实现中）：先工具类后自定义 CSS、使用一致间距刻度、为交互元素添加 focus 状态、在各尺寸下测试响应式断点、使用主题色而非硬编码十六进制。第三阶段（提交前）：组件测试全部通过、构建无 CSS 错误、检查 CSS 包体积未异常增长、确认没有未使用的 @apply 提取、用键盘导航测试可访问性。
限制
该技能资料未提供具体价格、收费方式、支持的平台范围以及除示例外的实际使用步骤；上述配置中的颜色值、字体、动画均为资料中给出的 JARVIS 项目示例，不代表通用默认值。