skills.rest
deckgl-fiber-renderer
deckgl-fiber-rendererOFFICIAL
Explore all skills by this author →
GitHub

accelint-react-best-practices

Identify and remediate React performance issues using pattern-driven workflows.

17|1|Updated Mar 14, 2025
Search Tags:#performance#react#optimization#best-practices#ssr#hydration#react-19
One-click install
npx skills add https://github.com/deckgl-fiber-renderer/fiber.gl --skill accelint-react-best-practices-deckgl-fiber-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accelint-react-best-practices
Source: https://github.com/deckgl-fiber-renderer/fiber.gl/tree/main/.agents/skills/accelint-react-best-practices
Command: npx skills add https://github.com/deckgl-fiber-renderer/fiber.gl --skill accelint-react-best-practices-deckgl-fiber-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill helps AI agents and developers quickly identify and remediate React performance issues using a structured, pattern-driven approach.

Core Features & Use Cases

  • Progressive disclosure with AGENTS.md as the overview; access to detailed references in references/; quick diagnostic guides; checklists; real-world pattern examples; React 19 migration guidance.
  • Facilitates SSR/hydration safety, memoization, and performance tuning across re-renders, rendering, and advanced patterns.

Quick Start

Read AGENTS.md for an overview, then load the relevant references to apply patterns to your code.

Frequently Asked Questions about accelint-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix React hydration mismatches in a Next.js SSR application?▼

React hydration mismatches are resolved using a structured, pattern-driven workflow that identifies rendering inconsistencies between server and client. The skill provides specific diagnostic checklists and references to remediate SSR and hydration safety issues.

What's the best way to optimize unnecessary React component re-renders?▼

To optimize React re-renders, apply battle-tested performance patterns including memoization and advanced rendering techniques. The workflow uses quick diagnostic guides to identify bottlenecks and apply targeted improvements across components and hooks.

How do I migrate my existing React application to React 19?▼

Migrating to React 19 is facilitated by specific migration guidance within the references. The workflow applies pattern-driven checks to update components, hooks, and rendering patterns for compatibility with React 19 features.

Does this React performance workflow require any external dependencies?▼

No external dependencies are required. The workflow is activated via frontmatter and discovered through AGENTS.md, using internal references and quick-checklists to drive performance improvements without additional packages.

Why does my React server-side rendering fail to match client output?▼

SSR rendering fails when server and client output diverge, creating hydration mismatches. The skill applies a structured diagnostic process using reference patterns to identify and remediate these specific SSR and hydration context issues.

Can I use these React optimization patterns for general performance tuning?▼

Yes, the patterns apply to general React performance tuning, covering memoization, re-render optimizations, and advanced rendering techniques. The workflow uses diagnostic guides to drive targeted improvements across various rendering scenarios.

Related Skills

Explore More Software Engineering Skills→
d0whc3rd0whc3r

vercel-react-best-practices

Catalog React and Next.js performance patterns for writing, reviewing, and refactoring code.

Community
Advanced
ricablericable

vercel-react-best-practices

Optimize React and Next.js code for rendering efficiency and maintainability.

Community
Advanced
jewbetchajewbetcha
115

vercel-react-best-practices

Apply React and Next.js performance best practices during development and code reviews.

Community
Basic
JayRHaJayRHa
3

performance-profiler

Measure, profile, and validate performance improvements across Python, Node.js, Go, Java, SQL, and HTTP.

Community
Advanced