Web Quality Skills
addyosmani/web-quality-skillsSix skills by Addy Osmani for auditing and fixing web performance, Core Web Vitals, accessibility, SEO and best practices, built around Lighthouse.
Recommended
Check first Depth 3/5
vercel-react-best-practices skill
Vercel Engineering's 70 React and Next.js performance rules in 8 priority bands, each with an incorrect and a correct code example, for writing and reviewing code.
Our verdict Recommended
A well-organized, MIT-licensed rulebook from Vercel Engineering with concrete before/after examples; no scripts, nothing to configure.
What the vercel-react-best-practices skill does
This skill gives the agent a ranked rulebook for React and Next.js performance. SKILL.md is a short index: a table of eight categories with their impact level, then a one-line summary of every rule. The categories run from critical items first (eliminating request waterfalls, bundle size) through server-side performance, client data fetching, re-render optimization, rendering performance and JavaScript micro-optimizations, down to advanced patterns.
The detail sits in a rules folder with one file per rule, 70 in all. A typical file such as async-parallel has front matter naming the impact (CRITICAL, with an estimated 2 to 10 times improvement), then a short explanation, an incorrect example and a correct one. Rule names show the scope: bundle-barrel-imports, server-auth-actions, server-cache-react, rerender-derived-state, rendering-hydration-no-flicker, js-set-map-lookups. A compiled AGENTS.md of over 100 KB concatenates everything for tools that load one file. The agent reads the index first and opens individual rule files when a task touches that area, so you get targeted advice rather than a generic lint pass. There are no scripts or tests; it is a reference you apply while writing, reviewing or refactoring React code.
Good for
- Writing or reviewing Next.js App Router and React code with performance in mind
- Refactoring slow pages: waterfalls, large bundles, unnecessary re-renders
- Teams that want Vercel's own priorities encoded in the agent
Not for
- Non-React projects
- Anyone wanting automated profiling or measurement, since it only gives written rules
Depth 3/5
A 7 KB index plus 70 individual rule files with incorrect/correct examples and a 100 KB compiled AGENTS.md, but no scripts or evals.
Dependencies and costs
- Telemetry: none found.
Security review
No issues foundWe scanned all 76 files in this skill folder and read every script. Nothing in it reaches beyond what the skill describes.
A documentation-only skill: 70 React and Next.js performance rules as Markdown. It has no scripts, no allowed-tools frontmatter and no instructions to fetch or run remote content.
What we checked
The skill folder (76 files) on Oct 29, 2026. We had every file and read every script.
NVIDIA SkillSpector static scan: 4 pattern hits (Output Handling 2, MCP Rug Pull 2). Network and cookie hits are code samples inside React/Next.js rule documents (fetch for fonts, document.cookie caching, dangerouslySetInnerHTML, Vercel Analytics import); 'npx svgo' appears only in an example. None are instructions to the agent.
A review, not a certification. Skills change after we check them — read the files before installing.
License
MIT — stated in the skill's frontmatter; commercial use allowed.
Can it run unattended?
Not really. It is a reference the agent consults while working, with no loop, state or verification of its own.
Alternatives
Callstack Agent Skills
callstackincubator/agent-skillsReact Native skills from Callstack: performance, navigation, TV apps, upgrades, brownfield migration, GitHub Actions builds and device-driven testing.
Recommended
Check first Depth 4/5
Matteo Collina's Skills
mcollina/skillsEleven skills from a Node.js core maintainer: Fastify, Node internals, TypeScript types, OAuth, docs structure, AGENTS.md and gh workflows.
Recommended
Check first Depth 3/5
Agent Skills (Addy Osmani)
addyosmani/agent-skills25 engineering-lifecycle skills and 9 slash commands (spec, plan, build, test, review, ship) that make coding agents follow senior-engineer workflows.
Recommended
Check first Depth 3/5
FAQ
What is vercel-react-best-practices?
It is a Vercel Engineering skill with 70 React and Next.js performance rules ranked by impact, from eliminating async waterfalls and shrinking bundles to re-render and rendering fixes. Each rule shows a wrong and a right example.
How do I install vercel-react-best-practices?
Run npx skills add vercel-labs/agent-skills and pick vercel-react-best-practices. It then triggers when you write, review or refactor React or Next.js code.
Is vercel-react-best-practices safe?
The folder contains Markdown rules and a metadata file only, with no scripts. The only scanner hits on this skill are code examples that mention dangerouslySetInnerHTML in the rule text.
vercel-react-best-practices vs vercel-composition-patterns?
Best-practices is about performance: waterfalls, bundles, re-renders. Composition-patterns is about component architecture, such as replacing boolean props with compound components. They complement each other and ship in the same repo.
Sources: GitHub repository; install counts from skills.sh via Best Skills (CC BY 4.0). Review based on the published SKILL.md.