react-best-practices

Name: react-best-practices
Author: shapeshift/web

shapeshiftDevelopment38 installs

About react-best-practices

Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.

Install

Copy the command and run it in a terminal.

$npx skills add https://shapeshift/web --skill react-best-practices

After installing, type/react-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

react-performance-guidelines.md

references/rules/

_sections.md

_template.md

advanced-event-handler-refs.md

advanced-use-latest.md

async-api-routes.md

async-defer-await.md

async-dependencies.md

async-parallel.md

async-suspense-boundaries.md

bundle-barrel-imports.md

bundle-conditional.md

bundle-defer-third-party.md

bundle-dynamic-imports.md

bundle-preload.md

client-event-listeners.md

client-swr-dedup.md

download_rules.sh

js-batch-dom-css.md

js-cache-function-results.md

js-cache-property-access.md

js-cache-storage.md

js-combine-iterations.md

js-early-exit.md

js-hoist-regexp.md

js-index-maps.md

js-length-check-first.md

js-min-max-loop.md

js-set-map-lookups.md

js-tosorted-immutable.md

Comments

Markdown supported

Details

Author: shapeshift/web
Category: Development
Installs: 38

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

852.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.