Skip to skills
AI Craft Pad
Home/Skills/Development/vercel-react-best-practices
First-party source

Vercel React Best Practices

A first-party React and Next.js performance reference for reviewing data loading, bundle cost, rendering and component behavior.

Editorial review checked 2026-10-29 against this instruction snapshot. Supporting scripts and runtime behavior remain outside this editorial review.

What it does

This collection supplies prioritized performance guidance for React applications and Next.js projects. It covers several layers of the request-to-interface path, helping an agent look beyond a single component and consider how data fetching, JavaScript delivery and rendering interact. Its practical value is in structuring a review around likely user-visible costs before reaching for small local optimizations.

Best for

Teams building or maintaining React interfaces, reviewing a slow page, or refactoring components whose behavior and loading patterns have become difficult to understand. Use it alongside the project's actual framework version, performance traces and deployment constraints so the advice addresses the environment that users run.

Tradeoffs and requirements

A guideline is a hypothesis for a particular codebase, not evidence that an optimization improved it. Framework APIs and caching semantics change, and an aggressive refactor can alter behavior. Verify current documentation for the installed version, preserve accessibility and loading states, and measure a representative workload before accepting performance claims.

Unknown; inspect source requirements and supporting scripts.

Install from the source

Inspect the pinned source snapshot and its supporting files first. The command selects this skill through the open-source skills CLI. Node.js and agent-specific setup may be required. Installation can download code. Catalog ingestion never executes skill instructions or install scripts.

npx skills add https://github.com/vercel-labs/agent-skills/tree/1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62/skills/react-best-practices --skill vercel-react-best-practices

Review pinned skill folder ↗ · CLI documentation ↗

After source review, use npx skills check and npx skills update to inspect and apply upstream updates. Re-check changed instructions before running them.

Safety & review signals

Static review only. This is not a security audit or a guarantee of safety.

SKILL.md text only; scripts, dependencies and runtime behavior not audited.

No configured text patterns matched. Unmatched or concealed behavior can still exist.

Allowed tools declaration: Unknown. Runtime permissions and network behavior: Unknown.

AI Craft Pad Skill Score

78/100 · Metadata coverage 80% · Model 1.0

Scores summarize observable discovery signals. Popularity and repository activity apply to the whole repository. Unknown runtime safety earns no certification.

Documentation
100/100
100
Maintenance
100/100
100
License Clarity
100/100
100
Repository Health
85/100
85
Compatibility Evidence
0/100
0
Popularity
81/100
81
Originality
80/100
80
Static Safety
60/100
60
Read the formula and limits →

Suggested workflow

Capture the important user journey and its baseline, review expensive data and bundle boundaries first, make one focused improvement, then measure the same journey again. Combine it with a browser-testing skill for interaction regressions and with a design review for layout and accessibility.

How to judge the result

Compare the same input, device class and relevant timing or bundle metric before and after. Confirm that the interface still handles loading, errors and keyboard interaction correctly.

Similar skills to compare

Related by category; compare scope and dependencies before choosing an alternative.

Development88/100

brainstorming

obra/superpowers

Explore brainstorming as a development workflow from obra/superpowers. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT

Repository star change: +1264 over 41.38 hours. 2026-10-31

309,983 repo stars0 text flagsReview ↗
Development88/100

receiving code review

obra/superpowers

Explore receiving code review as a development workflow from obra/superpowers. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT

Repository star change: +1264 over 41.38 hours. 2026-10-31

309,983 repo stars0 text flagsReview ↗
Development88/100

requesting code review

obra/superpowers

Explore requesting code review as a development workflow from obra/superpowers. Compare its source, maintenance and review signals before choosing it for your agent.

Community sourceMIT

Repository star change: +1264 over 41.38 hours. 2026-10-31

309,983 repo stars1 text flagReview ↗

More from this source

Development78/100

vercel composition patterns

vercel-labs/agent-skills

A React component-API reference for reducing boolean-prop complexity through composition, shared state and clearer responsibilities.

First-party sourceMITEditorial review

Repository star change: +82 over 41.38 hours. 2026-10-31

33,304 repo stars0 text flagsReview ↗
Development78/100

vercel react native skills

vercel-labs/agent-skills

A React Native and Expo performance reference covering lists, animation, rendering, native dependencies and project structure.

First-party sourceMITEditorial review

Repository star change: +82 over 41.38 hours. 2026-10-31

33,304 repo stars0 text flagsReview ↗
Development78/100

vercel react view transitions

vercel-labs/agent-skills

Explore vercel react view transitions as a development workflow from vercel-labs/agent-skills. Compare its source, maintenance and review signals before choosing it for your agent.

First-party sourceMIT

Repository star change: +82 over 41.38 hours. 2026-10-31

33,304 repo stars0 text flagsReview ↗

Works well in these suggested workflows

Editorial combinations of complementary roles; review each source independently.