技能 baseline-ui
📦
baseline-ui
内容修订 r2 安全 ⚙️ 外部命令🌐 网络访问
使用基线规则打磨前端 UI
AI 生成的界面经常遗漏间距、可访问性、动效和布局细节。该技能为 Claude、Codex 和 Claude Code 提供一份聚焦的 UI 评审检查清单。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "baseline-ui" from https://skillstore.io/skills/ibelick-baseline-ui.md and its manifest at https://skillstore.io/api/skills/ibelick-baseline-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“baseline-ui”。 评审一个包含多个卡片、筛选器和加载状态的仪表板页面。
预期结果:
- 违规项：加载状态使用通用 spinner，而不是靠近内容的结构化 skeleton。
- 为什么重要：用户无法理解哪些内容正在加载。
- 修复：将 spinner 替换为与最终布局匹配的 skeleton 行和卡片占位。
正在使用“baseline-ui”。 将基线应用到一个仅图标工具栏。
预期结果:
- 违规项：多个仅图标按钮没有暴露可访问名称。
- 为什么重要：屏幕阅读器用户无法识别可用操作。
- 修复：添加清晰的 aria-label 值，并保持键盘焦点状态可见。
正在使用“baseline-ui”。 审计一个营销风格设置界面中的动效。
预期结果:
- 违规项：该界面在 hover 反馈期间对宽度和背景色进行动画处理。
- 为什么重要：布局和绘制动画会让界面感觉不稳定，并且性能较差。
- 修复：使用 opacity 或 transform 实现短时反馈，并尊重 reduced-motion 偏好。
安全审计
安全v6 • 2026/7/23 打开版本化报告
All 30 static findings are false positives caused by Markdown inline code, a documentation hyperlink, and ordinary UI terminology. SKILL.md contains frontend review guidance without executable scripts, network requests, system reconnaissance, credential access, or prompt injection. No semantic security findings were identified.
1
已扫描文件
86
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (27)
SKILL.md:12 SKILL.md:15 SKILL.md:24 SKILL.md:25 SKILL.md:26 SKILL.md:30 SKILL.md:33 SKILL.md:34 SKILL.md:39 SKILL.md:41 SKILL.md:42 SKILL.md:44 SKILL.md:49 SKILL.md:50 SKILL.md:51 SKILL.md:52 SKILL.md:53 SKILL.md:55 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:68 SKILL.md:69 SKILL.md:73 SKILL.md:74 SKILL.md:75
🌐 网络访问 (1)
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/ibelick-baseline-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/ibelick-baseline-ui?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/ibelick-baseline-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ibelick-baseline-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/ibelick-baseline-ui.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 引用
ibelick. (2026). baseline-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-baseline-ui/audits/6BibTeX 引用
@techreport{ibelick-ibelick-baseline-ui-2026,
author = {ibelick},
title = {baseline-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/ibelick-baseline-ui/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: "baseline-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "ibelick"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ibelick-baseline-ui/audits/6"
identifiers:
- type: other
value: "skillstore:ibelick-baseline-ui:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
69
社区
83
规范符合性
你能构建什么
评审生成的页面
在交付前检查新页面的间距、排版、可访问性、动效和布局问题。
标准化设计系统用法
引导组件选择遵循现有 primitives、Tailwind 默认值和一致的交互模式。
改进 AI 编码输出
当 Claude、Codex 或 Claude Code 创建界面代码时，应用一套紧凑的质量基线。
试试这些提示
应用基线
将 baseline-ui 规则应用到这个 UI 任务。重点关注间距、可访问性、排版、布局和明显的打磨问题。
评审单个文件
使用 baseline-ui 评审这个文件。列出每个违规项、它为什么重要，以及每个问题的一个具体修复方案。
修复发现的问题
使用 baseline-ui 评审这个 UI，然后进行最小代码改动以解决已确认的问题。
审计功能流程
使用 baseline-ui 跨组件审计这个功能流程。优先关注可访问性、交互状态、响应式布局、动画成本和设计一致性。
最佳实践
- 请求评审时提供相关组件或页面文件。
- 如果你想要代码改动，而不只是问题发现，请在评审后要求修复。
- 默认以现有项目 primitives 和主题 tokens 作为事实来源。
避免
- 不要将该技能用作可访问性测试或视觉回归检查的替代品。
- 当你的设计系统有更严格的本地规则时，不要盲目应用每一条建议。
- 除非产品需求明确需要，否则不要请求装饰性动效或渐变。
常见问题
这个技能评审什么？
它会评审前端 UI 工作中的间距、层级、排版、可访问性、动画、布局、性能和基础设计一致性。
它会自动编辑代码吗？
当你要求修复时，它可以指导编辑，但其默认文件工作流是报告违规项和建议的改动。
它最适合哪些技术栈？
它最适合 Tailwind CSS 和 React 风格组件项目，尤其是使用共享 primitives 的项目。
它能替代设计系统吗？
不能。它是一份基线检查清单，应该遵循你现有的组件库、tokens 和产品标准。
它需要网络访问吗？
不需要。该技能包含一个文档参考链接，但不要求获取外部内容。
我应该如何将它与 Claude Code 或 Codex 一起使用？
让 Claude Code 或 Codex 在生成 UI、评审文件或修复已确认的界面问题时应用 baseline-ui。