react-component-porter
react-component-porter
使用当前项目的技术栈将提供的react组件代码片段1:1复刻到当前项目中
When to use
- 当用户说"帮我复刻这个组件"并提供了react组件代码片段时
Instructions
- 探索当前项目使用的技术栈,包括但不限于:UI库(如Material-UI、Ant Design等)、图标库、状态管理工具(如Redux、MobX等)、样式解决方案(如CSS Modules、Styled Components等)以及其他相关工具和库。
- 分析提供的react组件代码片段,理解其结构、功能和依赖关系。
- 根据当前项目的技术栈,将提供的组件代码片段进行1:1复刻,确保代码风格和项目规范一致。
- 在复刻过程中,注意处理组件的状态管理、样式和依赖关系,确保复刻后的组件在当前项目中能够正常工作。
- (重点)移除提供的组件代码片段中所有背景颜色相关的样式,以适应当前项目的主题系统
More from cruldra/skills
tauri-v2
Tauri v2 项目开发助手 - 提供 CLI 项目管理、最佳实践指导和代码生成。适用于 (1) 创建和管理 Tauri v2 项目 (2) 开发桌面和移动应用 (3) 配置构建和分发流程 (4) 实现安全的前后端通信 (5) 应用架构设计和性能优化。
15pandoc
当用户需要对某个文档进行格式转换时(例如将 Markdown 转换为 DOCX、PDF、HTML 等)使用该技能。
13refine-dev
协助开发基于 Refine 框架的 React 应用。提供项目初始化、核心配置、数据提供者(Data Providers)、认证(Auth Provider)以及 UI 库集成的指导。专注于使用 shadcn/ui 构建现代化的后台管理系统。
11dri-text-analysis
使用 DRI 文本分析法(Data-Rule-Interaction)对自然语言需求描述进行逐词拆解与领域建模。将非结构化的业务需求文本降维为数据(D)、规则(R)、交互(I)三个维度的结构化架构抽象,直接产出可用于系统设计的概念表格。适用于需求分析、领域语言提取、架构设计前的文本解析,以及将长篇需求文档转化为清晰的开发任务拆解。
9vite-starter
使用 Vite 创建现代前端项目,支持 React、Vue、Svelte、Solid、Preact、Lit、Qwik 和 Vanilla JS,可选 TypeScript。当用户需要初始化新的前端项目、搭建 SPA、创建组件库、设置现代构建工具时使用此技能。触发场景:用户说"创建 vite 项目"、"新建 react/vue/svelte 应用"、"初始化前端项目"、"搭建 spa"、"用 vite 起一个项目"、"create vite project"、"new frontend app",或明确提及 Vite、HMR、快速构建工具时。
7plantuml-renderer
Use when the user wants to render PlantUML diagrams from pasted text or files that contain valid PlantUML blocks (such as .puml, .md, or .docx text content), and expects image/text output like svg, png, txt, or utxt via local Java + plantuml.jar.
7