メニュー
比较 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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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。