rongxinzy/rongxinai/react-component-blueprint

Claude Code and agent skill by rongxinzy/rongxinai

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

React 组件开发的标准化蓝图。从 Props 接口设计、状态策略选型到 a11y 与性能自检，按固定阶段交付可审查的组件代码。触发场景：新建组件、组件接口设计、组件开发 SOP、封装业务组件。

Install

npx vskill@latest install rongxinzy/rongxinai/react-component-blueprint

SKILL.md

React 组件开发蓝图

目标

把"从零写一个 React 组件"变成可审查、可验收的固定流程：接口先于实现，检查先于交付。

工作流

Phase 1：需求边界
  • 明确组件的功能边界、交互逻辑与数据流
  • 确定该组件是纯展示、受控还是内部自治
  • 写下一句话的组件契约（做什么、不做什么）
Phase 2：接口设计（先于实现）
  • 完整 TypeScript Props 类型定义；对外部传入的复杂对象定义独立 interface
  • 状态策略选型并说明理由：useState / useReducer / Context / 外部 store
  • 副作用与生命周期：何时发请求、何时清理
  • 对外回调命名遵循 onXxx 约定，事件对象与语义值分开
Phase 3：实现编码
  • 函数组件 + Hooks，Tailwind 样式使用语义 token（禁止硬编码色值）
  • 关键逻辑附一行注释说明设计意图
  • 一次输出完整可运行代码
Phase 4：自审查（交付前必做）

逐项检查：

  • 类型安全：无 any，无 class 组件
  • a11y：可点击元素有键盘可达性、图标有 aria-label、表单有 label
  • 性能：渲染路径无隐式大对象重建；必要时 useMemo/useCallback 并说明依据
  • 边界：空数据、超长文本、加载中、错误态
  • 样式规范：无硬编码色值、无任意圆角/阴影值、明暗主题均可用
Phase 5：交付
  • 附最小使用示例
  • 说明扩展方向与注意事项
  • 写入的文件会自动记录；最终交付的组件文件再用 declare_artifact 标注为交付物

输出规范

  • 先给组件契约与 Props 设计，再给实现
  • 状态策略选择必须说明理由（为什么不选更简单的方案）
  • 自审查结论逐项列出（通过 / 不通过 + 修复点）

Security

  • Security scanPassed, 96 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
162
Repository forks
8
7-day trend score
0

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/rongxinzy/rongxinai/react-component-blueprint/badge)](https://verified-skill.com/skills/rongxinzy/rongxinai/react-component-blueprint)

Something wrong with this skill or its page? Tell us.