Communitygithub.com

chakra-ui/chakra-ui-builder

使用 Chakra UI v3 建構響應式、無障礙的 UI 元件與版面,並設計可擴展的主題系統。

chakra-ui-builder 是什麼?

這項技能專門用於協助你以 Chakra UI v3 為基礎,高效建構現代化 UI 元件與佈局。無論是建立一個響應式導覽列、登入表單、定價頁面,還是完整的儀表板,此技能都能透過清晰的步驟與最佳實踐來引導你。其核心功能涵蓋了專案初始化與配置(如安裝 Chakra UI、設定 ChakraProvider 與色彩模式)、基於設計 Token 的自訂主題開發(包括語意 Token、元件配方與插槽配方),以及無障礙元件的快速建構。此外,它也支援常見的 UI 圖表(如長條圖和折線圖)的生成。此技能適用於各種開發環境,無論你是從頭開始一個新專案,還是將 Chakra UI 整合進既有程式碼庫,都能獲得明確的 CLI 指令、程式碼範例與配置指南。它是開發者節省時間、確保元件一致性與可維護性的理想工具,尤其在處理複雜的主題需求時,能自動化許多繁瑣的設定工作。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/chakra-ui/chakra-ui/tree/main/skills/chakra-ui-builder

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

chakra-ui-builder 是做什麼的?

使用 Chakra UI v3 建構響應式、無障礙的 UI 元件與版面,安裝或配置 Chakra UI 到新專案或既有專案,並利用 Token、語意 Token、配方(recipes)與插槽配方(slot recipes)設計可擴展的主題。請在以下情況下使用此技能:當使用者要求使用 Chakra UI 建構、建立或生成任何 UI 元件、頁面、表單、儀表板、導覽列、卡片、登陸區段、定價表格或版面時;想要將 Chakra UI 加入專案、設定 ChakraProvider、執行 CLI 片段、配置色彩模式或修正 Provider 包裝問題時;或者詢問關於主題設計——定義品牌顏色、設計 Token、語意 Token、深色模式值、元件配方、插槽配方、型別生成(typegen)或退出預設主題時。對任何 Chakra UI 建構、設定、主題或圖表請求觸發此技能,無論措辭多麼隨意——例如「加入我的品牌色」、「製作一個可重複使用的卡片樣式」、「建立一個長條圖」、「給我看一個折線圖」、「幫我做一個登入表單」、「建一個側邊欄」、「將 Chakra 加入我的應用程式」。

相關技能