skills / sergiodxa / agent-skills / frontend-react-best-practices

Frontend React Best Practices

A verified React engineering skill focused on render performance, composition patterns, and bundle-efficient UI architecture for production apps.

Source description: React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Trigger...

npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-react-best-practices
risk: lowinstall: CLIverified: 2026-02-15

On this page

Our added value (verification layer)

This page is not only a source mirror. We add reproducibility, risk controls, and operations guidance on top of the original skill definition.

  • Execution/Security/Maintainability scoring with explicit criteria
  • Compatibility matrix across runtime environments
  • Verification log with check commands and observed outcomes
  • Common failure fixes and rollback triggers for production safety

Overall score

88/100

Execution

91

Security

83

Maintainability

90

Quick install (universal)

Primary command for most environments:

npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-react-best-practices

Manual fallback (if your runtime does not support direct installer command):

  1. npx -y skills add https://github.com/sergiodxa/agent-skills --skill frontend-react-best-practices -y -g
  2. Restart your current agent/runtime so the new skill is loaded.
  3. Run a dry run: "review this React component and list concrete performance fixes".
  • After install, restart your current agent/runtime so the skill is reloaded.
  • Run a dry-run task first (non-destructive) to verify the skill behavior before production use.

SKILL.md (source preview)

Short preview shown here to keep this page focused on our verification layer.

React Best Practices Performance optimization and composition patterns for React components. Contains 33 rules across 6 categories focused on reducing re renders, optimizing bundles, component composition, and avoiding common React pitfalls. When to Apply Reference these guidelines when: Writing new React components Reviewing code for performance issues Refactoring existing React code Optimizing bundle size Working with hooks and state Rules Summary Bundle Size Optimization (...

View full SKILL.md source page →

Required permissions

file

Compatibility matrix

EnvironmentStatusNotes
React web app repositoriespassRules and references map directly to common React component workflows.
Mixed React Native + web projectspartialCore React guidance applies, but platform-specific UI APIs need separate checks.
Non-React stacksfailSkill guidance assumes React component and hook architecture.

Verification log

Canonical install command executed

npx -y skills add https://github.com/sergiodxa/agent-skills --skill frontend-react-best-practices -y -g

Pass

result: pass

Canonical source exists locally

test -f ~/.agents/skills/frontend-react-best-practices/SKILL.md

Pass

result: pass

Installed skill directory listed

ls -la ~/.agents/skills | rg "frontend-react-best-practices"

Pass

result: pass

Frontmatter + full body extracted

read ~/.agents/skills/frontend-react-best-practices/SKILL.md and split description/body

Pass

result: pass

Security notes

  • Review external dependency suggestions before introducing new packages.
  • Avoid exposing sensitive runtime data when sharing profiling artifacts.
  • Apply performance refactors with test coverage to prevent behavior regressions.

Common failures and fixes

Unexpected re-renders across component tree

Profile with React DevTools, then apply memoization/composition rules to reduce prop churn.

Large initial bundle size

Split heavy modules and defer non-critical imports based on route/component boundaries.

Slow list rendering

Apply virtualization/windowing and stable key strategies for high-volume lists.

Quick FAQ

How do I install this skill quickly?

Run npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-react-best-practices, then restart your runtime to reload skills.

What should I check before production rollout?

Confirm permissions, run a non-destructive dry run, and review rollback triggers.

What if install succeeds but actions do not run?

Verify SKILL.md location, restart runtime, and check environment/dependency readiness.

Recent changes

  • 2026-02-15: Added hot-skill page entry from competitor ranking gap analysis.
  • 2026-02-15: Installed canonical source and synced exact frontmatter description plus full SKILL.md body.
  • 2026-02-15: Added verification layer (score, compatibility, fixes, rollback, and FAQ-ready structure).

Rollback triggers

  • Optimization refactor causes functional regressions in core UI flows.
  • Bundle change increases TTI or LCP after deployment.
  • Team cannot maintain added abstraction complexity from optimization changes.

Known issues

Some rules may be too strict for small apps

Prioritize hot-path fixes first and defer low-impact refactors.

Profiling tooling variance across environments

Compare baseline and post-change metrics in the same runtime conditions.

Related tutorials

Site references