vercel-react-best-practices

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.

Install
npx skills add 'https://github.com/calcom/cal.diy/tree/main/.opencode/skill/vercel-react-best-practices'
Download bundle ↓
main · 6bc4529Scanned 2026-09-17

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗

rules/js-cache-property-access.md

rules/js-cache-property-access.mdBrowse 47 files
View on GitHub
← Back to SKILL.md

title: Cache Property Access in Loops impact: LOW-MEDIUM impactDescription: reduces lookups tags: javascript, loops, optimization, caching

Cache Property Access in Loops

Cache object property lookups in hot paths.

Incorrect (3 lookups × N iterations):

for (let i = 0; i < arr.length; i++) {
  process(obj.config.settings.value)
}

Correct (1 lookup total):

const value = obj.config.settings.value
const len = arr.length
for (let i = 0; i < len; i++) {
  process(value)
}