Updated: Jul 19, 2026
Version: v1.1
Sources: 1 source
Status: Published

vercel-react-best-practices

React best practices

Vercel

Guides React or Next.js implementation and refactoring with prioritized performance rules.

License: MIT
Risk: Risk level: medium

Level 1

Understand

Risk profile

This is a risk profile, not a certification or a safety guarantee.

What can it read? Present: It can read the React or Next.js files in the project you give it.
What can it create or change? Present: It can change project files when you ask it to build or rework something (refactor).
Can it use the internet or send data? Not evaluated: The published fields do not say whether this skill can use the internet or send data.
Can it use saved logins or a paid quota? Not evaluated: The published fields do not say whether this skill can use saved logins or a paid quota.
Which action needs your approval? Present: Changing project files is described as happening only when you ask for an implementation or a rework.
When was the source verified, and has the snapshot changed since? Present: The source was last verified on 2026-07-19. The published snapshot still matches that verification. This is not a live check of the upstream source.

Canonical source: https://github.com/vercel-labs/agent-skills/blob/f8a72b9603728bb92a217a879b7e62e43ad76c81/skills/react-best-practices/SKILL.md(opens in a new tab)
Source revision: f8a72b9603728bb92a217a879b7e62e43ad76c81
License: MIT
Verification date: 2026-07-19
Source status: Verified
Change status: Snapshot consistent; The published snapshot still matches the last verification. This is not a live check of the upstream source.

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

Verbatim from the English source

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

Level 2

Apply

Choose

Verbatim from the English source

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

Required tools

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

Check permissions and confirm every external effect before using this skill.

Compare

Works withWeb interface audit Works withWeb app testing

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.

Use in your agent

Complete the task with React best practices

# Use React best practices in your agent

## Objective
Use the existing vercel-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.

## When not to use
- 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

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · read access to React or Next.js source and the skill's referenced rule files
Requires · scoped repository write tools only for requested implementation or refactoring
Requires · React or Next.js source

Why it works

Activation is limited to tasks the skill actually covers.
Permissions, tools, and external effects are visible before execution.
Confirmation and the output format keep actions controllable.

Try next

Check the React best practices result

# Verify the React best practices outcome

## Objective
Check that the vercel-react-best-practices skill was used within scope and that its effects match the authorized request.

## Checks
- Compare the source and revision with the manifest.
- Separate local, browser, and external evidence.
- Report any permission or effect that was not disclosed.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:fda41b3467d162baa73c735ec07032841826d7b73c2db1c7eb5007bc84f80a18

Verify in your agent

Confirm that React best practices produced the right outcome

# Verify React best practices in your agent

## Result to check
Verify the use of vercel-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

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · read access to React or Next.js source and the skill's referenced rule files
Requires · scoped repository write tools only for requested implementation or refactoring
Requires · React or Next.js source

Why it works

The check starts from the manifest and expected artifacts, not a general impression.
Observed permissions and effects are compared with what was disclosed.
Local, browser, and external evidence stay separate in the verdict.

Try next

Prepare the next React best practices check

# Make the React best practices check reusable

## Objective
Turn the successful checks into a bounded checklist for the next use of vercel-react-best-practices.

## Checks
- Keep only observable signals.
- Tie each permission to its expected effect.
- Add an explicit stop if the source or revision changes.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:6b6fb4619c14b4c3ed85ad782b56557445b38af52003b64940c5c14852a16d3b

Pack digest: sha256:d4c507dd652cfb7ff62e2ed047def044b1ef536801afebfbadaf1ba12bd063db

Level 3

Verify

Source provenance

Open the canonical source

Source revision: f8a72b9603728bb92a217a879b7e62e43ad76c81
Digest: sha256:71ed7794962fa6e803ee83030517b5b93a9f70fbfeb431ec4535c5480a8d8355

Understand

Risk profile

This is a risk profile, not a certification or a safety guarantee.

What can it read? Present: It can read the React or Next.js files in the project you give it.
What can it create or change? Present: It can change project files when you ask it to build or rework something (refactor).
Can it use the internet or send data? Not evaluated: The published fields do not say whether this skill can use the internet or send data.
Can it use saved logins or a paid quota? Not evaluated: The published fields do not say whether this skill can use saved logins or a paid quota.
Which action needs your approval? Present: Changing project files is described as happening only when you ask for an implementation or a rework.
When was the source verified, and has the snapshot changed since? Present: The source was last verified on 2026-07-19. The published snapshot still matches that verification. This is not a live check of the upstream source.

Canonical source: https://github.com/vercel-labs/agent-skills/blob/f8a72b9603728bb92a217a879b7e62e43ad76c81/skills/react-best-practices/SKILL.md(opens in a new tab)
Source revision: f8a72b9603728bb92a217a879b7e62e43ad76c81
License: MIT
Verification date: 2026-07-19
Source status: Verified
Change status: Snapshot consistent; The published snapshot still matches the last verification. This is not a live check of the upstream source.

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

Verbatim from the English source

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

Apply

Choose

Verbatim from the English source

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

Required tools

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

Check permissions and confirm every external effect before using this skill.

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.

Use in your agent

Complete the task with React best practices

# Use React best practices in your agent

## Objective
Use the existing vercel-react-best-practices skill only when it directly covers the requested task.

## Permissions
- read scoped React or Next.js repository files
- write scoped source changes only when implementation or refactoring is requested

## When not to use
- 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

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · read access to React or Next.js source and the skill's referenced rule files
Requires · scoped repository write tools only for requested implementation or refactoring
Requires · React or Next.js source

Why it works

Activation is limited to tasks the skill actually covers.
Permissions, tools, and external effects are visible before execution.
Confirmation and the output format keep actions controllable.

Try next

Check the React best practices result

# Verify the React best practices outcome

## Objective
Check that the vercel-react-best-practices skill was used within scope and that its effects match the authorized request.

## Checks
- Compare the source and revision with the manifest.
- Separate local, browser, and external evidence.
- Report any permission or effect that was not disclosed.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:fda41b3467d162baa73c735ec07032841826d7b73c2db1c7eb5007bc84f80a18

Verify in your agent

Confirm that React best practices produced the right outcome

# Verify React best practices in your agent

## Result to check
Verify the use of vercel-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

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · read access to React or Next.js source and the skill's referenced rule files
Requires · scoped repository write tools only for requested implementation or refactoring
Requires · React or Next.js source

Why it works

The check starts from the manifest and expected artifacts, not a general impression.
Observed permissions and effects are compared with what was disclosed.
Local, browser, and external evidence stay separate in the verdict.

Try next

Prepare the next React best practices check

# Make the React best practices check reusable

## Objective
Turn the successful checks into a bounded checklist for the next use of vercel-react-best-practices.

## Checks
- Keep only observable signals.
- Tie each permission to its expected effect.
- Add an explicit stop if the source or revision changes.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:6b6fb4619c14b4c3ed85ad782b56557445b38af52003b64940c5c14852a16d3b

Pack digest: sha256:d4c507dd652cfb7ff62e2ed047def044b1ef536801afebfbadaf1ba12bd063db