[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CEDHB3DPEMKA62GJZGEDMR":3,"skill-same:01M6CEDHB3DPEMKA62GJZGEDMR":192},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":30,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":60,"install":61,"resources":74},"01M6CEDHB3DPEMKA62GJZGEDMR","frontend-design",null,"在使用者要設計網站、Web App 或元件介面時使用。常見觸發像「做 landing page」「設計 dashboard」「規劃 component UI」。輸出可上線介面與設計系統；不取代產品策略或純品牌研究。","AllanYiin\u002FAmon","AllanYiin","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F13088261?v=4","01M6CECQFHKWW6YE0N7FDKSKYB","01M6CECQKTJSCPC7EA3YDHXR7N",2,"MIT","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,32,33,34,35,36,37,38,39,40,41,42],"frontend","design","frontend design","github","dashboard","web","component","https","ui","page","landing","zh","2026-11-10 10:12:30",false,"---\nname: frontend-design\ndescription: 在使用者要設計網站、Web App 或元件介面時使用。常見觸發像「做 landing page」「設計 dashboard」「規劃 component UI」。輸出可上線介面與設計系統；不取代產品策略或純品牌研究。\nversion: 2026.3.26\nhomepage: https:\u002F\u002Fgithub.com\u002FAllanYiin\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ffrontend-design\nlicense: MIT\nmetadata: {\"author\":\"Allan Yiin\",\"language\":\"zh-TW\",\"category\":\"design\",\"short-description\":\"前端 UI 設計、視覺系統與可上線實作工作流程\"}\n---\n\n# Frontend Design Skill\n\n## Purpose\n\n這個 skill 用來把模糊的網站、Web App 或元件需求，轉成可上線的前端介面與設計系統實作。核心不是只把畫面做漂亮，而是先定義設計 tokens、互動狀態、流程可視化、資訊優先級與可重用規範，再落成前端程式碼。若是工作台型產品，嚴格禁止 stacked UI \u002F stacked cards 疊首頁；必須先定義唯一主任務，並讓該功能盡量佔據最大、最中央、最先被看的畫面區域。\n\n## Scope\n\n### In scope\n- 網站、Web App、dashboard、landing page、admin panel、component library 與 design system 的 UI 設計與實作。\n- 從設計方向、tokens、components、page layout 到互動狀態與 accessibility 的整體規劃。\n- 多步驟體驗中的 journey map、user flow、wireflow 與 Gestalt 原則落地。\n- 以 React、Vue、Svelte、HTML\u002FCSS\u002FTailwind 等常見 Web 技術完成前端交付。\n\n### Out of scope\n- 純後端 API、演算法、資料處理或非視覺性的程式任務。\n- 純品牌策略、產品定位或沒有 UI 輸出的設計討論。\n- 只要求修單一小 bug、調一個 CSS 值且不涉及系統性 UI 改善的任務。\n\n## Primary Use Cases\n\n1. 從需求直接產出可上線頁面或元件。\nTrigger examples: 「做 landing page」「設計 dashboard」「規劃 component UI」。\nExpected result: 交付 tokens、components、page layout 與對應前端程式碼，而不是只給視覺形容詞。\n\n2. 建立或整理設計系統。\nTrigger examples: 「整理一套 design system」「把元件規範化」「做可重用 UI guideline」。\nExpected result: 交付 tokens、shared components、guideline docs 與 reusable patterns。\n\n3. 處理多步驟 UX 流程。\nTrigger examples: 「設計 onboarding flow」「把 checkout 流程整理清楚」「規劃 setup wizard」。\nExpected result: 先產出 journey map \u002F user flow \u002F wireflow，再進入高保真 UI 實作。\n\n## Workflow Overview\n\n1. 先定義任務目標、使用者、技術棧、美學方向，以及唯一 primary task。\n2. 建立設計 tokens 與狀態規範，避免任意硬編碼。\n3. 先做 task model、state model、資訊分類、資訊架構表與揭露策略，再規劃 components 與 page layouts；必要時先做 journey\u002Fflow。\n4. 補齊 loading、empty、error、focus、responsive、accessibility 與 visibility rules。\n5. 用 deterministic audit 與 anti-pattern checklist 自檢。\n\n詳細流程看 `references\u002Fimplementation-workflow.md`。\n\n## Routing Boundaries\n\n- Neighboring skills \u002F workflows:\n  - `spec-organizer`: 需求還沒成形、需要先整理成可開發 spec。\n  - `slide-content-planner` \u002F `pptx-maker`: 目標是簡報而不是 Web UI。\n  - `technical-documentation-writer`: 重點是文件，不是前端介面。\n- Negative triggers:\n  - 「幫我修 backend API」\n  - 「只要演算法，不用管 UI」\n  - 「幫我寫品牌定位」\n- Handoff rule: 若任務核心不是介面或前端實作，就不要硬用 UI 技巧包裝不相干問題。\n\n## Success Criteria\n\n### Quantitative\n- 所有互動元件都有 default \u002F hover \u002F active \u002F focus \u002F disabled 狀態。\n- 響應式至少覆蓋 mobile、tablet、desktop 三個 viewport。\n- 如為多步驟流程，必有 journey map \u002F user flow \u002F wireflow 其中之一。\n- 如為 workspace \u002F dashboard \u002F review tool，首屏必須有明確的 task model、state model、資訊架構表與 visibility plan。\n\n### Qualitative\n- 輸出要能直接做，不是只剩風格形容詞。\n- 視覺方向明確且不落入 generic AI slop。\n- tokens、components、states 與 guideline 彼此一致。\n- 若是 dashboard、workspace、viewer、editor、review tool 或 compare screen，必須只聚焦一個 primary task；禁止用 stacked UI 延後使用者接觸真正主功能。\n- 首屏只保留完成當前任務所需的主要群組；reference、規則、補充說明與低頻控制項必須延後揭露。\n\n## Trigger Patterns\n\n**應觸發**\n- 「做 landing page」\n- 「設計 dashboard」\n- 「規劃 component UI」\n- 「整理 design system」\n- 「把這個 mockup 轉成前端頁面」\n\n**不應觸發**\n- 「幫我修 API timeout」\n- 「幫我做資料清洗腳本」\n- 「幫我寫品牌定位」\n\n## Testing Plan\n\n### Triggering tests\n- Should trigger:\n  - \"build a website\u002Fapp\u002Fcomponent\"\n  - \"create a dashboard\u002Flanding page\"\n  - \"design a UI for...\"\n  - \"make it modern\u002Fclean\u002Fpremium\"\n- Should NOT trigger:\n  - \"幫我修 API timeout\"\n  - \"幫我做資料清洗腳本\"\n  - \"幫我寫品牌定位\"\n\n### Functional tests\n- 若有 reusable UI，應同時交付 guideline docs。\n- 若有 multi-step UX，必須先外顯化 flow artifact。\n- 交付前要跑 `audit_frontend_principles.py` 或等價檢查。\n\n## Non-Negotiables\n\n1. 先做 tokens，再做 components；不要直接硬編碼顏色、間距、陰影與圓角。\n2. 一個畫面先定義一個 primary task；嚴格禁止 stacked UI \u002F stacked cards 疊首頁，主工作區必須佔據主舞台與最大化畫面區域。\n3. 在畫 layout 前，先產出 task model、state model、資訊分類、資訊架構表與 disclosure plan；沒有這些前置物就不要直接堆 card。\n4. 每個資訊項目都要標記為 `action-critical`、`decision-supporting`、`status-feedback`、`reference`、`exception-handling` 或 `audit\u002Fhistory` 其中之一。\n5. task model 不能只寫功能名稱；至少拆成唯一主目標、次目標、低頻目標、罕見目標。\n6. state model 不能只列 state 名稱；至少要為每個 state 定義進入條件、必顯資訊、隱藏資訊、主 CTA 與離開條件。\n7. 先用資訊架構表決定 reveal \u002F hide，再決定 layout；資訊架構表至少要有：資訊項目、使用頻率、是否首屏必須、所屬任務階段、顯示條件、建議容器、是否可收合。\n8. 依 state 決定可見性：reference 預設 on-demand、exception 只在對應狀態出現、右欄只在明確有助於當前任務時才常駐。\n9. 首屏預設只允許 1 個主操作區、1 個狀態區、1 個次要摘要；整體不得超過 2-3 個主要視覺群組，且只能有 1 個主 CTA。\n10. 相同任務流中的說明文字優先內嵌在元件旁，不要獨立做成大型說明卡。\n11. 多步驟 UX 必須先外顯化成 journey map、user flow 或 wireflow。\n12. Reusable UI 必須附 guideline docs，不可只交程式碼。\n13. Accessibility、loading、empty、error 與 focus state 都是交付內容，不是加分項。\n14. Tailwind 只能走 build-time integration，不要用 CDN 當正式方案。\n15. 交付前要做 anti-pattern scan 與 deterministic audit。\n\n細節看：\n- `references\u002Fcore-principles.md`\n- `references\u002Fcommon-pitfalls.md`\n- `references\u002Fquality-checklist.md`\n\n## Skill Architecture\n\n- `SKILL.md`\n  - 路由邊界、核心規則摘要、交付標準與導航。\n- `scripts\u002Faudit_frontend_principles.py`\n  - Journey\u002Fflow、Gestalt、guideline 與 task hierarchy 的 deterministic audit。\n- `examples\u002Fcss\u002F`\n  - `tokens.css`: 設計 token 系統。\n  - `components.css`: 可重用元件樣式範例。\n- `examples\u002Ftypescript\u002F`\n  - `design-tokens.ts`: type-safe token 定義。\n  - `theme-provider.tsx`: theme 管理。\n  - `sample-components.tsx`: 元件範例。\n  - `utils.ts`: 共用輔助。\n- `templates\u002F`\n  - `globals.css`: 全域樣式模板。\n  - `tailwind.config.js`: Tailwind 設定模板。\n\n## Reference Navigation\n\n只讀和當前任務直接相關的 reference，不要全部一起載入。\n\n- `references\u002Fcore-principles.md`\n  - tokens-first、Tailwind build-time、journey\u002Fflow、Gestalt、workbench hierarchy、單一主任務與反 stacked UI 規則、guideline artifacts。\n- `references\u002Finformation-priority-playbook.md`\n  - task model、state model、資訊分類、資訊架構表、progressive disclosure、首屏群組上限與 anti-stacked workbench 規則。\n- `references\u002Fimplementation-workflow.md`\n  - 從分析、token 定義、component\u002Fpage 組裝到 QA 的完整 phase-by-phase 流程。\n- `references\u002Fdesign-direction-templates.md`\n  - Minimal Premium SaaS、Bold Editorial、Soft & Organic、Dark Neon、Playful & Colorful 的方向模板。\n- `references\u002Fprompting-playbook.md`\n  - master prompt、token\u002Fcomponent\u002Fpage\u002Freview prompts 與 quick-start example。\n- `references\u002Fcommon-pitfalls.md`\n  - 常見前端設計失敗型態與修法。\n- `references\u002Fquality-checklist.md`\n  - 輸出品質標準、驗收 checklist、tips for excellence。\n- `references\u002Fadvanced-techniques.md`\n  - fluid typography、advanced color systems、skeleton loading、motion patterns。\n- `references\u002Ffrontend-resources.md`\n  - 技能內建參考與外部資源索引。\n\n既有深度參考：\n- `references\u002Fweb-design-principles.md`\n- `references\u002Faccessibility-usability.md`\n- `references\u002Fresponsive-typography.md`\n- `references\u002Fjourney-flow-gestalt.md`\n- `references\u002Fdesign-guideline-authoring.md`\n\n## Delivery Rule\n\n回覆或實作時，優先遵守：\n- 用祈使句與可執行規格溝通，不要只給空泛審美詞。\n- 能用現有 examples \u002F templates \u002F references 解決，就不要在 `SKILL.md` 重新展開長篇教學。\n- 若任務是工作台型 UI，先保護唯一主任務與主舞台，再處理裝飾、摘要卡片或次要資訊。\n- 若任務包含很多功能，先做資訊架構收斂，把 feature inventory 壓成 visibility plan；不要把每個需求都停進一張卡片。\n- 若任務只是局部小修，仍要保護設計系統一致性，但不要擅自重做整個頁面。\n","# Frontend Design Skill\n\n## Purpose\n\n這個 skill 用來把模糊的網站、Web App 或元件需求，轉成可上線的前端介面與設計系統實作。核心不是只把畫面做漂亮，而是先定義設計 tokens、互動狀態、流程可視化、資訊優先級與可重用規範，再落成前端程式碼。若是工作台型產品，嚴格禁止 stacked UI \u002F stacked cards 疊首頁；必須先定義唯一主任務，並讓該功能盡量佔據最大、最中央、最先被看的畫面區域。\n\n## Scope\n\n### In scope\n- 網站、Web App、dashboard、landing page、admin panel、component library 與 design system 的 UI 設計與實作。\n- 從設計方向、tokens、components、page layout 到互動狀態與 accessibility 的整體規劃。\n- 多步驟體驗中的 journey map、user flow、wireflow 與 Gestalt 原則落地。\n- 以 React、Vue、Svelte、HTML\u002FCSS\u002FTailwind 等常見 Web 技術完成前端交付。\n\n### Out of scope\n- 純後端 API、演算法、資料處理或非視覺性的程式任務。\n- 純品牌策略、產品定位或沒有 UI 輸出的設計討論。\n- 只要求修單一小 bug、調一個 CSS 值且不涉及系統性 UI 改善的任務。\n\n## Primary Use Cases\n\n1. 從需求直接產出可上線頁面或元件。\nTrigger examples: 「做 landing page」「設計 dashboard」「規劃 component UI」。\nExpected result: 交付 tokens、components、page layout 與對應前端程式碼，而不是只給視覺形容詞。\n\n2. 建立或整理設計系統。\nTrigger examples: 「整理一套 design system」「把元件規範化」「做可重用 UI guideline」。\nExpected result: 交付 tokens、shared components、guideline docs 與 reusable patterns。\n\n3. 處理多步驟 UX 流程。\nTrigger examples: 「設計 onboarding flow」「把 checkout 流程整理清楚」「規劃 setup wizard」。\nExpected result: 先產出 journey map \u002F user flow \u002F wireflow，再進入高保真 UI 實作。\n\n## Workflow Overview\n\n1. 先定義任務目標、使用者、技術棧、美學方向，以及唯一 primary task。\n2. 建立設計 tokens 與狀態規範，避免任意硬編碼。\n3. 先做 task model、state model、資訊分類、資訊架構表與揭露策略，再規劃 components 與 page layouts；必要時先做 journey\u002Fflow。\n4. 補齊 loading、empty、error、focus、responsive、accessibility 與 visibility rules。\n5. 用 deterministic audit 與 anti-pattern checklist 自檢。\n\n詳細流程看 `references\u002Fimplementation-workflow.md`。\n\n## Routing Boundaries\n\n- Neighboring skills \u002F workflows:\n  - `spec-organizer`: 需求還沒成形、需要先整理成可開發 spec。\n  - `slide-content-planner` \u002F `pptx-maker`: 目標是簡報而不是 Web UI。\n  - `technical-documentation-writer`: 重點是文件，不是前端介面。\n- Negative triggers:\n  - 「幫我修 backend API」\n  - 「只要演算法，不用管 UI」\n  - 「幫我寫品牌定位」\n- Handoff rule: 若任務核心不是介面或前端實作，就不要硬用 UI 技巧包裝不相干問題。\n\n## Success Criteria\n\n### Quantitative\n- 所有互動元件都有 default \u002F hover \u002F active \u002F focus \u002F disabled 狀態。\n- 響應式至少覆蓋 mobile、tablet、desktop 三個 viewport。\n- 如為多步驟流程，必有 journey map \u002F user flow \u002F wireflow 其中之一。\n- 如為 workspace \u002F dashboard \u002F review tool，首屏必須有明確的 task model、state model、資訊架構表與 visibility plan。\n\n### Qualitative\n- 輸出要能直接做，不是只剩風格形容詞。\n- 視覺方向明確且不落入 generic AI slop。\n- tokens、components、states 與 guideline 彼此一致。\n- 若是 dashboard、workspace、viewer、editor、review tool 或 compare screen，必須只聚焦一個 primary task；禁止用 stacked UI 延後使用者接觸真正主功能。\n- 首屏只保留完成當前任務所需的主要群組；reference、規則、補充說明與低頻控制項必須延後揭露。\n\n## Trigger Patterns\n\n**應觸發**\n- 「做 landing page」\n- 「設計 dashboard」\n- 「規劃 component UI」\n- 「整理 design system」\n- 「把這個 mockup 轉成前端頁面」\n\n**不應觸發**\n- 「幫我修 API timeout」\n- 「幫我做資料清洗腳本」\n- 「幫我寫品牌定位」\n\n## Testing Plan\n\n### Triggering tests\n- Should trigger:\n  - \"build a website\u002Fapp\u002Fcomponent\"\n  - \"create a dashboard\u002Flanding page\"\n  - \"design a UI for...\"\n  - \"make it modern\u002Fclean\u002Fpremium\"\n- Should NOT trigger:\n  - \"幫我修 API timeout\"\n  - \"幫我做資料清洗腳本\"\n  - \"幫我寫品牌定位\"\n\n### Functional tests\n- 若有 reusable UI，應同時交付 guideline docs。\n- 若有 multi-step UX，必須先外顯化 flow artifact。\n- 交付前要跑 `audit_frontend_principles.py` 或等價檢查。\n\n## Non-Negotiables\n\n1. 先做 tokens，再做 components；不要直接硬編碼顏色、間距、陰影與圓角。\n2. 一個畫面先定義一個 primary task；嚴格禁止 stacked UI \u002F stacked cards 疊首頁，主工作區必須佔據主舞台與最大化畫面區域。\n3. 在畫 layout 前，先產出 task model、state model、資訊分類、資訊架構表與 disclosure plan；沒有這些前置物就不要直接堆 card。\n4. 每個資訊項目都要標記為 `action-critical`、`decision-supporting`、`status-feedback`、`reference`、`exception-handling` 或 `audit\u002Fhistory` 其中之一。\n5. task model 不能只寫功能名稱；至少拆成唯一主目標、次目標、低頻目標、罕見目標。\n6. state model 不能只列 state 名稱；至少要為每個 state 定義進入條件、必顯資訊、隱藏資訊、主 CTA 與離開條件。\n7. 先用資訊架構表決定 reveal \u002F hide，再決定 layout；資訊架構表至少要有：資訊項目、使用頻率、是否首屏必須、所屬任務階段、顯示條件、建議容器、是否可收合。\n8. 依 state 決定可見性：reference 預設 on-demand、exception 只在對應狀態出現、右欄只在明確有助於當前任務時才常駐。\n9. 首屏預設只允許 1 個主操作區、1 個狀態區、1 個次要摘要；整體不得超過 2-3 個主要視覺群組，且只能有 1 個主 CTA。\n10. 相同任務流中的說明文字優先內嵌在元件旁，不要獨立做成大型說明卡。\n11. 多步驟 UX 必須先外顯化成 journey map、user flow 或 wireflow。\n12. Reusable UI 必須附 guideline docs，不可只交程式碼。\n13. Accessibility、loading、empty、error 與 focus state 都是交付內容，不是加分項。\n14. Tailwind 只能走 build-time integration，不要用 CDN 當正式方案。\n15. 交付前要做 anti-pattern scan 與 deterministic audit。\n\n細節看：\n- `references\u002Fcore-principles.md`\n- `references\u002Fcommon-pitfalls.md`\n- `references\u002Fquality-checklist.md`\n\n## Skill Architecture\n\n- `SKILL.md`\n  - 路由邊界、核心規則摘要、交付標準與導航。\n- `scripts\u002Faudit_frontend_principles.py`\n  - Journey\u002Fflow、Gestalt、guideline 與 task hierarchy 的 deterministic audit。\n- `examples\u002Fcss\u002F`\n  - `tokens.css`: 設計 token 系統。\n  - `components.css`: 可重用元件樣式範例。\n- `examples\u002Ftypescript\u002F`\n  - `design-tokens.ts`: type-safe token 定義。\n  - `theme-provider.tsx`: theme 管理。\n  - `sample-components.tsx`: 元件範例。\n  - `utils.ts`: 共用輔助。\n- `templates\u002F`\n  - `globals.css`: 全域樣式模板。\n  - `tailwind.config.js`: Tailwind 設定模板。\n\n## Reference Navigation\n\n只讀和當前任務直接相關的 reference，不要全部一起載入。\n\n- `references\u002Fcore-principles.md`\n  - tokens-first、Tailwind build-time、journey\u002Fflow、Gestalt、workbench hierarchy、單一主任務與反 stacked UI 規則、guideline artifacts。\n- `references\u002Finformation-priority-playbook.md`\n  - task model、state model、資訊分類、資訊架構表、progressive disclosure、首屏群組上限與 anti-stacked workbench 規則。\n- `references\u002Fimplementation-workflow.md`\n  - 從分析、token 定義、component\u002Fpage 組裝到 QA 的完整 phase-by-phase 流程。\n- `references\u002Fdesign-direction-templates.md`\n  - Minimal Premium SaaS、Bold Editorial、Soft & Organic、Dark Neon、Playful & Colorful 的方向模板。\n- `references\u002Fprompting-playbook.md`\n  - master prompt、token\u002Fcomponent\u002Fpage\u002Freview prompts 與 quick-start example。\n- `references\u002Fcommon-pitfalls.md`\n  - 常見前端設計失敗型態與修法。\n- `references\u002Fquality-checklist.md`\n  - 輸出品質標準、驗收 checklist、tips for excellence。\n- `references\u002Fadvanced-techniques.md`\n  - fluid typography、advanced color systems、skeleton loading、motion patterns。\n- `references\u002Ffrontend-resources.md`\n  - 技能內建參考與外部資源索引。\n\n既有深度參考：\n- `references\u002Fweb-design-principles.md`\n- `references\u002Faccessibility-usability.md`\n- `references\u002Fresponsive-typography.md`\n- `references\u002Fjourney-flow-gestalt.md`\n- `references\u002Fdesign-guideline-authoring.md`\n\n## Delivery Rule\n\n回覆或實作時，優先遵守：\n- 用祈使句與可執行規格溝通，不要只給空泛審美詞。\n- 能用現有 examples \u002F templates \u002F references 解決，就不要在 `SKILL.md` 重新展開長篇教學。\n- 若任務是工作台型 UI，先保護唯一主任務與主舞台，再處理裝飾、摘要卡片或次要資訊。\n- 若任務包含很多功能，先做資訊架構收斂，把 feature inventory 壓成 visibility plan；不要把每個需求都停進一張卡片。\n- 若任務只是局部小修，仍要保護設計系統一致性，但不要擅自重做整個頁面。\n",{"name":5,"license":14,"version":48,"homepage":49,"metadata":50,"description":7},"2026.3.26","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ffrontend-design",{"author":51,"category":32,"language":52,"short-description":53},"Allan Yiin","zh-TW","前端 UI 設計、視覺系統與可上線實作工作流程","main","0abce4d3cb71af4948463d31aa24ff5867ddcb2f","src\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design",1,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon","https:\u002F\u002Fgithub.com\u002FAllanYiin","2026-03-29 12:36:35",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add AllanYiin\u002FAmon --skill frontend-design",{"tool":67,"command":68},"bunx","bunx skills add AllanYiin\u002FAmon --skill frontend-design",{"tool":70,"command":71},"pnpm","pnpm dlx skills add AllanYiin\u002FAmon --skill frontend-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002FSKILL.md",true,[75,81,85,91,95,101,105,109,113,118,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"assets\u002Fevals\u002Fevals.json","ASSET","资产文件",2329,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fassets\u002Fevals\u002Fevals.json",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"assets\u002Fevals\u002Fregression_gates.json",141,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fassets\u002Fevals\u002Fregression_gates.json",{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"examples\u002Fcss\u002Fcomponents.css","OTHER","其他",16505,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Fcss\u002Fcomponents.css",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"examples\u002Fcss\u002Ftokens.css",16734,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Fcss\u002Ftokens.css",{"path":96,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":99,"sourceHtmlUrl":100},"examples\u002Ftypescript\u002Fdesign-tokens.ts","SCRIPT","脚本",14489,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Ftypescript\u002Fdesign-tokens.ts",{"path":102,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":103,"sourceHtmlUrl":104},"examples\u002Ftypescript\u002Fsample-components.tsx",18096,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Ftypescript\u002Fsample-components.tsx",{"path":106,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":107,"sourceHtmlUrl":108},"examples\u002Ftypescript\u002Ftheme-provider.tsx",11661,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Ftypescript\u002Ftheme-provider.tsx",{"path":110,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":111,"sourceHtmlUrl":112},"examples\u002Ftypescript\u002Futils.ts",8828,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fexamples\u002Ftypescript\u002Futils.ts",{"path":114,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":116,"sourceHtmlUrl":117},"LICENSE","许可证",1070,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002FLICENSE",{"path":119,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":122,"sourceHtmlUrl":123},"references\u002Faccessibility-usability.md","REFERENCE","参考文档",2775,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Faccessibility-usability.md",{"path":125,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":126,"sourceHtmlUrl":127},"references\u002Fadvanced-techniques.md",1586,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fadvanced-techniques.md",{"path":129,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":130,"sourceHtmlUrl":131},"references\u002Fcommon-pitfalls.md",3679,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fcommon-pitfalls.md",{"path":133,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":134,"sourceHtmlUrl":135},"references\u002Fcore-principles.md",5052,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fcore-principles.md",{"path":137,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":138,"sourceHtmlUrl":139},"references\u002Fdesign-direction-templates.md",1821,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fdesign-direction-templates.md",{"path":141,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":142,"sourceHtmlUrl":143},"references\u002Fdesign-guideline-authoring.md",3117,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fdesign-guideline-authoring.md",{"path":145,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":146,"sourceHtmlUrl":147},"references\u002Ffrontend-resources.md",1323,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Ffrontend-resources.md",{"path":149,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":150,"sourceHtmlUrl":151},"references\u002Fimplementation-workflow.md",7050,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fimplementation-workflow.md",{"path":153,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":154,"sourceHtmlUrl":155},"references\u002Finformation-priority-playbook.md",5408,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Finformation-priority-playbook.md",{"path":157,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":158,"sourceHtmlUrl":159},"references\u002Fjourney-flow-gestalt.md",7927,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fjourney-flow-gestalt.md",{"path":161,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":162,"sourceHtmlUrl":163},"references\u002Fprompting-playbook.md",3733,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fprompting-playbook.md",{"path":165,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":166,"sourceHtmlUrl":167},"references\u002Fquality_checklist.md",2891,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fquality_checklist.md",{"path":169,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":170,"sourceHtmlUrl":171},"references\u002Fquality-checklist.md",3578,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fquality-checklist.md",{"path":173,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":174,"sourceHtmlUrl":175},"references\u002Fresponsive-typography.md",561,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fresponsive-typography.md",{"path":177,"resourceType":120,"resourceTypeDesc":121,"sizeBytes":178,"sourceHtmlUrl":179},"references\u002Fweb-design-principles.md",1762,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Freferences\u002Fweb-design-principles.md",{"path":181,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":182,"sourceHtmlUrl":183},"scripts\u002Faudit_frontend_principles.py",20651,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Fscripts\u002Faudit_frontend_principles.py",{"path":185,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":186,"sourceHtmlUrl":187},"templates\u002Fglobals.css",8937,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Ftemplates\u002Fglobals.css",{"path":189,"resourceType":97,"resourceTypeDesc":98,"sizeBytes":190,"sourceHtmlUrl":191},"templates\u002Ftailwind.config.js",8532,"https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Ffrontend-design\u002Ftemplates\u002Ftailwind.config.js",[193,210,229,243,253,265],{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":202,"publishedAt":43},"01M6CEF0D1F0MXB64MZY8KK1JZ","web-search-strategy","當使用者要上網查資料、把模糊研究意圖拆成多輪搜尋查詢、限定網站或檔案類型、找官方來源，或改善 Google\u002FBing 搜尋品質時使用。將問題改寫成 2-5 組高辨識度查詢，結合 site、引號、排除詞、檔案類型、搜尋引擎切換、結果去重與二次搜尋，再整理可信來源、未解空缺與下一輪查詢方向。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fweb-search-strategy\u002FSKILL.md",[199],{"categoryNo":200,"categoryName":201,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000021","资料检索与研究",[203,204,205,206,36,42,207,208,209],"web search strategy","strategy","web search","search","site","research","google",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":219,"publishedAt":43},"01M6CEEW71AJDMZMXCSMXJD705","vibe-coding-guidelines","在非程式開發者要用 vibe coding 與 coding agent 協作時使用。常見觸發像「幫我整理開發準則」「定義交付邊界」「規劃驗證方式」。輸出需求表達、邊界與風險控管準則；不直接取代實作。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fvibe-coding-guidelines\u002FSKILL.md",[216],{"categoryNo":217,"categoryName":218,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[220,221,222,223,224,225,34,226,42,227,38,228],"vibe coding guidelines","vibe","vibe coding","coding guidelines","coding","guidelines","coding-guidelines","engineering","coding agent",{"skillNo":230,"name":231,"nameZh":6,"description":232,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":233,"categories":234,"keywords":238,"publishedAt":43},"01M6CEETQDHJNZYSBD2KZVNCRB","spreadsheet-workflows","報表 xlsx（整理、公式、檢核）。當使用者需要建立、編輯或分析 Excel 試算表時使用。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fspreadsheet-workflows\u002FSKILL.md",[235],{"categoryNo":236,"categoryName":237,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000004","电子表格",[239,240,241,242],"spreadsheet workflows","spreadsheet","workflows","xlsx",{"skillNo":244,"name":245,"nameZh":6,"description":246,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":247,"categories":248,"keywords":249,"publishedAt":43},"01M6CEES4D4BMVK6PEPBVAG2QN","spec-to-tasks","將一份需求規格拆成可執行任務（含驗收條件）。當使用者提供產品需求、功能規格或使用者故事時，將其分解成具體的開發任務。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fspec-to-tasks\u002FSKILL.md",[],[250,251,252],"spec to tasks","tasks","spec",{"skillNo":254,"name":255,"nameZh":6,"description":256,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":257,"categories":258,"keywords":259,"publishedAt":43},"01M6CEEN8XPB8P1ZHVJQY3NS4K","spec-organizer","在使用者要把模糊想法整理成可開發 spec 時使用。常見觸發像「整理需求成 spec」「補驗收條件」「拆分階段開發計畫」。輸出技術規格、白話規格與可直接貼用於 Codex \u002F Claude Code 的分階段 instructions；不直接代替正式文件發布。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fspec-organizer\u002FSKILL.md",[],[252,260,261,34,262,263,38,264,42],"spec organizer","code","codex","product","instructions",{"skillNo":266,"name":267,"nameZh":6,"description":268,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":269,"categories":270,"keywords":274,"publishedAt":43},"01M6CEEHH6F6NP5Y6GR438211H","slide-content-planner","當使用者要規劃投影片或簡報內容時使用。輸出逐頁大綱、關鍵訊息、證據需求、視覺重點與版面動線。","https:\u002F\u002Fgithub.com\u002FAllanYiin\u002FAmon\u002Fblob\u002Fmain\u002Fsrc\u002Famon\u002Fresources\u002Fskills\u002Fslide-content-planner\u002FSKILL.md",[271],{"categoryNo":272,"categoryName":273,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者",[275,276,277],"planner","content","slide content planner"]