SuperAPI AI 工具集

shadcn-tailwind-ui

前端与建站

查看项目

更新于 10-16 06:23

技能介绍

用途:在既有 React 代码库中实现或审查使用 shadcn/ui、Radix UI 原语和 Tailwind CSS 的无障碍界面,适用于表单、对话框、导航、表格、设置、仪表盘及空/错误/加载状态等产品 UI。支持 React、Vite、Next.js 项目。

主要能力:复用已安装的 shadcn 组件与语义化 token(颜色、间距、圆角、字体、动效),优先语义 HTML 与合理标题层级;用 Radix 原语组合对话框、菜单、标签页、选择器与浮层,避免自行重建焦点管理;移动优先的响应式布局,支持明暗主题、200% 缩放、减少动效、长文本与触控目标。

使用方式:改动前先读取 package.json、锁文件、components.json、CSS 入口与现有组件,识别框架、Tailwind 主版本、路径别名、图标库、表单栈与包管理器,避免覆盖既有配置。UI 写入前通过 $consult-tavernweave-library 的 shadcn-tailwind-ui 路由加载 A0、响应式/CSS 指南与候选设计参考。安装 shadcn 组件时确认 components.json 与包管理器,检查组件是否已存在或本地已修改,运行最小 add 命令而非默认 --all,审查 diff 并跑项目检查。Tailwind 配置优先沿用现有配置;对有意使用配置文件的工程,可用 scripts/generate_tailwind_config.py 生成,例如 python scripts/generate_tailwind_config.py --framework react --format typescript --colors brand:#2563eb,--force 是唯一覆盖路径。

限制:不提供字体、图片、画布设计、海报生成或第三方组件源码;选择库或视觉方向不授权安装依赖或覆盖现有配置;未经明确授权不得覆盖本地已修改组件;避免运行时拼接 Tailwind 类名。分发前需阅读 provenance.md。具体收费、价格与平台信息暂未提供。