返回 Skill 列表
extension
分类: 开发与工程无需 API Key

react-vite-guide

React 19 + Vite 单页应用开发指南。组合模式、性能优化和网页界面最佳实践。在基于Vite的项目中编写、审查或重构React组件时使用。涵盖复合组件、状态管理、打包优化、防止重复渲染、可访问性以及UI模式。在处理React组件工作、性能问题、代码审查或新功能开发时触发。

person作者: jakexiaohubgithub

React + Vite Execution Router

Scope and Classification

Apply only to CSR SPA/MPA or an existing backend's Vite client. Stop on SSR, hydration architecture, RSC, or server-function ownership.

Record once: request_mode (implement|review|migrate|diagnose), mutation authority, requested outcome, resolved React/Vite versions, React 19.2 gate, app/library/mixed consumers, CSR boundary, and the first observed work signal. Do not infer unresolved or mixed versions.

Only when the signal is Vite work, also collect the actual Node version plus CI/runtime evidence. Continue to the selected Vite leaf only when Vite is in that leaf's supported source/target boundary and Node satisfies (major == 20 and minor >= 19), (major == 22 and minor >= 12), or major > 22; otherwise return a blocked record before reading a leaf. Pass this preflight evidence unchanged.

Conditional Table of Contents

Choose exactly one initial leaf closest to the requested outcome. Read another leaf only when the first leaf returns it.

| Initial signal or task | Initial leaf | |---|---| | Component size/separation/composition, feature folders, export/import, public API | React structure and public API | | Custom Hook extraction, duplicate lifecycle, unnecessary Effect, subscription/timer/browser API | React Hooks and Effects | | State lift/down, reducer/Context/store, URL state, server-data owner, request lifetime | React state and data | | Rerender, memoization, Profiler, performance claim, Compiler-related optimization | React render performance | | Lazy/Suspense, loading/background/empty/error, Error Boundary, retry/reset | React async UI | | Already-owned control/navigation semantics, keyboard/focus/name, announcement, reduced motion | React accessibility | | React 18 root/unmount warning, ref/Context syntax, React 18 Compiler compatibility | React 18 runtime compatibility | | Explicit React 18→19 departure audit | React 18 to 19 migration | | React 19 migration arrival validation with normalized departure evidence already present | React 19 migration | | React 19 ref/provider, Activity, useEffectEvent | React 19 component APIs | | React 19 form submission/mutation owner, Action API, or use(Context|Promise) | React 19 Actions and async APIs | | Compiler performance/optimization without normalized baseline | React render performance | | Vite 7 entry/dev/proxy, env/mode, asset URL/public/query | Vite 7 client runtime | | Vite 7 dynamic import/chunk/import graph, manualChunks, plugin | Vite 7 build and plugins | | Vite 7 subpath, cache headers, stale chunk, reload recovery | Vite 7 deployment | | Explicit Vite 6→7 migration | Vite 6 to 7 migration |

Minimal Execution Loop

  1. Run the selected leaf with the common inputs.
  2. Collect its decision record. Pass handoff_evidence unchanged to its exact next_reference.
  3. A leaf handoff must be none, an exact relative .md path, or return_to_caller. Resolve return_to_caller only from the exact caller path in received evidence; local compare/reverify stays inside the current leaf.
  4. Do not revisit an owner already decided unless new evidence is returned.
  5. Stop on a handoff cycle, version/scope mismatch, missing required evidence, failed verification, breaking public decision without approval, or mutation beyond authority.
  6. Finish when next_reference is none and the request-mode completion rule is met.

Common Decision Record

reference: <leaf filename>
task_branch: <executed responsibility>
inputs_observed: [<paths, owners, symptoms, measurements>]
decision: <selection or not-applied>
actions_or_findings: [<authorized changes or read-only findings>]
verification:
  status: passed | failed | not-run | blocked
  evidence: <result or reason>
stop_reason: <none or reason>
next_reference: <none or relative leaf path>
handoff_evidence: [<evidence the next leaf can reuse>]

Complete or Stop

  • review: finish with evidence-backed findings and risks; no mutation is required.
  • diagnose: finish with root cause, affected owner, and verification evidence.
  • implement|migrate: finish with authorized changes and proportionate verification.

Return the classification, visited leaves, decision records, stopped/non-applied branches, and remaining unverified risks. A blocked or failed leaf cannot be reported as passed.