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.

1.22x

Quality

77%

Does it follow best practices?

Impact

92%

1.22x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/vercel-react-best-practices/SKILL.md

Quality

Content

72%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill excels as a well-organized reference index with excellent progressive disclosure and token efficiency. However, it functions more as a table of contents than actionable guidance—the main document lacks concrete code examples, relying entirely on external files for implementation details. Adding 1-2 inline examples for the most critical rules would significantly improve actionability.

Suggestions

Add 1-2 inline code examples for the highest-priority rules (e.g., async-parallel with Promise.all, bundle-barrel-imports showing correct vs incorrect imports) to make the skill immediately actionable

Include a brief workflow checklist for code review scenarios, such as: '1. Check for waterfalls (async-*), 2. Audit imports (bundle-*), 3. Review data flow (server-*)' with validation steps

Consider adding a 'Common Mistakes' section with quick before/after snippets for the most impactful rules

Dimension	Reasoning	Score
Conciseness	The content is lean and efficient, presenting 58 rules as a well-organized reference table without explaining basic React/Next.js concepts Claude already knows. Every section serves a clear purpose.	3 / 3
Actionability	While the rule names and categories are clear, the skill lacks executable code examples in the main document. It references external rule files for actual implementation details, making it more of an index than actionable guidance.	2 / 3
Workflow Clarity	The 'When to Apply' section provides context for usage, but there's no clear workflow for how to systematically apply these rules during code review or refactoring. Missing validation steps or a prioritized checklist for implementation.	2 / 3
Progressive Disclosure	Excellent structure with a clear overview, priority-ordered categories, and well-signaled one-level-deep references to individual rule files and the full AGENTS.md document. Navigation is intuitive.	3 / 3
	Total	10 / 12 Passed

Description

82%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid description that clearly communicates when to use the skill and covers relevant trigger terms. Its main weakness is the lack of specific concrete actions - it describes the domain well but doesn't enumerate what specific optimizations or techniques it covers, which could help both with selection accuracy and distinguishing it from general React/Next.js skills.

Suggestions

Add specific concrete actions like 'implement code splitting, lazy load components, optimize images, reduce bundle size, configure caching strategies'

Strengthen distinctiveness by emphasizing performance-specific triggers like 'slow page loads', 'large bundle size', 'Core Web Vitals', 'lighthouse scores'

Dimension	Reasoning	Score
Specificity	Names the domain (React/Next.js performance) and mentions some areas (components, pages, data fetching, bundle optimization) but doesn't list concrete actions like 'lazy load components', 'implement code splitting', or 'optimize images'.	2 / 3
Completeness	Clearly answers both what ('React and Next.js performance optimization guidelines') and when ('when writing, reviewing, or refactoring React/Next.js code' plus explicit 'Triggers on' clause listing specific scenarios).	3 / 3
Trigger Term Quality	Good coverage of natural terms users would say: 'React components', 'Next.js pages', 'data fetching', 'bundle optimization', 'performance improvements'. These are terms developers naturally use when discussing these topics.	3 / 3
Distinctiveness Conflict Risk	While it specifies React/Next.js performance, it could overlap with general React skills or Next.js development skills. The performance focus helps but 'React components' and 'Next.js pages' are broad triggers that might conflict with non-performance React/Next.js skills.	2 / 3
	Total	10 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: Kiz8-Team/open-agents
Path: .agents/skills/vercel-react-best-practices/SKILL.md
Commit: 411da81

Reviewed: ~18 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.