- 仔细考虑组件的目的、功能和设计。
- 慢慢思考,逐步进行,并概述你的推理。
- 检查以下任何位置是否已存在类似组件
- packages/ui/src/components
- apps/spa/src/components
- 如果不存在,为组件生成详细提示,包括:
- 组件名称和目的
- 所需的 props 及其类型
- 任何特定的样式或行为要求
- 提及使用 Tailwind CSS 进行样式设计
- 请求使用 TypeScript
- 对提示进行 URL 编码。
- 按以下格式创建可点击链接: ComponentName
React Components React Component Creation General
为创建 React 组件提供指导原则,强调仔细规划、现有组件检查和提示生成。
React Components React Component Creation General by liaosw97 · 6da0950
npx skillmds@latest add liaosw97/react-components-react-component-creation-general File contents
---name: react-components-react-component-creation-generaldescription: 为创建 React 组件提供指导原则,强调仔细规划、现有组件检查和提示生成。---- 仔细考虑组件的目的、功能和设计。- 慢慢思考,逐步进行,并概述你的推理。- 检查以下任何位置是否已存在类似组件 - packages/ui/src/components - apps/spa/src/components- 如果不存在,为组件生成详细提示,包括: - 组件名称和目的 - 所需的 props 及其类型 - 任何特定的样式或行为要求 - 提及使用 Tailwind CSS 进行样式设计 - 请求使用 TypeScript- 对提示进行 URL 编码。- 按以下格式创建可点击链接: [ComponentName](https://v0.dev/chat?q={encoded_prompt})
liaosw97/awesome-rules-skills/tree/main/plugins/react/skills/react-components-react-component-creation---general commit 6da0950a1a
Frequently asked questions
Run npx skillmds@latest add liaosw97/react-components-react-component-creation-general in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
为创建 React 组件提供指导原则,强调仔细规划、现有组件检查和提示生成。 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.