#601

Globales Ranking · von 601 Skills

react-performance AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-performance

45

Installationen

React Performance

Overview

Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).

When to use: Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.

When NOT to use: General React component patterns (use react-patterns skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).

Quick Reference

Category Technique Key Points
Compiler React Compiler Automatic memoization at build time; eliminates manual memo/useMemo/useCallback
Memoization React.memo(Component) Wrap components receiving stable primitive props from frequently re-rendering parents
Memoization useMemo(fn, deps) Expensive computations only: sorting, filtering, Set/Map construction
Memoization useCallback(fn, deps) Only when passed to memoized children; use functional setState for stable refs
Splitting React.lazy(() => import()) Lazy-load heavy components with <Suspense> fallback
Splitting Preload on intent Trigger import() on hover/focus for perceived speed
Bundle Direct imports Avoid barrel files; import from specific paths to reduce module count
Bundle Defer third-party Load analytics, logging after hydration
Re-renders startTransition Mark non-urgent updates (search, scroll tracking) as interruptible
Re-renders Functional setState setState(prev => ...) eliminates state dependencies from callbacks
Re-renders Derived state Subscribe to booleans, not continuous values; compute during render
Re-renders Defer state reads Read dynamic state (searchParams) inside callbacks, not at render
Rendering content-visibility: auto Skip layout/paint for off-screen items in long lists
Rendering Hoist static JSX Extract constant elements outside component functions
Profiling React DevTools Profiler Record renders, identify slow components, flamegraph analysis
Profiling Bundle analyzer Visualize chunk sizes, find oversized dependencies

Common Mistakes

Mistake Correct Pattern
Wrapping everything in useMemo/useCallback Trust React Compiler first; only memoize expensive computations or memoized-child callbacks
Memoizing cheap operations like value * 2 Skip memo for simple primitives; overhead exceeds recomputation cost
Importing from barrel files (lucide-react, @mui/material) Import directly from specific paths or use optimizePackageImports
Loading analytics/tracking in the initial bundle Defer with lazy + mounted state to load after hydration
Subscribing to continuous values (window width) for boolean checks Use useMediaQuery or derived boolean to re-render only on threshold change
Referencing state in useCallback dependency array Use functional setState setState(prev => ...) for stable callbacks
Using useEffect to derive state from props Compute derived values during render; effects add an extra render cycle
Creating new object literals as props on every render Hoist static objects outside component; use useMemo for dynamic objects
Profiling in development mode Always profile production builds; dev mode includes extra warnings that skew results

Delegation

  • Profile and diagnose performance bottlenecks: Use Explore agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
  • Apply performance optimizations to existing code: Use Task agent to implement code splitting, add memoization boundaries, and optimize rendering
  • Plan performance improvement strategy: Use Plan agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap

If the react-patterns skill is available, delegate general component architecture and React 19 API questions to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill react-patterns

References

Installationen

Installationen 45
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install react-performance by running npx skills add oakoss/agent-skills --skill react-performance in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für react-performance, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport