SuperAPI AI 工具集

moai-library-shadcn

前端与建站

查看项目

更新于 10-16 09:59

技能介绍

用途:为使用 React 与 Tailwind CSS 的项目提供 shadcn/ui 组件库相关专业支持,适合实现 UI 组件、设计系统或进行组件架构规划时参考。

主要能力:覆盖表单、展示、导航、数据、反馈等组件类别的使用与组织方式;主题系统与设计令牌定制;无障碍实现;性能优化(tree-shaking、代码分割、懒加载、虚拟滚动等);以及基于 Context7 MCP 的设计系统架构辅助。

使用方式:资料给出初始化与添加组件的基本流程,即通过 npx 运行 shadcn-ui init 初始化,再用 shadcn-ui add 按名称逐个添加组件(如 button、form、dialog);同时需配置 components.json,包含 schema、style、RSC/TSX、Tailwind 路径、base color、CSS 变量与别名等设置。

实践要点:优先使用 CSS 变量管理颜色以支持动态主题与暗色模式;为交互元素补充无障碍属性并实现键盘导航;用错误边界包裹组件树;用 Tailwind 类而非内联样式;异步操作提供加载状态。

生态配合:可与 React Hook Form 与 Zod 进行表单校验集成,也可与 Radix UI、TanStack Table 等配合。

限制:资料未提供具体收费、价格、平台支持范围或实际效果数据,相关事实暂未提供。