Claude Code shadcn-ui：复用现有组件搭建筛选和表格
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/shadcn-ui/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/shadcn-ui/`，把核对后的文件保存为 `.claude/skills/shadcn-ui/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/shadcn-ui`。
中文摘要
根据页面任务选择已有的 shadcn UI 表格、筛选、分页和弹层组件，保持主题与交互语义一致。
SKILL.md 中文导读
可复现示例
目录页样例 ui-32 需要分类筛选、列表及下一页。当前已具备 {filter: 'Select', list: 'Table', paging: 'Pagination'}。工作步骤
- 把页面需要的每项交互对应到现有的组件或封装。
- 复核组件使用的主题及语义，按键盘操作验证筛选和翻页。
验收方法
沿用 {filter: 'Select', list: 'Table', paging: 'Pagination'}，用项目主题并复核筛选与分页能通过键盘操作。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开 React 与 Tailwind 项目，先确认已安装的 shadcn UI 或内部封装。
常见问题
是否要给每个新页面再次安装组件？
优先识别和复用现有封装，只有确实缺少功能时才补组件，并确保主题变量与可访问性语义一致。