使用 TailwindCSS + Radix + shadcn/ui 构建 React UI 组件系统
该技能专注于在 React/Next.js 环境下，利用 TailwindCSS 进行样式设计、Radix UI 提供无样式可访问原语、以及 shadcn/ui 作为组件集合，来搭建可访问、响应式的 UI 组件系统。它支持设计系统架构、无障碍组件、响应式布局、主题切换与暗黑模式、组件组合等能力，并能够执行 UI 组件的审查、设计、构建、改进与重构等操作。适用场景包括构建组件库、实现 shadcn/ui、创建无障碍界面、搭建设计系统、添加暗黑模式/主题、以及审查 UI 组件架构。关键词涵盖 TailwindCSS、Radix UI、shadcn/ui、设计系统、组件库、可访问性、ARIA、响应式、暗黑模式、主题、CSS 变量、组件架构、原子设计、设计令牌、变体、插槽、组合。
npx skills add https://github.com/samhvw8/dot-claude/tree/main/skills/ui-design-system使用 TailwindCSS + Radix + shadcn/ui 构建 React UI 组件系统。技术栈：TailwindCSS（样式）、Radix UI（原语）、shadcn/ui（组件）、React/Next.js。能力：设计系统架构、无障碍组件、响应式布局、主题、暗黑模式、组件组合。操作：审查、设计、构建、改进、重构 UI 组件。关键词：TailwindCSS、Radix UI、shadcn/ui、设计系统、组件库、可访问性、ARIA、响应式、暗黑模式、主题、CSS 变量、组件架构、原子设计、设计令牌、变体、插槽、组合。使用场景：构建组件库、实现 shadcn/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".