Codex 原生
成功
👍 0 · 去投票
frontend-ui-engineering
Addy Osmani 的工程品質前端 skill：無障礙、響應式的介面，包括載入、空白與錯誤狀態、語意化 token，以及一張要避開的「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
安裝與使用
專案層級安裝：把 skill 資料夾（含有 SKILL.md 的那一個）以固定 commit 的版本複製到你的專案中。畫廊的執行也是用同樣的方式安裝。
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