深色主题 React 前端设计技能
为数据密集型 React 应用提供可复用的深色视觉、玻璃拟态与动效实现方案。
内容主要生成本地 React/Tailwind UI，没有明显恶意行为、凭据访问、数据外传或破坏性默认操作；但依赖使用宽版本范围，未提供依赖安全审查、数据流说明、用户确认、回滚策略或外部资源风险说明，因此未接近满分。
栈说明、配置和组件示例基本一致，且包含异常状态如 loading、error 和 modal 关闭；但结构中引用了未在给定材料中提供的页面和组件，部分示例存在潜在问题（如 Badge 使用的 subtle 状态类依赖额外配置、Checkbox 动画依赖 checked 属性、Toast 代码被截断），没有静态可确认的关键路径测试或诊断失败反馈，因此受静态上限约束并明显扣分。
明确面向深色 React 仪表盘、管理后台和数据密集型界面，提供组件、布局、移动端和动画模式；但未明确非适用场景、触发条件、输入输出边界或可访问性取舍，文档主要为英文。核心依赖 npm 包，未证明中国大陆网络中的安装可达性，但也没有证据表明完全依赖不可达海外服务。
具有 front matter、MIT 许可证、作者和 1.0.0 版本，且按配置、组件、设计令牌和布局模式拆分并提供示例；但缺少 changelog、兼容性矩阵、维护责任和更新路径，部分引用文件与实际给定材料无法完整核验，故未给满分。
提供了可直接改写的 Tailwind 配置、CSS 令牌、React 组件和页面模板，能覆盖常见深色后台 UI 的核心任务；但缺少完整可运行项目、若干依赖或文件未提供，示例中存在占位内容和潜在编译/运行问题，实际产出仍需较多整合与审查，因此按静态证据保守评分。
源文件本身可审计，包含具体版本范围、代码和配置示例，仓库 README 还提到 CI 与测试；但给定材料没有该技能专属测试、执行结果或第三方复现证据，且部分文件内容截断，无法独立复现关键路径，因此仅给有限分数。
- 不要将该 SKILL.md 视为已验证的可运行模板；应先补齐缺失文件并执行 TypeScript、构建、可访问性和响应式检查。
- 锁定依赖版本并审查 npm 包及字体、图标和图片等外部资源来源。
- 检查 Badge 状态类、Checkbox 受控/非受控行为、Dialog 可访问性、Toast 定时器清理和移动端导航后再用于生产代码。
这个 Skill 能做什么，适合哪些场景？
这是 microsoft/agent-skills 中面向 TypeScript 前端的单项技能，专注于使用 React、Tailwind CSS 和 Framer Motion 构建深色主题界面。它适合仪表板、管理后台和数据密集型应用，提供颜色、间距、圆角、边框、状态色和动效等设计约定。内容还包含 Vite 项目初始化、路由、PWA 清单、社交元数据、响应式安全区域和基础组件结构示例。它主要提供实现指南与代码片段，而不是一个独立的可安装 UI 组件包。
指导编码代理初始化 React TypeScript Vite 项目，安装 Framer Motion、clsx、react-router-dom、Tailwind CSS、PostCSS 和 Autoprefixer；规划 public、src/components、src/styles 等目录；配置深色主题色板、Segoe UI 字体、玻璃拟态工具类、焦点样式、滚动条、触控尺寸和 CSS 动画；使用 React Router 组织页面，并用 Framer Motion 实现淡入、上移、缩放、交错子元素和页面过渡；输出可直接参考的 index.html、Tailwind、PostCSS、CSS 和 TSX 代码。
- 前端开发者需要用 React 和 TypeScript 快速搭建深色数据仪表板时。
- 产品团队制作带侧边栏、卡片、弹窗和设置页的管理后台时。
- 设计系统需要统一品牌紫色、状态色、间距、圆角和边框规范时。
- 开发者希望为深色 Web 应用加入玻璃拟态卡片和克制的页面动效时。
这个 Skill 有哪些优点和局限？
- 技术栈明确，覆盖 React 18、Vite 5、Tailwind CSS 3 和 Framer Motion 11。
- 提供可复制的主题配置、玻璃拟态类、响应式安全区域和动效模式。
- 适合仪表板、管理后台和数据密集型界面，并包含基础页面与布局结构建议。
- MIT 许可，集合仓库处于积极维护和测试扩展阶段。
- 它是设计与实现指南，不包含来源中展示的完整 Button、Card、Dialog 等组件实现。
- 未提供该单项技能专属的测试场景或测试覆盖证据。
- 需要 Node.js/npm 及多个前端依赖，不能直接替代现成 UI 组件库。
- 玻璃拟态和深色主题是明确的设计方向，不适合需要其他视觉风格的项目。
如何安装这个 Skill？
在项目或代理配置环境中运行 npx skills add microsoft/skills，在向导中选择需要的技能。集合技能会安装到所选代理的目录，例如 GitHub Copilot 使用 .github/skills/；README 未说明如何单独通过该命令指定 frontend-ui-dark-ts。手动方式是克隆 https://github.com/microsoft/skills.git，再复制对应技能目录到项目的代理技能目录；具体针对该插件路径的复制命令未在来源中给出。
如何使用这个 Skill？
在已加载该技能的编码代理中提出类似请求：创建一个使用 React、TypeScript、Tailwind CSS 和 Framer Motion 的深色主题管理后台，包含侧边栏、仪表板卡片、设置页和页面过渡动画。 技能会提供项目结构、Tailwind 配置、全局 CSS、路由和动画模式。