技能库智客分类：设计创意 react

反应

运行React应用程序作为被命名的工具:检查和诊断React/Vite项目,设计组件边界和状态流,执行可访问响应的UI,并验证项目测试的行为. 当一个任务明确涉及React,JSX/TSX,React hooks,React Router,Vite React配置,或React构建失败时使用. 不要用于框架-不可知前端策略(向前端-工程的路线),浏览器自动化(向剧作家的路线),访问政策或审核(向网络访问的路线),或非反应移动应用程序(向移动-开发的路线).

18 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

运行 React 应用程序作为命名工具:检查和诊断 React/Vite 项目,设计组件边界和状态流,执行可访问的响应UI,并验证项目测试的行为

何时用

一个任务明确涉及React,JSX/TSX,React hooks,React Router,Vite React配置,或React构建失败. 不使用框架不可知的前端策略(向前端工程的路线)、浏览器自动化(向剧作家的路线)、无障碍政策或审计(

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：React Application Engineering、Operating loop、React-specific rules、Routing and handoffs、Reference routing、Included script。

文件分析

文件分析：除 SKILL.md 外，正文引用了 scripts/react-doctor.py、references/vite-diagnostics.md、references/component-and-state.md，属于带资源的技能包，这些文件按需再读。

官方 description（原文）

Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the project's tests. Use when a task explicitly involves React, JSX/TSX, React hooks, React Router, Vite React configuration, or React build failures. Do not use for framework-agnostic frontend strategy (route to frontend-engineering), browser automation (route to playwright), accessibility policy or audits (route to web-accessibility), or non-React mobile apps (route to mobile-development).

React Application EngineeringOperating loopReact-specific rulesRouting and handoffsReference routingIncluded scriptCompletion boundary

兼容：The bundled diagnostic script uses Python 3.8+ standard library only. Running or building an application requires its repository package manager and Node.js. · 许可：MIT

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: react
description: Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the project's tests. Use when a task explicitly involves React, JSX/TSX, React hooks, React Router, Vite React configuration, or React build failures. Do not use for framework-agnostic frontend strategy (route to frontend-engineering), browser automation (route to playwright), accessibility policy or audits (route to web-accessibility), or non-React mobile apps (route to mobile-development).
compatibility: The bundled diagnostic script uses Python 3.8+ standard library only. Running or building an application requires its repository package manager and Node.js.
许可: MIT

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

指令中引用的文件 · 3

scripts/react-doctor.py
references/vite-diagnostics.md
references/component-and-state.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「react」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-14cbfcd5290b7ff6-%E5%8F%8D%E5%BA%94.html
请存为 .cursor/skills/react/SKILL.md 或 .claude/skills/react/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/magnus919/agent-skills 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/magnus919/agent-skills' --list

npx skills add 'https://github.com/magnus919/agent-skills' --skill 'react'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

---
name: react
description: >-
  Operate React applications as a named tool: inspect and diagnose React/Vite
  projects, design component boundaries and state flow, implement accessible
  responsive UI, and verify behavior with the project's tests. Use when a task
  explicitly involves React, JSX/TSX, React hooks, React Router, Vite React
  configuration, or React build failures. Do not use for framework-agnostic
  frontend strategy (route to frontend-engineering), browser automation (route
  to playwright), accessibility policy or audits (route to web-accessibility),
  or non-React mobile apps (route to mobile-development).
license: MIT
compatibility: >-
  The bundled diagnostic script uses Python 3.8+ standard library only. Running
  or building an application requires its repository package manager and Node.js.
metadata:
  tags: react, jsx, tsx, vite, hooks, components, router, frontend
  source: https://react.dev/
---

# React Application Engineering

Use this skill for the React-specific implementation layer. Preserve the
project's existing React version, package manager, build scripts, styling
conventions, and routing model unless the user asks for a migration.

## Operating loop

1. **Diagnose before editing.** Run `scripts/react-doctor.py --json [PROJECT]` and
   inspect `package.json`, source entry points, Vite config, TypeScript config,
   routes, and test scripts. The diagnostic is bounded and read-only.
2. **Define the component contract.** Identify the page/feature boundary,
   inputs and outputs, owned state, server state, loading/empty/error/success
   states, and side effects. Keep reusable components independent of route
   globals and avoid passing state through unrelated layers.
3. **Implement with explicit data flow.** Prefer local state for local behavior,
   context only for genuinely cross-cutting concerns, and the existing server
   state/cache solution for remote data. Keep effects for synchronization with
   external systems; derive values during render rather than storing duplicates.
4. **Keep UI resilient.** Render a useful loading, empty, error, and success
   experience. Cancel or ignore stale async work, handle aborts, and avoid
   setting state after an obsolete request. Preserve stable keys and avoid
   mutating props or state.
5. **Build for the browser.** Use semantic HTML, keyboard-operable controls,
   visible focus, responsive layout, and stable accessible names. For detailed
   accessibility requirements, load [web-accessibility](../web-accessibility/SKILL.md).
6. **Verify in layers.** Run the narrowest existing unit/component test, then
   lint/typecheck, then the production build. For browser-level flows use
   [playwright](../playwright/SKILL.md), not ad hoc browser automation. Report
   the exact commands and any environment-dependent checks that were skipped.

## React-specific rules

- Hooks run unconditionally and in the same order on every render; never call
  them in branches, loops, event handlers, or nested functions.
- Effects synchronize with external systems. Do not use an effect to calculate
  a value that can be derived from props/state, or to mirror props into state
  without a clear user-editing requirement.
- Use functional updates when the next state depends on the previous state.
  Give list items stable keys from domain identity, not array indexes when the
  list can reorder, insert, or delete.
- Treat event handlers as user intent and keep them separate from render-time
  computation. Disable or guard duplicate submissions and expose pending state.
- Keep API response validation and transformation at the integration boundary;
  components should consume a typed, predictable view model.
- Do not add a state library or router solely because it is popular. First map
  ownership and use the project's existing choices.
- In Vite, expose only intentionally public variables using the project's
  documented prefix (normally `VITE_`); never put secrets in client bundles.
  Read [references/vite-diagnostics.md](references/vite-diagnostics.md) for
  environment, build, and deployment checks.

## Routing and handoffs

- Component architecture, responsive implementation, performance budgets, and
  general frontend testing: [frontend-engineering](../frontend-engineering/SKILL.md).
- Browser E2E authoring, locator choice, network interception, and Playwright
  runs: [playwright](../playwright/SKILL.md).
- Semantic structure, keyboard/focus behavior, WCAG acceptance evidence, and
  accessibility audits: [web-accessibility](../web-accessibility/SKILL.md).
- React Native, Expo, Android, or iOS implementation: [mobile-development](../mobile-development/SKILL.md).

## Reference routing

| Load when | Reference |
|---|---|
| Choosing component boundaries, state ownership, effects, or async UI behavior | `references/component-and-state.md` |
| Diagnosing Vite env exposure, dependency versions, build output, or deployment paths | `references/vite-diagnostics.md` |

## Included script

`scripts/react-doctor.py` is a read-only, dependency-free diagnostic. Run
`scripts/react-doctor.py --help` for options. It accepts a project directory,
checks common React/Vite signals, and emits human-readable or bounded JSON
output. It does not install packages, execute project scripts, access the
network, or print environment values.

## Completion boundary

Stop when the requested React change is implemented, the project's relevant
checks have run, and remaining failures are reported with their command and
root-cause evidence. Do not broaden a component task into a framework migration
or an accessibility audit without explicit scope.

阅读排版

name: react description: >- Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the project's tests. Use when a task explicitly involves React, JSX/TSX, React hooks, React Router, Vite React configuration, or React build failures. Do not use for framework-agnostic frontend strategy (route to frontend-engineering), browser automation (route to playwright), accessibility policy or audits (route to web-accessibility), or non-React mobile apps (route to mobile-development). license: MIT compatibility: >- The bundled diagnostic script uses Python 3.8+ standard library only. Running or building an application requires its repository package manager and Node.js. metadata: tags: react, jsx, tsx, vite, hooks, components, router, frontend source: https://react.dev/

React Application Engineering

Use this skill for the React-specific implementation layer. Preserve the project's existing React version, package manager, build scripts, styling conventions, and routing model unless the user asks for a migration.

Operating loop

Diagnose before editing. Run scripts/react-doctor.py --json [PROJECT] and inspect package.json, source entry points, Vite config, TypeScript config, routes, and test scripts. The diagnostic is bounded and read-only.
Define the component contract. Identify the page/feature boundary, inputs and outputs, owned state, server state, loading/empty/error/success states, and side effects. Keep reusable components independent of route globals and avoid passing state through unrelated layers.
Implement with explicit data flow. Prefer local state for local behavior, context only for genuinely cross-cutting concerns, and the existing server state/cache solution for remote data. Keep effects for synchronization with external systems; derive values during render rather than storing duplicates.
Keep UI resilient. Render a useful loading, empty, error, and success experience. Cancel or ignore stale async work, handle aborts, and avoid setting state after an obsolete request. Preserve stable keys and avoid mutating props or state.
Build for the browser. Use semantic HTML, keyboard-operable controls, visible focus, responsive layout, and stable accessible names. For detailed accessibility requirements, load web-accessibility.
Verify in layers. Run the narrowest existing unit/component test, then lint/typecheck, then the production build. For browser-level flows use playwright, not ad hoc browser automation. Report the exact commands and any environment-dependent checks that were skipped.

React-specific rules

Hooks run unconditionally and in the same order on every render; never call them in branches, loops, event handlers, or nested functions.
Effects synchronize with external systems. Do not use an effect to calculate a value that can be derived from props/state, or to mirror props into state without a clear user-editing requirement.
Use functional updates when the next state depends on the previous state. Give list items stable keys from domain identity, not array indexes when the list can reorder, insert, or delete.
Treat event handlers as user intent and keep them separate from render-time computation. Disable or guard duplicate submissions and expose pending state.
Keep API response validation and transformation at the integration boundary; components should consume a typed, predictable view model.
Do not add a state library or router solely because it is popular. First map ownership and use the project's existing choices.
In Vite, expose only intentionally public variables using the project's documented prefix (normally VITE_); never put secrets in client bundles. Read references/vite-diagnostics.md for environment, build, and deployment checks.

Routing and handoffs

Component architecture, responsive implementation, performance budgets, and general frontend testing: frontend-engineering.
Browser E2E authoring, locator choice, network interception, and Playwright runs: playwright.
Semantic structure, keyboard/focus behavior, WCAG acceptance evidence, and accessibility audits: web-accessibility.
React Native, Expo, Android, or iOS implementation: mobile-development.

Reference routing

| Load when | Reference | |---|---| | Choosing component boundaries, state ownership, effects, or async UI behavior | references/component-and-state.md | | Diagnosing Vite env exposure, dependency versions, build output, or deployment paths | references/vite-diagnostics.md |

Included script

scripts/react-doctor.py is a read-only, dependency-free diagnostic. Run scripts/react-doctor.py --help for options. It accepts a project directory, checks common React/Vite signals, and emits human-readable or bounded JSON output. It does not install packages, execute project scripts, access the network, or print environment values.

Completion boundary

Stop when the requested React change is implemented, the project's relevant checks have run, and remaining failures are reported with their command and root-cause evidence. Do not broaden a component task into a framework migration or an accessibility audit without explicit scope.

反应