Tailwind CSS

使用 design-system skill 來產生或審查 UI 系統、從既有程式碼中擷取 tokens，並在真實 repo 中檢查樣式一致性。

使用 shadcn 技能檢查專案脈絡、執行正確的 CLI 指令、安裝元件，並依照文件化模式組合 UI，涵蓋 base 與 radix 的差異、forms、theming 與 registries。

frontend-design 協助你把模糊的 UI 構想變成具有明確美感方向的獨特、可上線前端介面，產出真實可用的 frontend 程式碼，減少千篇一律的 AI 風格。

ckm:ui-styling 結合 shadcn/ui、Tailwind CSS 與 canvas 視覺設計，協助你打造無障礙、可量產的使用者介面。特別適合需要結構化響應式版型、無障礙元件、深色模式與一致設計系統的 React 專案。用 ckm:ui-styling 技能進行 UI 設計、主題設定與快速原型開發，並獲得針對技術棧的實用指引。

ckm:design-system 從清晰的 token 架構出發，協助建立三層 tokens、元件規格、CSS variables、Tailwind 對應，以及維持品牌一致的簡報投影片資產。

使用 tailwind-design-system 技能建立 Tailwind CSS v4 設計系統，涵蓋 design tokens、theming、variants、無障礙設計，以及 v3 到 v4 的遷移指引。

使用 figma 從 Figma MCP 伺服器擷取設計脈絡、截圖、變數與素材，並把 Figma 節點轉成可直接實作的 UI 決策。當你手上有 Figma URL 或 node ID，並且需要用正確的 figma 用法來處理設計轉程式碼、安裝設定或疑難排解時，這個 figma skill 特別適合。

frontend-dev 是一個用於打造精緻、可直接上線的網頁前端技能，涵蓋高質感 UI、電影感動效、AI 生成素材、說服力文案與生成式藝術。適合用在 landing pages、行銷網站、產品頁、儀表板，以及其他需要設計、內容與實作細節彼此一致的前端工作。

frontend-ui-dark-ts 可協助你用 TypeScript、Tailwind CSS、Framer Motion 與可重複使用的設計 tokens，打造深色主題的 React UI。它特別適合儀表板、管理後台、分析視圖，以及其他需要精緻深色美學與一致元件模式的高密度資料介面。

expo-tailwind-setup 是一份實用指南，說明如何在 Expo 中搭配 react-native-css 與 NativeWind v5，為 iOS、Android 與 web 安裝並設定 Tailwind CSS v4。

ui-web 協助你設計與調整網頁 UI 元件，提供 WCAG 2.1 AA 檢查、強對比、清楚可見的控制項，以及適合深色模式的 Tailwind 樣式做法。當你需要實用的 UI 設計指引，能提升無障礙性並減少猜測時，可在 React 風格前端使用這個 ui-web 技能。

redesign-existing-projects 技能可將既有網站與應用升級到精品級質感。它會先檢查現有設計、找出通用的 AI 痕跡，再在不破壞功能的前提下進行高質感的設計實作。可搭配各種 CSS framework 或純 CSS 使用。

baseline-ui 可依照一套明確的基準，協助檢查或產生以 Tailwind 為基礎的 UI，涵蓋間距、排版、無障礙與動態效果。當你需要更安全的元件輸出、更清楚的 UI 設計決策，以及減少與既有原始元件的偏移時，就適合使用 baseline-ui 技能。它特別適合 React/Tailwind 工作流程與實務性的 baseline-ui 指南檢查。

shadcn-ui 技能可協助你在真實應用中規劃、安裝並調整 shadcn/ui 元件。這份 shadcn-ui 指南適用於設計實作、元件探索、自訂調整，以及在表單、表格、驗證流程與版面配置中實際運用 shadcn-ui。

web-artifacts-builder 可協助你初始化 React、Tailwind CSS 與 shadcn/ui 專案，照一般流程開發後，再打包成單一 `bundle.html` 成品。適合有狀態、路由或較完整 UI 的前端 artifact，不適合簡單的單檔 demo。