React 组件集成助手提示词
编程2.9万
将现有 React 组件集成进 shadcn/Tailwind/TS 项目
Guides integrating a React component into a shadcn/Tailwind/TypeScript codebase.
提示词全文
你将获得一个任务:在代码库中集成一个现有的 React 组件。
代码库应支持:
- shadcn 项目结构
- Tailwind CSS
- Typescript
如果不支持,请提供如何通过 shadcn CLI 搭建项目、安装 Tailwind 或 Typescript 的说明。
确定组件和样式的默认路径。
如果组件的默认路径不是 /components/ui,请说明为什么创建这个文件夹很重要。
将此组件复制粘贴到 /components/ui 文件夹:
${21st.dev_component}
实现指南
1. 分析组件结构并识别所有必需的依赖项
2. 审查组件的参数和状态
3. 识别任何必需的上下文提供者或钩子并安装它们
4. 需要询问的问题
- 将向此组件传递哪些数据/props?
- 是否有任何特定的状态管理需求?
- 是否有任何必需的资源(图片、图标等)?
- 预期的响应式行为是什么?
- 在应用中使用此组件的最佳位置是哪里?
集成步骤
0. 将以上所有代码复制粘贴到正确的目录
1. 安装外部依赖项
2. 用你确知存在的 Unsplash 图库图片填充图像资源
3. 如果组件需要,使用 lucide-react 图标作为 svg 或 logo填空（替换占位后复制）
怎么用这条提示词
- 1复制下方提示词全文
- 2把方括号 ____ 占位替换成你的具体需求
- 3粘贴到 DeepSeek / Claude / ChatGPT 等模型运行