Codex 原生
成功
👍 0 · 去投票
frontend-ui-engineering
Addy Osmani 的工程品质前端 skill：无障碍、响应式的界面，包括加载、空和错误状态、语义化令牌，以及一张要避开的“AI 风格”默认做法对照表。只有说明文字，没有脚本。
- 路径
skills/frontend-ui-engineering· SKILL.md- 固定 commit
aeac41d4d0- 许可证
- MIT
每道题目固定按 2×2 展示：Codex 原生、Codex + skill、Claude Code 原生、Claude Code + skill。点击截图可查看整页。安装与使用 ↓
擅长什么
以下是 skill 自己的文档里声称的优势，附有出处。这些只是声称，不是结论，请和下面的实际结果对照着看。
- 构建生产级、无障碍、响应式的用户界面 出处
- 看起来像顶尖公司里有设计意识的工程师做的界面，而不是 AI 生成的 出处
- WCAG 2.1 AA 无障碍，包括键盘导航和焦点管理 出处
- 有意义的空状态、错误状态和加载状态 出处
- 避开“AI 风格”（紫色渐变、处处圆角、千篇一律的首屏、厚重阴影） 出处
测试范围：SaaS 落地页、数据看板、个人博客与作品集、表单与反馈组件状态。不在范围内的题目标为“不适用”，而不是待运行。
在第二批运行之前，依据 skill 原文决定；加入 form-states 是为了展示它在无障碍和状态处理上的能力。
SaaS 落地页
landing-saas
数据看板
dashboard
个人博客与作品集
blog-portfolio
表单与反馈组件状态 展示题
form-states
安装与使用
项目级安装：把固定 commit 下的 skill 文件夹（包含 SKILL.md 的那个）复制到你的项目中。画廊运行时也是这样安装的。
Claude Code
安装
把文件夹复制到 <project>/.claude/skills/frontend-ui-engineering/。
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .claude/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .claude/skills/frontend-ui-engineering使用
# 交互模式
/frontend-ui-engineering <你的任务>
# 或者在任意请求末尾加上
Use the frontend-ui-engineering skill.
# 非交互模式，和画廊运行时一样
claude -p '<你的任务> Use the frontend-ui-engineering skill.'如果想在所有项目中使用，改为把文件夹放到 ~/.claude/skills/frontend-ui-engineering/。当请求与 skill 的描述相符时，Claude Code 也会自行加载这个 skill。
Codex
安装
把文件夹复制到 <project>/.agents/skills/frontend-ui-engineering/。
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .agents/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .agents/skills/frontend-ui-engineering使用
# 交互模式：在请求中提到它，或从 /skills 中选择
$frontend-ui-engineering <你的任务>
# 非交互模式，和画廊运行时一样
codex exec -s workspace-write '<你的任务> Use the $frontend-ui-engineering skill.'如果想在所有项目中使用，改为把文件夹放到 ~/.agents/skills/frontend-ui-engineering/。Codex 也会根据 skill 的描述自行选用它。
说明
- The "See Also" link (../../references/accessibility-checklist.md) points outside the skill folder and is not copied.
- Part of a 25-skill repo; install only this folder, not the plugin.
- Its main strengths (accessibility, loading/empty/error states) are not visible in screenshots of the three standard prompts; see the form-states showcase prompt and each cell's a11y scan.
元数据：skills/frontend-ui-engineering/meta.yaml · Copyright (c) 2025 Addy Osmani