makepad-2.0-layout
作者 ZhangHanDongmakepad-2.0-layout 是一個 Makepad 2.0 版面配置技能，用來把 UI 構想轉成可用的 Walk 與 Layout 程式碼。它能協助處理尺寸、流向、間距、內距、對齊，以及捲動容器行為，並提供實作設計、安裝與使用上的實務指引。當你需要的是 Makepad 專屬的版面決策，而不是通用的 CSS 建議時，這個技能特別適合使用。
這個技能評分為 76/100，屬於穩健但不到頂尖的目錄條目：它提供一份可明確觸發的 Makepad 2.0 版面配置指南，並附有實例與模式參考，但整體來說仍是聚焦度高、偏專門的技能，而不是面面俱到的完整 UI 工具包。若你在使用 Makepad，並且希望比一般提示詞更少出現版面語法錯誤，這個技能值得安裝。
- 觸發性強：frontmatter 明確說明可用於 Makepad 2.0 layout，並列出許多具體觸發片語，包含英文與中文用語。
- 實作深度不錯：正文篇幅大、結構清楚，含 8 個 H2 與 21 個 H3，並以程式碼範例說明 layout turtle 模型以及 Walk/Layout 概念。
- 參考支援實用：提供專門的 references/layout-patterns.md 檔案，內含可運作的版面模式與語法註記。
- 範圍較窄：它專注於 Makepad 2.0 layout，因此在尺寸、流向、間距、對齊與 scroll-view 模式之外，幫助有限。
- 沒有提供安裝指令或腳本，因此使用者必須依賴文字指引，沒有可執行的安裝或驗證流程。
makepad-2.0-layout 技能概覽
makepad-2.0-layout 是用來做什麼的
makepad-2.0-layout 技能可協助你處理 Makepad 2.0 的 layout turtle 模型；在這個模型裡，尺寸與排版是透過 Walk 和 Layout 來決定，而不是 CSS 的 flexbox 或 grid。當你需要把 UI 概念轉成可用的 Makepad layout code，卻不想靠猜 Fill、Fit、Flow.Down、間距、padding、對齊方式，或 scroll container 的行為時，這個技能特別有用。
誰應該安裝它
如果你正在開發 Makepad UI、從網頁／UI 工具移植版面，或是反覆卡在 widget 尺寸與容器 flow 的問題上，建議安裝 makepad-2.0-layout 技能。對於需要針對畫面、面板、工具列、列表與巢狀視圖取得實作層級 makepad-2.0-layout usage 指引的開發者來說，它很適合。
它有什麼不同
這個 makepad-2.0-layout skill 的主要差異在於，它是以 Makepad 專用的語法與限制為核心，而不是泛用的 UI 建議。它會直接整理最影響採用的規則：widget 尺寸如何被取得、container 如何放置子元素，以及 scroll view 如何與高度和 flow 互動。當你的阻礙是「為什麼這個 view 的尺寸或捲動不對？」時，它比隨手翻一下 repo 更能幫你做決策。
如何使用 makepad-2.0-layout 技能
安裝後先讀哪些內容
請依照你目前的 skills 安裝流程操作，例如：npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-layout。安裝完成後，先讀 skills/makepad-2.0-layout/SKILL.md，再打開 references/layout-patterns.md 看具體範例。在這個 repo 裡，這兩個檔案是 makepad-2.0-layout install 與立即開始 makepad-2.0-layout usage 時最有訊號的起點。
把粗略目標轉成可用的 prompt
好的輸入應該描述畫面目標、container 類型，以及尺寸意圖。比如不要只說「做一個登入頁」，而要改成：「用 Makepad 2.0 做一個登入表單，中間置中的卡片、垂直堆疊、按鈕固定高度、文字欄位寬度撐滿、卡片高度依內容收合。」這樣技能才有足夠脈絡去判斷 Fill 和 Fit、設定 flow，並避免 layout 含糊不清。
先講 layout 限制，不要先講視覺
把 makepad-2.0-layout 用在 Design Implementation 時，請先說會影響最終結構的限制：哪一塊要撐開、哪一塊要收縮、間距應該放在哪裡，以及內容能不能捲動。最常見的錯誤來源是高度行為描述得不夠清楚，尤其是在 container 與 scroll view 裡。如果某個區塊不能無限延伸，就直接明講。
用 Makepad 的 layout 模型來提問
這份 makepad-2.0-layout guide 最適合用 Makepad 的語言來提問：width: Fill、height: Fit、flow: Down、spacing、padding、align、ScrollYView。如果你是從 CSS 轉過來，先描述你想要的效果，再請它給出對應的 Makepad layout 結構，而不是直接貼 CSS 規則。這樣可以減少轉譯錯誤，也能讓輸出更貼近 turtle model。
makepad-2.0-layout 技能 FAQ
這個技能只適用於 Makepad 2.0 專案嗎？
是，這個 makepad-2.0-layout skill 是針對 Makepad 2.0 layout 工作設計的。它不是通用的 UI layout 輔助工具，也不應被視為 CSS 或其他框架模式的即插即用替代品。
我需要很有經驗才能用好它嗎？
不需要。只要你能提供具體的 UI 目標和幾個限制，初學者也能使用。當你大致知道畫面要長什麼樣，卻不確定要怎麼用 Makepad layout 語法表達時，這個技能最有幫助。
什麼情況下不該用它？
如果是純視覺設計、非 Makepad 框架，或 layout 行為其實已經完全解決的問題，就不建議使用。若你的問題主要是品牌、文案或動畫節奏，makepad-2.0-layout guide 的價值會比不上更專門的 prompt。
它比一般 prompt 好在哪裡？
一般 prompt 常會產生泛用的 flexbox 語言，或只給你很模糊的結構。當你需要精確的 container 行為、尺寸預設，以及符合 Makepad 語法與模型的 scroll-aware layout 決策時，makepad-2.0-layout 技能就更有優勢。
如何改善 makepad-2.0-layout 技能
先把缺少的尺寸資訊補齊
想要更好的 makepad-2.0-layout usage 結果，就要先說清楚哪些元素要固定、哪些要依內容收合、哪些要吸收剩餘空間。更強的輸入會像這樣：「Sidebar 寬 280px，內容區撐滿剩餘寬度，列表垂直捲動，header 高度依內容收合。」這樣技能就能直接選對 Walk 值，不必來回修正。
明確說出巢狀結構與 flow
很多 layout bug 都來自父子關係不清楚。請直接告訴技能子元素是要垂直堆疊、橫向排列，還是要在巢狀 container 中混用兩者。若某個區塊包含 header 加上可捲動的內容區，也請一起說明兩層結構，這樣輸出才會用對 flow 和 height 行為。
先拿第一版對照 Makepad 限制再修
常見失敗模式包括：把 Fit 當成 CSS 的 auto-height、忘記 scroll container 需要有界的高度，以及把 spacing 加在錯的層級。拿到第一版後，請一次只針對一個問題要求修正，例如「修正 scroll 區域高度」或「把這個 row 改成置中的垂直堆疊」。通常逐步收斂，比一次大改更容易做出更好的 Makepad code。