frontend-ui-engineering skill 是什麼、怎麼安裝使用：Addy Osmani 的生產級前端介面 Skill（組件架構、無障礙、去 AI 審美）

本文根據 addyosmani/agent-skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 5.4 萬次；所在倉庫 addyosmani/agent-skills 在 GitHub 約 10.4 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

frontend-ui-engineering 給自己定的目標很具體：做出來的介面要像是一位懂設計的工程師在一流公司裏寫的，而不是 AI 生成的——這意味着真正遵循設計系統、做好無障礙、交互經過推敲，沒有千篇一律的「AI 審美」。description：構建生產質素、無障礙、響應式的面向用戶的介面；在構建或修改介面和頁面、創建組件、實現佈局、滿足 WCAG 無障礙要求、管理狀態，或需要成品看起來是生產級而不是 AI 生成時使用。

和 Anthropic 的 frontend-design 相比，它的重心不在審美方向，而在工程質素。內容包括：

• 組件架構：文件結構、組件模式；
• 狀態管理；
• 遵循設計系統與以參考為準的介面質素；
• 避開 AI 審美：間距與佈局、字體排印、顏色；
• 無障礙（WCAG 2.1 AA）：鍵盤導航、ARIA 標籤、焦點管理；
• 有意義的空狀態和錯誤狀態；
• 響應式設計、加載與過渡。

末尾照例是該庫統一的三張表：常見的開脫說法、危險信號、完成前核對項。

怎麼安裝

倉庫 README 給出了單獨安裝某個技能的寫法：

bash
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

想整套安裝，Claude Code 用 /plugin marketplace add addyosmani/agent-skills 加 /plugin install agent-skills@addy-agent-skills，Codex 用 codex plugin marketplace add addyosmani/agent-skills 加 codex plugin add agent-skills@agent-skills。README 提示，插件安裝遇到 SSH 權限報錯時改用倉庫的 HTTPS 地址。

倉庫整體介紹和其他安裝方式，詳見本站《addyosmani/agent-skills 是什麼、怎麼安裝：Addy Osmani 的 25 個生產級工程 Skills（/spec、/plan、/build）》。

怎麼用

• 「給訂單列表頁加上空狀態、加載骨架和錯誤重試」。
• 「按 WCAG 2.1 AA 檢查這個表單組件的鍵盤操作和讀屏標籤」。
• 「用項目現有的設計令牌重寫這個頁面，不要引入新的顏色和間距」。

這個技能只有一份 SKILL.md。

適合誰 / 侷限

適合用 React 等組件化框架做產品介面的前端與全棧開發者，特別是已有設計系統、希望智能體守規矩的團隊。它不提供組件庫和視覺方向，也看不到渲染結果，無障礙和響應式仍要在瀏覽器和輔助技術裏實際驗證。

注意事項

• 許可：MIT。
• 不執行腳本、不聯網。
• 和審美類技能（frontend-design、Taste Skill 等）可以搭配：一個定方向，一個管落地質素。