메뉴
比较 shadcn/ui、HeroUI、Material UI、UI TripleD、Tailark UI、ReUI、shadcnblocks、Kokonut UI，并维护 pnpm + React 展示项目。用于 UI 组件库选型、风格页面规划、shadcn 生态组件库比较、React 页面展示框架扩展。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/DawnMoon1542/agents-skills --skill ui-component-library-showcase명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | ui-component-library-showcase |
| description | 比较 shadcn/ui、HeroUI、Material UI、UI TripleD、Tailark UI、ReUI、shadcnblocks、Kokonut UI，并维护 pnpm + React 展示项目。用于 UI 组件库选型、风格页面规划、shadcn 生态组件库比较、React 页面展示框架扩展。 |
| metadata | {"tags":"react, ui-components, shadcn, material-ui, heroui, tailwind, design-system"} |
使用本 skill 处理以下任务：
showcase/ React 展示项目。展示项目位置：ui-component-library-showcase/showcase
技术栈：
常用命令：
cd /Users/dawnmoon/.agents/skills/ui-component-library-showcase/showcase
pnpm install
pnpm test
pnpm typecheck
pnpm build
pnpm dev
页面文件：
| 组件库 | 页面文件 |
|---|---|
| shadcn/ui | src/pages/showcases/ShadcnUiPage.tsx |
| HeroUI | src/pages/showcases/HeroUiPage.tsx |
| Material UI | src/pages/showcases/MaterialUiPage.tsx |
| UI TripleD | src/pages/showcases/UiTripledPage.tsx |
| Tailark UI | src/pages/showcases/TailarkUiPage.tsx |
| ReUI | src/pages/showcases/ReUiPage.tsx |
| shadcnblocks | src/pages/showcases/ShadcnblocksPage.tsx |
| Kokonut UI | src/pages/showcases/KokonutUiPage.tsx |
共享数据：src/data/libraries.ts
页面注册：src/pages/showcases/registry.ts
| 组件库 | 类型 | 适合 | 不适合 |
|---|---|---|---|
| shadcn/ui | 源码分发基础组件系统 | 自建设计系统、需要源码所有权、shadcn registry、AI 辅助页面生成 | 只想安装 npm 包并由上游托管升级的团队 |
| HeroUI | 运行时 React 组件库 | 快速构建现代 React 应用、需要 React Aria 可访问性基础、偏好圆润动效视觉 | 必须完全拥有组件源码、严格 Material Design 项目 |
| Material UI | 成熟企业级 React 组件库 | 企业后台、管理系统、复杂表单、数据密集界面、长期生态稳定性 | 需要强品牌差异化且不想保留 Material Design 视觉痕迹 |
| UI TripleD | shadcn 动效组件与 blocks registry | 动效 landing page、hero、pricing、展示型页面、shadcn 项目扩展 | 严肃后台控件系统、禁用 Motion 的项目 |
| Tailark UI | shadcn 营销页面 blocks | SaaS 官网、创业项目、产品页、品牌营销页、bento feature | 复杂后台、表格密集应用、需要传统组件包升级 |
| ReUI | 企业级 shadcn registry 与组件扩展 | shadcn 中后台、Data Grid、Filters、Upload、Kanban、Sortable | 只需要少量营销区块、不使用 Tailwind 或 shadcn |
| shadcnblocks | shadcn blocks 与组件目录 | 大量页面区块、组件变体、搜索式挑选、复制或 registry 安装 | 需要高度统一单一设计语言且不想筛选变体 |
| Kokonut UI | 动画化 shadcn/Tailwind 组件集合 | AI 产品页、动画按钮、交互卡片、现代产品体验页 | 禁用 Motion、复杂企业后台、极度克制的规范视觉 |
定位：不是传统运行时组件库，而是组件源码分发和构建设计系统的方法。它提供组件源码、CLI、registry schema 与跨框架分发能力。
适合：
页面风格提示：中性底色、清晰边框、组合式 primitives、设计 token 面板、源码所有权叙事。
来源：
定位：原 NextUI，现代 React UI 库，基于 React Aria Components 与 Tailwind CSS v4，强调可访问性、默认美观和动画细节。
适合：
页面风格提示：圆润组件、柔和阴影、明亮 focus ring、暗色模式友好、轻量动效。
来源：
定位：MUI Core 中的 Material UI，成熟 React 组件库，实现 Google Material Design，配套主题、设计工具和 MUI X 扩展生态。
适合：
页面风格提示：Material elevation、状态层、规范表单、数据表、主题色与企业信息密度。
来源：
定位：shadcn/ui 与 Framer Motion 生态中的组件、motion blocks 和 landing page 模板集合。公开资料中常见写法是 UI TripleD，用户也可能写作 UI Tripled。
适合：
页面风格提示：大视觉焦点、运动轨迹、模板卡片、动态 hero、营销页面节奏。
来源：
定位：围绕 shadcn/ui 和 Tailwind CSS 的营销网站区块系统，强调产品页、landing page、feature、pricing、品牌页面。
适合：
页面风格提示：非对称 hero、bento feature、产品插画、高留白、清晰转化区。
来源：
定位：面向 shadcn 项目的组件和 blocks registry，支持 Base UI 与 Radix UI 版本，覆盖 Data Grid、Filters、File Upload、Kanban、Sortable 等复合组件。
适合：
页面风格提示：数据视图、过滤器、上传、看板、复杂控件组合、应用级密度。
来源：
定位：大量 shadcn UI blocks 与组件目录，支持下载、复制和 shadcn registry 安装，覆盖基础组件和页面区块。
适合：
页面风格提示：搜索目录、分类筛选、区块预览卡片、安装入口、shadcn 中性系统气质。
来源：
定位：开源 React 组件集合，基于 Tailwind CSS、shadcn/ui 和 Motion，强调现代视觉、交互动效与 shadcn CLI 安装。
适合：
页面风格提示：粒子按钮、浮动卡片、AI 输入框、动效背景、强交互组件预览。
来源：
src/data/libraries.ts 中的 LibraryProfile 数据契约稳定。pnpm add 安装。pnpm test、pnpm typecheck、pnpm build。