frontend-ui-engineering：把介面做到可用、可讀，也能用鍵盤操作
建立符合既有設計系統、具回應式版面與 WCAG 可及性的正式前端介面。
學完會知道
- 理解 frontend-ui-engineering 在開發流程裡負責的工作
- 判斷什麼情況適合使用 frontend-ui-engineering
- 完成通用 Skills CLI、Codex 或 Claude Code 安裝
開始前先準備
- 可使用支援 Agent Skills 的 coding agent
- 準備一個能實際驗證的小型開發任務
這個 Skill 在做什麼
建立符合既有設計系統、具回應式版面與 WCAG 可及性的正式前端介面。
為什麼有用
能 render 不等於能用。這個 Skill 會同時看設計系統、鍵盤操作、不同螢幕尺寸、狀態管理與實際互動，避免得到一個只有截圖看起來正常的介面。
適合什麼場景
- 建立新頁面或可重用元件。
- 修正手機版、焦點順序或表單錯誤狀態。
- 把看起來像通用 AI 模板的 UI 改得符合產品風格。
和站內相近內容的差別
本地 Frontend Design Skill 偏向產出有辨識度的視覺設計；舊的 Accessibility Skill 是 Web Quality 索引。frontend-ui-engineering 把設計、元件工程、回應式與可及性放進同一個實作流程。
如何安裝
想先查看可選清單，可以執行：
npx skills add addyosmani/agent-skills --list只安裝這一個 Skill：
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering安裝完整 24 個 Skills：
npx skills add addyosmani/agent-skills這個 Skill 會引用 references/accessibility-checklist.md。單獨安裝仍能執行主要流程，但 Skills CLI 不會帶入上游根目錄的共用 references。需要完整檢查表時，請安裝整套，或手動把這些檔案放到 Skill 能依原相對路徑讀取的位置。
手動安裝時，先 clone 上游 repo，再把整個 Skill 資料夾放進代理使用的 skills 目錄：
git clone https://github.com/addyosmani/agent-skills.git來源資料夾是 skills/frontend-ui-engineering/。如果上面列出共用 references，還要保留上游的相對路徑。
Codex
Codex CLI 0.122 以上可安裝整套原生外掛：
codex plugin marketplace add addyosmani/agent-skills
codex plugin add agent-skills@agent-skills安裝後重新開啟 session。手動指定時輸入 @frontend-ui-engineering；也可以直接描述任務，讓 Codex 依 Skill 的 description 自動選用。
Claude Code
Claude Code 可從 marketplace 安裝：
/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills此外掛也提供 /spec、/plan、/build、/test、/review、/code-simplify 與 /ship 等流程指令。這些指令會編排對應 Skills，不代表每個指令都只使用本頁這一個 Skill。
自動啟用還是手動指定
自動優先。只要任務會改到使用者介面，就應自動套用。若只需要視覺審查，也可以明確指定範圍避免代理改動程式。
在 Codex 手動呼叫的寫法：
@frontend-ui-engineering
請依這個 Skill 的原始流程處理目前任務，完成後列出驗證證據。