什麼是 frontend-ui-engineering？
在建置或修改面向使用者的介面時使用。在創建組件、實現佈局、管理狀態時，或在輸出需要看起來和感覺上具有生產品質而不是人工智慧生成時使用。 來源：addyosmani/agent-skills。
·frontend-ui-engineering
*
frontend-ui-engineering
✓在建置或修改面向使用者的介面時使用。在創建組件、實現佈局、管理狀態時，或在輸出需要看起來和感覺上具有生產品質而不是人工智慧生成時使用。
如何安裝 frontend-ui-engineering
透過命令列快速安裝 frontend-ui-engineering AI 技能到你的開發環境
- 開啟終端機: 開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等）
- 執行安裝指令: 複製並執行以下指令：npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering
- 驗證安裝: 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
來源：addyosmani/agent-skills。
SKILL.md
查看原文Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
Avoid prop drilling deeper than 3 levels. If you're passing props through components that don't use them, introduce context or restructure the component tree.
| Purple/indigo everything | Use the project's actual color palette | | Excessive gradients | Flat or subtle gradients matching the design system | | Rounded everything (rounded-2xl) | Consistent border-radius from the design system | | Generic hero sections | Content-first layouts | | Lorem ipsum-style copy | Realistic placeholder content |
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-22
- 更新時間
- 2026-03-11
快速解答
如何安裝 frontend-ui-engineering？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
這個 Skill 的原始碼在哪？
https://github.com/addyosmani/agent-skills