技能 frontend-ui-dark-ts
📦
frontend-ui-dark-ts
内容修订 r1 安全 ⚡ 包含脚本⚙️ 外部命令🌐 网络访问📁 文件系统访问
构建深色 React 仪表盘
数据密集型 React 应用需要一致的深色界面，同时保持可读性和可维护性。此技能提供 Tailwind、TypeScript 和动效模式，用于打造精致的仪表盘。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "frontend-ui-dark-ts" from https://skillstore.io/skills/sickn33-frontend-ui-dark-ts.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-ui-dark-ts/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“frontend-ui-dark-ts”。 用户请求一个深色仪表盘基础方案。
预期结果:
一份设置清单，包含 Vite、React、Tailwind CSS、Framer Motion、路由、文件夹和深色主题令牌。
正在使用“frontend-ui-dark-ts”。 用户请求改进管理面板的表面样式。
预期结果:
一次设计优化，涵盖玻璃面板、边框、对比度、间距、焦点状态和卡片层级。
正在使用“frontend-ui-dark-ts”。 用户请求动画指导。
预期结果:
一份动效方案，包含页面过渡、悬停反馈、交错列表和减少动态效果的注意事项。
安全审计
安全v6 • 2026/7/9 打开版本化报告
The static findings are false positives from Markdown examples, placeholder metadata URLs, a JSDoc type import, and local CSS font paths. No prompt injection, data exfiltration intent, unauthorized execution, or unsafe filesystem behavior was found in SKILL.md.
1
已扫描文件
600
分析行数
0
复核项
0
已忽略误报
风险因素
⚡ 包含脚本 (1)
⚙️ 外部命令 (50)
SKILL.md:17 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:23 SKILL.md:24 SKILL.md:28-34 SKILL.md:34-38 SKILL.md:38-69 SKILL.md:69-77 SKILL.md:77-113 SKILL.md:113-119 SKILL.md:119-131 SKILL.md:131-135 SKILL.md:135-234 SKILL.md:234-238 SKILL.md:238-245 SKILL.md:245-249 SKILL.md:249-401 SKILL.md:401-405 SKILL.md:405-419 SKILL.md:419-423 SKILL.md:423-442 SKILL.md:442-448 SKILL.md:448-492 SKILL.md:492-496 SKILL.md:496-516 SKILL.md:516-522 SKILL.md:522-527 SKILL.md:527-531 SKILL.md:531-537 SKILL.md:537-541 SKILL.md:541-557 SKILL.md:557-563 SKILL.md:563-564 SKILL.md:564-565 SKILL.md:565-566 SKILL.md:566-567 SKILL.md:567-568 SKILL.md:568-574 SKILL.md:574-575 SKILL.md:575-576 SKILL.md:576-577 SKILL.md:577-578 SKILL.md:578-579 SKILL.md:579-580 SKILL.md:580-581 SKILL.md:581-582
🌐 网络访问 (3)
📁 文件系统访问 (4)
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-frontend-ui-dark-ts?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-frontend-ui-dark-ts?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-ui-dark-ts/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-ui-dark-ts.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
sickn33. (2026). frontend-ui-dark-ts security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6BibTeX 引用
@techreport{sickn33-sickn33-frontend-ui-dark-ts-2026,
author = {sickn33},
title = {frontend-ui-dark-ts security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-dark-ts security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-ui-dark-ts:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
85
内容
69
社区
78
规范符合性
你能构建什么
启动一个仪表盘
使用一致的 Tailwind 令牌和动效模式创建深色 Vite React 仪表盘。
转译设计系统
将深色视觉系统转换为可实现的颜色、间距、排版和表面样式模式。
标准化内部工具
使用共享的布局、组件和交互约定构建管理面板。
试试这些提示
创建入门应用
Use frontend-ui-dark-ts to plan a new Vite React dashboard. Include setup steps, folder structure, and required packages.
设计仪表盘页面样式
Use frontend-ui-dark-ts to design a dark analytics dashboard with cards, tabs, forms, and motion states.
适配现有组件
Apply frontend-ui-dark-ts patterns to my current React components. Keep behavior unchanged and update Tailwind classes consistently.
审计生产 UI
Review my TypeScript React admin UI against frontend-ui-dark-ts. Identify token drift, accessibility gaps, and animation issues.
最佳实践
- 发布前替换占位应用名称、URL 和图片。
- 与真实用户一起测试对比度、键盘焦点和减少动态效果。
- 在添加页面特定样式之前，保持设计令牌集中管理。
避免
- 不要将占位元数据复制到生产环境中。
- 不要把玻璃效果当作可读对比度的替代方案。
- 不要添加会阻碍导航、表单或数据浏览的动画。
常见问题
这个技能会生成完整应用吗？
不会。它提供用于构建深色 React 界面的模式和示例。
它面向哪些框架？
它面向 React with TypeScript、Vite、Tailwind CSS、React Router 和 Framer Motion。
我可以将它用于现有组件吗？
可以。使用它来统一 Tailwind 类、令牌、表面样式和动效模式。
它包含可访问性检查吗？
它包含焦点和触控目标指导，但你必须运行完整的可访问性验证。
示例 URL 是否可用于生产环境？
不是。发布前请替换 example.com URL、应用名称和社交图片。
它会自动安装依赖吗？
不会。它记录命令和示例，但由用户决定运行什么。