一键在 Manus 中运行任何 Skill

react-performance

React performance for AFENDA-HYBRID: runtime rendering (re-renders, keys, virtualization) and build-time delivery (bundles, tree-shaking, code splitting, compiler directives). Use when fixing slow lists, grids, or large client bundles.

在 Manus 中运行

星标0

分支0

更新时间2026年3月23日 00:08

来源

pohlai88

pohlai88/afenda-hybrid

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

软件开发工程师计算机与数学类职业15-1252L4

文件资源管理器

6 个文件

SKILL.md

readonly

name	react-performance
description	React performance for AFENDA-HYBRID: runtime rendering (re-renders, keys, virtualization) and build-time delivery (bundles, tree-shaking, code splitting, compiler directives). Use when fixing slow lists, grids, or large client bundles.
metadata	{"author":"AFENDA team","version":"2026.03.23","source":"React docs + AFENDA-HYBRID codebase analysis","official_docs":"https://react.dev"}

Performance work splits into two domains. Diagnose which domain applies before changing code.

Runtime performance

Re-render scope: state placement, stable keys, splitting interactive leaves
Memoization: prefer letting React Compiler optimize when enabled; avoid blanket useMemo/useCallback
Lists and grids: virtualization (e.g. TanStack Virtual) for large collections
Event handlers: avoid recreating heavy closures in hot paths when it measurably matters

Build-time performance

Bundle size: dynamic import(), route-level splitting, dependency audits
Tree-shaking: avoid side-effectful modules and accidental barrel re-exports
Compiler directives: "use memo" / "use no memo" only when justified (document why)

Provenance: see GENERATION.md.

Version alignment: React 19; confirm compiler and Next bundler behavior against current project config.

Core

Domain	Topic	Reference
Runtime	Re-renders, keys, splitting	rendering-optimization
Build-time	Compiler modes and directives	compiler-directives
Build-time	Bundles, imports, barrels	bundle-analysis
Runtime	Virtualized lists/grids	virtualization

Non-Goals

This skill does not:

Optimize server-side code, SQL, or database pooling (@afenda/db)
Tune CDN, caching headers, or image pipelines (unless explicitly in scope)
Change business logic to “skip” renders
Apply risky automatic refactors — use react-quality-engine tiers

AFENDA Monorepo Reality Mapping

Area	Enforce
ui-core	Primitives stay lean; avoid heavy optional deps in hot paths; document virtualization helpers if added
view-engine	List/kanban renderers: prefer virtualization for large datasets; stable row keys
erp-view-pack	Selection and bulk UIs: minimize re-renders on selection changes (narrow subscriptions)
apps/web	Route-level code splitting; defer heavy client-only modules behind `dynamic` where appropriate

Related skills

react-accessibility — keyboard and focus interact with perf fixes
react-quality-engine — scoring and safe refactor workflow

同仓库更多 Skills

同仓库

react-accessibility

pohlai88/afenda-hybrid

Accessibility for React UIs in AFENDA-HYBRID: semantic HTML, ARIA, keyboard support, focus management, and testing. Use for grids, dialogs, bulk selection, notifications, and command surfaces.

2026-03-230

react-architecture

pohlai88/afenda-hybrid

React and Next.js App Router architecture for AFENDA-HYBRID: Server vs Client Components, composition, state placement, package layering (ui-core → view-engine → erp-view-pack → apps/web). Use when designing components, fixing import/layer violations, or RSC boundaries.

2026-03-230

react-design-patterns

pohlai88/afenda-hybrid

Implementation patterns for AFENDA-HYBRID React code: custom hooks, compound components, error boundaries / error.tsx, forms, server actions, and optimistic updates.

2026-03-230

react-quality-engine

pohlai88/afenda-hybrid

Meta-skill: React Quality Orchestrator for AFENDA-HYBRID. Coordinates architecture, performance, accessibility, and design-pattern skills for audits, scoring (Component Quality Index), and confidence-tiered refactors. Use for full-route reviews, legacy refactors, and governance checks.

2026-03-230

storybook-ai

pohlai88/afenda-hybrid

Official Storybook AI workflow — MCP server, manifests, MCP toolsets (development, docs, testing), and documentation best practices. Use when writing or fixing stories, connecting agents to Storybook, using design-system components without guessing props, or running Storybook tests from an agent. Sources are linked inline.

2026-03-230

vitest

pohlai88/afenda-hybrid

Vitest (Vite-powered) testing — Jest-compatible API, vi mocks, coverage, environments, projects/workspaces. Use when writing or fixing tests, vitest.config.ts, coverage, or monorepo test commands in AFENDA-HYBRID (@afenda/db, @afenda/ui-core, view-engine, erp-view-pack). Prefer https://vitest.dev for Vitest 4.x when reference snippets disagree.

2026-03-230

name	react-performance
description	React performance for AFENDA-HYBRID: runtime rendering (re-renders, keys, virtualization) and build-time delivery (bundles, tree-shaking, code splitting, compiler directives). Use when fixing slow lists, grids, or large client bundles.
metadata	{"author":"AFENDA team","version":"2026.03.23","source":"React docs + AFENDA-HYBRID codebase analysis","official_docs":"https://react.dev"}

Performance work splits into two domains. Diagnose which domain applies before changing code.

Runtime performance

Re-render scope: state placement, stable keys, splitting interactive leaves
Memoization: prefer letting React Compiler optimize when enabled; avoid blanket useMemo/useCallback
Lists and grids: virtualization (e.g. TanStack Virtual) for large collections
Event handlers: avoid recreating heavy closures in hot paths when it measurably matters

Build-time performance

Bundle size: dynamic import(), route-level splitting, dependency audits
Tree-shaking: avoid side-effectful modules and accidental barrel re-exports
Compiler directives: "use memo" / "use no memo" only when justified (document why)

Provenance: see GENERATION.md.

Version alignment: React 19; confirm compiler and Next bundler behavior against current project config.

Core

Domain	Topic	Reference
Runtime	Re-renders, keys, splitting	rendering-optimization
Build-time	Compiler modes and directives	compiler-directives
Build-time	Bundles, imports, barrels	bundle-analysis
Runtime	Virtualized lists/grids	virtualization

Non-Goals

This skill does not:

Optimize server-side code, SQL, or database pooling (@afenda/db)
Tune CDN, caching headers, or image pipelines (unless explicitly in scope)
Change business logic to “skip” renders
Apply risky automatic refactors — use react-quality-engine tiers

AFENDA Monorepo Reality Mapping

Area	Enforce
ui-core	Primitives stay lean; avoid heavy optional deps in hot paths; document virtualization helpers if added
view-engine	List/kanban renderers: prefer virtualization for large datasets; stable row keys
erp-view-pack	Selection and bulk UIs: minimize re-renders on selection changes (narrow subscriptions)
apps/web	Route-level code splitting; defer heavy client-only modules behind `dynamic` where appropriate

Related skills

react-accessibility — keyboard and focus interact with perf fixes
react-quality-engine — scoring and safe refactor workflow