skilld
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.

Ask your Agent

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

This session only. Nothing lands on disk.

rulesrendering-svg-precision.md

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

Optimize SVG Precision

Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.

Incorrect (excessive precision):

<path d="M 10.293847 20.847362 L 30.938472 40.192837" />

Correct (1 decimal place):

<path d="M 10.3 20.8 L 30.9 40.2" />

Automate with SVGO:

npx svgo --precision=1 --multipass icon.svg

Source: SKILL.md on GitHub

Third-party checks

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

Provenance

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

Topics

README badge

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

What it does

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.

Frequently asked

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.