用途分类 / 其他用途
Frontend Ui Engineering Skill 安全审计
作者说它能做什么（原文）
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
第三方安全检查结论
这次检查未发现明显风险
- 已检查文件
- 1
- 发现的风险
- 0
会不会运行危险命令？检查是否下载程序后直接运行、让他人远程控制电脑，或藏起要运行的命令。未发现风险
会不会泄露文件和密钥？检查是否发送含密码或密钥的文件，以及代码里是否直接写了密钥。未发现风险
会不会删除文件或一直在后台运行？检查是否大范围删除文件、改写磁盘，或设置自动启动。未发现风险
会不会绕过安全保护？检查是否跳过网站安全验证、开放过多文件权限，或取消操作前的确认。未发现风险
会不会误导 AI 或隐藏内容？检查工作说明是否要求 AI 忽略你的指令、干扰检查结果，或夹带看不见的文字。未发现风险
会不会偷偷改推广链接或收款方？检查是否强制替换推广链接或收款对象，同时要求隐瞒更改。未发现风险
Skill 逻辑拆解
该 Skill 的公开用途是指导代理构建或修改前端页面与组件，重点包括响应式设计、状态管理、视觉质量和 WCAG 无障碍要求。
查看原文
---name: frontend-ui-engineeringdescription: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.---它建议将数据获取与展示组件分离，并明确处理加载、错误和空数据状态。
查看原文
**Separate data fetching from presentation:**```tsx// Container: handles dataexport function TaskListContainer() { const { tasks, isLoading, error } = useTasks(); if (isLoading) return <TaskListSkeleton />; if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />; if (tasks.length === 0) return <EmptyState message="No tasks yet" />; return <TaskList tasks={tasks} />;}它要求交互元素支持键盘操作，并为缺少可见文本的控件及表单输入提供无障碍标签。
查看原文
### Keyboard Navigation```tsx// Every interactive element must be keyboard accessible<button onClick={handleClick}>Click me</button> // ✓ Focusable by default<div onClick={handleClick}>Click me</div> // ✗ Not focusable<div role="button" tabIndex={0} onClick={handleClick} // ✓ But prefer <button> onKeyDown={e => {### ARIA Labels```tsx// Label interactive elements that lack visible text<button aria-label="Close dialog"><XIcon /></button>// Label form inputs<label htmlFor="email">Email</label><input id="email" type="email" />// Or use aria-label when no visible label exists<input aria-label="Search tasks" type="search" />```完成 UI 后，它要求检查控制台错误、键盘与屏幕阅读器可用性、多个视口尺寸、各类数据状态和无障碍警告。
查看原文
## VerificationAfter building UI:- [ ] Component renders without console errors- [ ] All interactive elements are keyboard accessible (Tab through the page)- [ ] Screen reader can convey the page's content and structure- [ ] Responsive: works at 320px, 768px, 1024px, 1440px- [ ] Loading, error, and empty states all handled- [ ] Follows the project's design system (spacing, colors, typography)- [ ] No accessibility warnings in dev tools or axe-core从这里开始 · 工作说明SKILL.md
frontend-ui-engineering文件与检查记录1 个文件
检查范围与遗漏
逐文件查看涉及的内容
下方列出本次涉及的原文范围；纳入检查不代表已查清所有问题。
SKILL.md已纳入全文
这份报告只针对上方版本。我们看了拿到的代码和说明文件，没有实际运行 Skill，也没有检查它另外安装的软件包。因此，这不是“保证安全”的承诺；换了版本或使用环境，结果也可能不同。
SKILL.md工作说明
- 读取了多少行
- 329
- 文件校验值（用于核对版本）
- 530c7ff277cdaf3505a092d58264c62341b99b5cf7c3852d219bb97fe5209038