frontend-ui-dark-ts
构建深色主题 React UI
使用 Tailwind CSS、毛玻璃效果和流畅的 Framer Motion 动画创建现代化深色主题 React 应用程序，适用于仪表板和管理面板。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-ui-dark-ts”。 创建一个具有品牌紫色背景的深色主题按钮组件
预期结果:
使用 bg-brand 和 hover:bg-brand-hover 的按钮组件，具有适当的聚焦环样式和触摸友好尺寸
正在使用“frontend-ui-dark-ts”。 构建具有毛玻璃面板效果的侧边栏
预期结果:
使用 glass-panel 类的侧边栏，具有 backdrop-blur-lg、深色背景和微妙的边框样式
正在使用“frontend-ui-dark-ts”。 为模态组件添加淡入动画
预期结果:
初始不透明度为 0 的模态框，动画过渡到不透明度 1，使用 Framer Motion 配合 0.3s easeOut 过渡
安全审计
安全Static analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
风险因素
⚡ 包含脚本 (1)
⚙️ 外部命令 (53)
🌐 网络访问 (3)
📁 文件系统访问 (4)
质量评分
你能构建什么
构建深色模式管理仪表板
使用深色主题模式创建具有侧边栏导航、数据表和状态指示器的专业管理面板。
设计数据可视化界面
构建数据丰富的仪表板，具有毛玻璃卡片、流畅过渡和用于数据可视化的自定义颜色令牌。
实现现代化落地页
创建具有动画部分、毛玻璃覆盖模态框和精致微交互的时尚落地页。
试试这些提示
使用 frontend-ui-dark-ts skill 设置一个带有 Tailwind CSS 深色主题配置的新 React 项目。包括自定义品牌颜色、中性背景和文本颜色令牌。
使用 frontend-ui-dark-ts 模式创建一个毛玻璃卡片组件。包括背景模糊、微妙的边框和适当的深色主题颜色。
使用 Framer Motion 实现流畅的页面过渡。对路由更改使用 frontend-ui-dark-ts skill 中的淡入和向上滑动变体。
构建具有应用外壳、侧边栏导航、页面标题和响应式毛玻璃卡片的完整仪表板布局。包括状态徽章和数据可视化颜色令牌。
最佳实践
- 使用语义颜色令牌（text-primary、text-secondary）而非硬编码颜色以提高可维护性
- 谨慎使用毛玻璃效果 - 过度使用会降低可读性和性能
- 在实际设备上测试动画 - 应尊重减少动画偏好设置
避免
- 避免使用纯黑色背景 - 使用具有适当对比度的 neutral-bg 颜色
- 不要对所有元素应用毛玻璃效果 - 保留用于提升的表面和覆盖层
- 避免过度复杂的动画影响页面加载或交互响应性