All skills
am-will avatar

/vercel-react-best-practices

@198e289
by am.willam-will/codex-skills1k stars
60

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.

Use this Skill: https://skilld.dev/gh/am-will/codex-skills/vercel-react-best-practices

This session only. Nothing lands on disk.

rulesjs-min-max-loop.md

≈527 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Use Loop for Min/Max Instead of Sort

Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.

Incorrect (O(n log n) - sort to find latest):

interface Project {
  id: string
  name: string
  updatedAt: number
}

function getLatestProject(projects: Project[]) {
  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
  return sorted[0]
}

Sorts the entire array just to find the maximum value.

Incorrect (O(n log n) - sort for oldest and newest):

function getOldestAndNewest(projects: Project[]) {
  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
}

Still sorts unnecessarily when only min/max are needed.

Correct (O(n) - single loop):

function getLatestProject(projects: Project[]) {
  if (projects.length === 0) return null
  
  let latest = projects[0]
  
  for (let i = 1; i < projects.length; i++) {
    if (projects[i].updatedAt > latest.updatedAt) {
      latest = projects[i]
    }
  }
  
  return latest
}

function getOldestAndNewest(projects: Project[]) {
  if (projects.length === 0) return { oldest: null, newest: null }
  
  let oldest = projects[0]
  let newest = projects[0]
  
  for (let i = 1; i < projects.length; i++) {
    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
  }
  
  return { oldest, newest }
}

Single pass through the array, no copying, no sorting.

Alternative (Math.min/Math.max for small arrays):

const numbers = [5, 2, 8, 1, 9]
const min = Math.min(...numbers)
const max = Math.max(...numbers)

This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.

Source: SKILL.md on GitHub

1 warning17d5 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    The skill provides comprehensive React and Next.js performance optimization guidelines. No malicious behavior was detected. It presents a low-severity risk for indirect prompt injection because it is designed to analyze and modify user-provided source code.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer7mo

    7/51 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 198e289. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 months ago.

Steadyupdated 9 months ago

README badge

README badge for am-will/codex-skills/vercel-react-best-practices

Provides 45 performance optimization rules for React and Next.js organized by priority, from eliminating waterfalls and bundle size to re-render and JavaScript optimization. Use this skill when writing, reviewing, or refactoring React/Next.js code to apply Vercel's engineering guidelines for faster load times and reduced bundle size.

Generated from the current SKILL.md.

Does this skill apply to both React and Next.js?
Yes. The skill covers React components and Next.js pages, including server-side and client-side data fetching patterns specific to Next.js.
What should I do if a rule conflicts with my project requirements?
The SKILL.md does not address exceptions or trade-offs. Rules are prioritized by impact (critical rules like eliminating waterfalls rank highest), so you should apply them in that order but evaluate each against your specific constraints.
Does this skill cover CSS or styling performance?
Minimally. It includes a few CSS-related rules (batch DOM changes, content-visibility) but focuses primarily on JavaScript, bundle size, and data fetching optimization.
Are code examples included in the skill?
Yes. Each rule has an incorrect code example with explanation and a correct code example. The full compiled guide is in AGENTS.md.

Generated from the current SKILL.md. These answers refresh after source changes.