1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 正式名称 | frontend-ui-dark-ts | 合集仓库子目录名 |
| 所属合集仓库 | microsoft/skills（Microsoft 官方 Agent Skills 公开仓库） | GitHub |
| 作者/维护者 | Microsoft | SKILL.md front matter（metadata.author） |
| 来源链接 | https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts | — |
| 许可证 | MIT | 仓库 LICENSE + SKILL.md front matter |
| 所属仓库整体 Stars/Forks | 2,864 / 323（注：该数字属整个合集，不代表本技能自身热度） | GitHub API |
| 声明版本 | 1.0.0 | SKILL.md front matter |
| 该子目录最近改动 | 2026-04-20（仓库整体最近推送 2026-08-05） | GitHub API（按路径查询提交历史） |
| 安装方式 | Claude Code 插件市场一条命令，或手动复制（见第十章） | 官方仓库 marketplace.json |
2. 功能介绍与亮点
frontend-ui-dark-ts 是一套开箱即用的深色主题 React 前端 UI 系统，技术栈固定为 React 18 + TypeScript + Tailwind CSS + Framer Motion + React Router + Vite，专为仪表盘、管理后台、数据密集型界面设计：
- 完整视觉系统：品牌色、6 级中性背景色阶、文字色、边框色、状态色（成功/警告/错误/信息）、数据可视化配色，以 Tailwind config 与 CSS 自定义属性双轨定义，便于团队统一定制
- 玻璃拟态（glassmorphism）工具类：
glass/glass-card/glass-panel/glass-overlay/glass-input等预置样式类，直接套用 - 动效模式库：淡入、滑入、悬停缩放、交错子元素、页面切换过渡等 Framer Motion 变体，均为可复用代码片段
- 移动端细节：安全区域（safe-area-inset）适配、44px 最小触控尺寸、PWA manifest、SEO/社交分享元标签
- 附带 3 篇参考文档（设计令牌、组件规范、页面模式，合计约 7 万字符）与完整字体资源，内容完整度明显高于同仓库的同类模板技能
3. 适用场景
所属分类：前端与设计。适合需要快速搭建 SaaS 后台、管理面板或数据密集型仪表盘视觉系统、且缺乏专业视觉设计经验的初中级前端开发者——尤其是希望获得一套现成的专业深色美学（玻璃拟态 + 柔和动效）方案、而非从零打磨配色与动画细节的场景。
4. 跨 Agent 兼容性
- Claude Code：原生支持——SKILL.md 遵循 Agent Skills 规范（name/description/metadata front matter），且可通过官方插件市场一条命令安装
- Codex：未验证——SKILL.md 为通用 Markdown 格式，理论上可手动复制到项目中使用，但未见官方针对 Codex 的适配说明
- OpenClaw：未验证——同上，无直接证据
- Hermes Agent：未验证——同上，无直接证据
5. 推荐理由
官方出品的 React 深色仪表盘 UI 系统，含完整设计令牌、组件与动效代码，零外部依赖开箱即用。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 发布方为 Microsoft 官方仓库 microsoft/skills；该子目录自身暂无独立于仓库整体的第三方评价、讨论或采用数据 |
| 可用性 | 8 | Vite 脚手架 + 少量 npm 安装即可起步；文档完整（含设计令牌/组件/模式三篇参考），近 4 个月内有更新；全部依赖为免费开源包，无付费依赖 |
| 安全性 | 9 | 纯前端代码模板与配置文件，技能本身不执行 shell 命令、不联网外发数据、不涉及任何 API key 或凭据；MIT 许可清晰，无可疑指令 |
综合评分：8.0
安全检查清单：① 无 shell 命令执行，仅涉及用户自行运行的标准 npm/vite 脚手架命令 ② 无运行时联网或数据外发 ③ 不要求任何 API key/凭据 ④ SKILL.md 与配套文档中未见可疑指令或注入迹象 ⑤ 作者为 Microsoft 官方仓库，信誉良好 ⑥ License 明确（MIT） ⑦ 该子目录最近一次改动为 2026-04-20，仓库整体近日仍在活跃推送
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与本技能的差异 |
|---|---|---|
| theme-factory（Anthropic 官方） | 面向任意 artifact（文档/PPT/网页）套用 10 套预设配色字体主题 | 通用配色主题工具，不生成 React 代码结构；本技能专注 React + Tailwind 技术栈的深色仪表盘 UI 系统，含组件/动画/玻璃拟态代码 |
| shadcn（shadcn/ui 官方） | React 组件库的安装与定制封装 | 聚焦单个组件的安装流程与生态集成，不含成套的深色玻璃拟态视觉语言与动效规范 |
| web-design-guidelines（Vercel Labs） | 通用 Web 设计准则与审查标准 | 偏审查/文字准则类指导，不提供可直接落地的 Tailwind 配置与组件代码 |
| react-flow-node-ts（同仓库） | React Flow 节点组件与状态集成脚手架 | 面向可视化流程编辑器这一细分场景，受众更窄；本技能面向更通用的仪表盘/后台管理界面 |
8. 用户评价
该技能目前在第三方平台尚无具名用户评价；可在 mcpmarket.com、skillshub.wtf 等第三方技能索引站检索到该技能的收录条目，但均为目录列表形式，未见具体评价内容。
9. 其他补充
该技能与同仓库的 react-flow-node-ts（节点式可视化组件脚手架）、zustand-store-ts（状态管理模板）同属 azure-sdk-typescript 插件包，三者可配合使用：先用本技能搭好整体视觉框架，再用另外两个技能补充具体的状态管理与节点交互组件。
10. 安装使用方式
Claude Code 插件市场（官方原生渠道）：
/plugin marketplace add microsoft/skills
/plugin install azure-sdk-typescript@skills注意：该插件包捆绑了 azure-sdk-typescript 分类下的全部技能（含多个 Azure SDK 技能），非本技能独立安装包。
手动复制（推荐用于仅需单个技能的场景）：
git clone https://github.com/microsoft/skills.git
cp -r skills/.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts your-project/.claude/skills/安装后无需重启 Agent；触发方式为向 Agent 描述“搭建深色主题仪表盘/管理后台”等类似需求，Agent 会依据 description 字段自动匹配调用。
11. 注意事项
- 技术栈固定为 React + TypeScript + Tailwind + Framer Motion，若项目使用 Vue/Angular 等其他框架或 CSS-in-JS 方案，需要自行改写，无法直接套用
- 仓库内附带的 Segoe UI 字体文件为 Microsoft 自有字体，若项目品牌并非采用该字体，需自行替换
tailwind.config.js与globals.css中的字体声明 - 该子目录本身暂无独立于仓库整体的星标、讨论或第三方采用数据，用户可自行评估其社区验证程度