关于 frontend-ui-dark-ts
frontend-ui-dark-ts 是用于构建深色主题 React 界面的技能，采用 Tailwind CSS 和 Framer Motion。它面向仪表盘、管理面板和数据密集型应用，并提供颜色角色与玻璃拟态样式指导。
主要功能
- 01深色 React 界面指导
- 02Tailwind CSS 颜色用途
- 03Framer Motion 动画
- 04玻璃拟态样式
- 05聚焦仪表盘与管理界面
适用场景
- 01设计深色仪表盘
- 02构建管理面板界面
- 03设置数据密集型应用页面样式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-ui-dark-ts确认已加载。
附带文件references/detailed-guide.md
详细介绍
前端 UI 深色主题（TypeScript）
一个使用 Tailwind CSS 和 Framer Motion 的现代深色主题 React UI 系统。专为仪表盘、管理面板和数据密集型应用设计，具有玻璃拟态效果和雅致的动画。
详细指南
在执行此技能之前，请阅读详细指南。其中保留了完整的流程和参考资料。请将其安全性、先决条件和验证要求视为强制性要求。对于针对性工作，加载相关章节；对于端到端工作，请完整阅读该指南。
颜色用法
| 用例 | 颜色 | 类 |
|---|---|---|
| 主要操作 | 品牌紫色 | bg-brand text-white |
| 主要悬停 | 品牌悬停 | hover:bg-brand-hover |
| 页面背景 | 中性 bg1 | bg-neutral-bg1 |
| 卡片背景 | 中性 bg2 | bg-neutral-bg2 |
| 抬升表面 | 中性 bg3 | bg-neutral-bg3 |
| 输入背景 | 中性 bg2 | bg-neutral-bg2 |
| 输入聚焦 | 中性 bg3 | focus:bg-neutral-bg3 |
| 默认边框 | 默认边框 | border-border |
| 细微边框 | 细微边框 | border-border-subtle |
| 成功 | 状态成功 | text-status-success |
| 警告 | 状态警告 | text-status-warning |
| 错误 | 状态错误 | text-status-error |
何时使用
此技能适用于执行概述中描述的工作流或操作。
限制
- 仅当任务与上述范围明确匹配时，才使用此技能。
- 不要将输出视为针对特定环境的验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停止并请求澄清。
评论
支持 Markdown