Anhvu1107/all-agent-skill

UI/UX 專業版 Max

選擇性閱讀規則

從下列文件開始：

• references/usage-routing.md
• references/quality-checklist.md

然後僅載入與使用者實際任務相符的繼承文件、腳本、資產或範例。

選擇性閱讀規則

從下列文件開始：

• references/senior-master-standard.md
• references/stack-routing.md
• references/design-review-checklist.md

優先使用 references/stack-routing.md 選擇最相關的技術棧資料檔案，避免載入不相關的框架指引。

目的

將模糊的 UI 請求轉化為有意的設計系統與實作指引，使其符合實際的前端技術棧。

何時使用此技能

• 使用者要求任何頁面、組件、儀表板、登陸頁面、重新設計、打磨、設計系統或前端視覺方向
• 任務包含字體排印、色彩、間距、層級、動態效果、可及性或技術棧特定的 UI 實作
• 你需要避免產出千篇一律的 AI 前端輸出，同時仍要交付實用的成果

資料覆蓋範圍

此技能現已包含 16 種技術棧的策展搜尋指引：

• html-tailwind
• react
• nextjs
• remix
• astro
• vue
• nuxtjs
• nuxt-ui
• svelte
• sveltekit
• shadcn
• expo-router
• react-native
• flutter
• swiftui
• jetpack-compose

工作流程

1. 分類 UI 任務。
   • 登陸頁面、儀表板、應用程式殼層、功能表面、組件系統或重新設計
2. 選擇技術棧。
   • 若技術棧隱含但未明確指出，使用 references/stack-routing.md
3. 生成設計系統。
   • 使用內建搜尋工具並加上 --design-system 參數
4. 提取技術棧特定指引。
   • 針對該框架與產品類型執行技術棧搜尋
5. 定稿前進行審查。
   • 使用 references/design-review-checklist.md

指令

從儲存庫根目錄執行：

python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit

如果你已經在技能資料夾內，請使用 python scripts/search.py ...。

規則

• 預設使用實際的產品脈絡，而非任何流行的樣式。
• 在發明模式之前，先將技術棧指引對應至實際使用的框架。
• 偏好可及、響應式、生產級 UI，而非漂亮但脆弱的展示。
• 在既有設計系統中工作時，應先保留既有模式，再引入新方向。