react-best-practices
React best practices
Vercel
Guides React or Next.js implementation and refactoring with prioritized performance rules.
- License
- MIT
- Risk
- Medium
Understand
Covered goals
- implement React code
- refactor Next.js code
- improve frontend performance
Inputs → outputs
- React or Next.js source
- bounded implementation objective
- performance guidance or review findings
- optional scoped React or Next.js code changes when implementation was requested
Recognize
Triggers
- write a React component
- refactor a Next.js route
- reduce React performance cost
Non-triggers
- non-React implementation
- visual design audit only
- automatic dependency upgrade
Choose
Permissions
- read scoped React or Next.js repository files
- write scoped source changes only when implementation or refactoring is requested
External effects
- local repository changes only when implementation or refactoring is requested
- project tests or builds may be run as separate verification when available, but the skill does not require them
Compatibility
- React and Next.js codebases in a runtime that can read the referenced rule files
Check permissions and confirm every external effect before using this skill.
Compare
Understand → Recognize → Choose → Compare
Pack for your agent
Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.
usage
Use in your agent
# Use React best practices in your agent ## Objective Use the existing react-best-practices skill only when it directly covers the requested task. ## Prerequisites - React or Next.js source - bounded implementation objective - read access to React or Next.js source and the skill's referenced rule files - scoped repository write tools only for requested implementation or refactoring ## Permissions - read scoped React or Next.js repository files - write scoped source changes only when implementation or refactoring is requested ## External effects - local repository changes only when implementation or refactoring is requested - project tests or builds may be run as separate verification when available, but the skill does not require them ## Procedure - Open the canonical source pinned to revision f8a72b9603728bb92a217a879b7e62e43ad76c81. - Read the skill instructions before calling its tools. - Ask for confirmation before any paid, destructive, or remote effect not already authorized. - Run the procedure within the requested scope and retain useful evidence. ## Non-goals - non-React implementation - visual design audit only - automatic dependency upgrade ## Expected result - performance guidance or review findings - optional scoped React or Next.js code changes when implementation was requested
sha256:fdcba67b099eed15a1b591c94a510fb8d8ac5d9d3600aaa671dc7805f06c4c77
verification
Verify in your agent
# Verify React best practices in your agent ## Result to check Verify the use of react-best-practices for the current bounded task. ## Failure signals - The source or revision does not match the manifest. - A permission or external effect was not disclosed. - The output does not match the expected artifacts. - The skill activated for a declared non-trigger. ## Checks - Compare the SHA-256 of SKILL.md with sha256:71ed7794962fa6e803ee83030517b5b93a9f70fbfeb431ec4535c5480a8d8355. - Confirm the permissions actually used and the observed effects. - Verify artifacts with the narrowest available test. - Separate local, browser, and external evidence in the report. ## Expected result - performance guidance or review findings - optional scoped React or Next.js code changes when implementation was requested
sha256:6771561f74f38c15bf3060cac61d7794c1de23067163f024af79c66ccb4caab8
Pack digest: sha256:d8ecaa2c3b9716c65e7732416c41750a1e1605e0ab2c79fa102745cb0afd850c
Source and verification
Open the canonical source- Source revision
- f8a72b9603728bb92a217a879b7e62e43ad76c81
- Verified on
- Digest
- sha256:71ed7794962fa6e803ee83030517b5b93a9f70fbfeb431ec4535c5480a8d8355