Skills vercel-react-best-practices
📦

vercel-react-best-practices

v1.0.0 Content revision r1 Medium Risk ⚡ Contains scripts⚙️ External commands🌐 Network access

Optimize React and Next.js Performance

React and Next.js teams need consistent performance guidance during coding and review. This skill applies Vercel-style rules for data fetching, bundles, rendering, and re-renders.

Supports: Claude Codex Code(CC)
📊 72 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "vercel-react-best-practices" from https://skillstore.io/skills/zhanlincui-vercel-react-best-practices.md and its manifest at https://skillstore.io/api/skills/zhanlincui-vercel-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/zhanlincui-vercel-react-best-practices.md Signed manifest GET /api/skills/zhanlincui-vercel-react-best-practices/manifest Signed lockfile GET /api/skills/zhanlincui-vercel-react-best-practices/lockfile

Test it

Using "vercel-react-best-practices". Review a dashboard page with sequential data fetching and broad icon imports.

Expected outcome:

  • The review identifies independent requests that can start together.
  • It recommends direct icon imports or configured package import optimization.
  • It suggests Suspense boundaries for panels that do not affect the first layout.

Using "vercel-react-best-practices". Explain why a search component renders too often.

Expected outcome:

The analysis traces broad state subscriptions, unstable callbacks, and effect dependencies, then recommends narrower reads and functional state updates.

Using "vercel-react-best-practices". Create a performance checklist for a Next.js feature launch.

Expected outcome:

  • Server work starts as early as possible and avoids sequential awaits.
  • Client components receive only the fields they render.
  • Heavy editors, analytics, and optional tools load outside the initial path.

Security Audit

Medium Risk
v4 • 7/8/2026 Open versioned report

All 172 static findings were adjudicated as false positives from Markdown documentation, code examples, inline backticks, or public reference links. No prompt injection, credential handling, command execution, or unauthorized network intent was found. One medium content-trust issue remains because a community source uses official Vercel attribution that should be clarified before publication.

53
Files scanned
5,215
Lines analyzed
0
Review items
0
False positives ignored

Confirmed security concerns (1)

Medium
SKILL.md:3-12AGENTS.md:3-10metadata.json:3
Unverified Official Affiliation Claim
The community-sourced skill presents itself with official Vercel attribution, including Vercel Engineering, author vercel, and maintained by Vercel language. This can mislead users about provenance and review authority.
The report source type is community, but multiple files state or imply official Vercel ownership. This is a provenance and marketplace trust issue rather than executable malware.

Risk Factors

⚡ Contains scripts (12)
AGENTS.md:428 AGENTS.md:470 AGENTS.md:508 AGENTS.md:529 AGENTS.md:551 AGENTS.md:2309 rules/bundle-conditional.md:20 rules/bundle-defer-third-party.md:35 rules/bundle-dynamic-imports.md:28 rules/bundle-preload.md:18 rules/bundle-preload.md:40 rules/js-tosorted-immutable.md:57
⚙️ External commands (79)
AGENTS.md:1056-1064 AGENTS.md:1064-1082 AGENTS.md:1636-1642 AGENTS.md:1758-1760 AGENTS.md:2125-2129 AGENTS.md:2138-2144 README.md:88-89 README.md:89 README.md:96-97 README.md:97-98 README.md:98-99 README.md:99-100 README.md:100-101 README.md:101-105 README.md:105-106 README.md:106-107 README.md:107-108 README.md:108-115 README.md:115-118 rules/client-localstorage-schema.md:27-35 rules/client-localstorage-schema.md:35-53 rules/js-hoist-regexp.md:16-20 rules/js-hoist-regexp.md:29-35 rules/rendering-hydration-no-flicker.md:72-78 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:44 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:51 SKILL.md:52 SKILL.md:56 SKILL.md:57 SKILL.md:58 SKILL.md:59 SKILL.md:60 SKILL.md:64 SKILL.md:65 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:73 SKILL.md:74 SKILL.md:75 SKILL.md:79 SKILL.md:80 SKILL.md:81 SKILL.md:82 SKILL.md:83 SKILL.md:84 SKILL.md:85 SKILL.md:89 SKILL.md:90 SKILL.md:91 SKILL.md:92 SKILL.md:93 SKILL.md:94 SKILL.md:95 SKILL.md:96 SKILL.md:97 SKILL.md:98 SKILL.md:99 SKILL.md:100 SKILL.md:104 SKILL.md:105 SKILL.md:111-115 SKILL.md:115-125
🌐 Network access (15)
AGENTS.md:995 AGENTS.md:612 AGENTS.md:867 metadata.json:7 metadata.json:8 metadata.json:9 metadata.json:10 metadata.json:11 metadata.json:12 metadata.json:13 README.md:84 README.md:123 rules/_sections.md:26 rules/client-swr-dedup.md:18 rules/server-serialization.md:10
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/zhanlincui-vercel-react-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/zhanlincui-vercel-react-best-practices/security.svg)](https://skillstore.io/skills/zhanlincui-vercel-react-best-practices?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/zhanlincui-vercel-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/zhanlincui-vercel-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/zhanlincui-vercel-react-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

ZhanlinCui. (2026). vercel-react-best-practices security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/zhanlincui-vercel-react-best-practices/audits/4

BibTeX citation

@techreport{zhanlincui-zhanlincui-vercel-react-best-practices-2026, author = {ZhanlinCui}, title = {vercel-react-best-practices security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/zhanlincui-vercel-react-best-practices/audits/4}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vercel-react-best-practices security audit report (audit version 4)" version: "1.0.0" type: report authors: - name: "ZhanlinCui" date-released: "2026-07-08" url: "https://skillstore.io/skills/zhanlincui-vercel-react-best-practices/audits/4" identifiers: - type: other value: "skillstore:zhanlincui-vercel-react-best-practices:audit:4" description: "Skillstore immutable audit report identifier"

Compare variants

4 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
vercel-labs Recommended

vercel-labs-vercel-react-best-practices

Skillstore Score 80
Evidence Confidence High
Skillstore usage 33
Updated

2026-09-09

am-will

am-will-vercel-react-best-practices

Skillstore Score 79
Evidence Confidence High
Skillstore usage 27
Updated

2026-09-09

sickn33

sickn33-vercel-react-best-practices

Skillstore Score 78
Evidence Confidence High
Skillstore usage 10
Updated

2026-09-09

ZhanlinCui Current

zhanlincui-vercel-react-best-practices

Skillstore Score 72
Evidence Confidence High
Skillstore usage 104
Updated

2026-09-09

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
100
Maintainability
87
Content
71
Community
83
Spec Compliance

What You Can Build

Review a Pull Request

Find data waterfalls, large imports, broad client props, and avoidable re-renders before code merges.

Refactor a Next.js Page

Convert sequential server work into parallel fetching, Suspense boundaries, and smaller client payloads.

Create Team Performance Standards

Turn Vercel-style rules into repeatable guidance for reviews, migrations, and feature planning.

Try These Prompts

Find Quick Wins 
Review this React or Next.js code with the vercel-react-best-practices skill. Focus on async waterfalls, bundle size, and needless re-renders. Explain each recommendation in plain language.
Refactor a Page 
Refactor this Next.js page using the skill. Preserve behavior while improving data fetching parallelism, Suspense boundaries, and RSC serialization. List the trade-offs you make.
Plan Bundle Improvements 
Audit this feature for bundle size using the skill. Identify barrel imports, heavy client components, third-party libraries, and preload opportunities. Prioritize fixes by user impact.
Run Architecture Review 
Analyze this workflow end to end with the skill. Cover server data flow, client fetching, storage use, event listeners, rendering costs, and JavaScript hot paths. Return a prioritized remediation plan.

Best Practices

  • Start independent data work early and await results only when they are needed.
  • Keep client boundaries small and pass only fields that client components use.
  • Treat examples as patterns and measure important changes in the target application.

Avoid

  • Awaiting unrelated server work in sequence inside pages, actions, or route handlers.
  • Importing entire icon or component libraries through broad barrel entry points.
  • Memoizing everything without first narrowing state reads and effect dependencies.

Frequently Asked Questions

What does this skill help with?
It helps agents review and improve React and Next.js performance using structured Vercel-style guidance.
Does it require deployment on Vercel?
No. Many rules apply to any React or Next.js application, although some examples reference Vercel and Next.js APIs.
Can it replace profiling tools?
No. It gives review guidance and refactor patterns. You should still measure important changes with real application data.
Which topics are covered?
It covers async waterfalls, bundle size, server rendering, client fetching, re-renders, rendering costs, and JavaScript loops.
Are the examples executable by the skill?
No. The repository is documentation. Agents read the examples and apply the ideas to your project.
Can teams use it for code review standards?
Yes. The rule files can support consistent review comments, migration plans, and performance checklists.

Developer Details

Author

ZhanlinCui

License

MIT

Author version

v1.0.0

Skillstore revision

r1

Repository

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-react-best-practices

Ref

88a205c7f635a966e31156313b590d59007c5caa

Maintenance freshness

7/18/2026

Usage

100 downloads · 287 views

File structure

📁 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-localstorage-schema.md

📄 client-passive-event-listeners.md

📄 client-swr-dedup.md

📄 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

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md

More from ZhanlinCui

View all

Related Skills

View all