React UI 元件系統，結合 TailwindCSS、Radix 和 shadcn/ui。
此技能專注於使用 TailwindCSS、Radix UI 和 shadcn/ui 構建 React UI 元件系統。它涵蓋了設計系統架構、可存取元件、響應式佈局、主題切換、深色模式支援以及元件組合等核心能力。適用於 React 和 Next.js 專案，能夠執行審查、設計、構建、改進和重構 UI 元件的操作。透過整合 TailwindCSS 的樣式系統、Radix UI 的無障礙基礎元件和 shadcn/ui 的現成元件，幫助開發者快速搭建一致、可維護且符合 ARIA 標準的使用者介面。
npx skills add https://github.com/samhvw8/dot-claude/tree/main/skills/ui-design-systemReact UI 元件系統，結合 TailwindCSS、Radix 和 shadcn/ui。技術棧：TailwindCSS（樣式）、Radix UI（基礎元件）、shadcn/ui（元件）、React/Next.js。能力：設計系統架構、可存取元件、響應式佈局、主題切換、深色模式、元件組合。動作：審查、設計、構建、改進、重構 UI 元件。關鍵字：TailwindCSS、Radix UI、shadcn/ui、設計系統、元件庫、可存取性、ARIA、響應式、深色模式、主題切換、CSS 變數、元件架構、原子設計、設計令牌、變體、插槽、組合。使用時機：建構元件庫、實作 shadcn/ui、建立可存取的 UI、設定設計系統、加入深色模式/主題切換、審查 UI 元件架構。
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".