react-next-best-practices

React/Next.js 项目最佳实践：组件拆分、数据获取、性能、bundle、RSC、hydration 和路由。

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

71%Weight 40%Scale 1-5

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

A clean, well-structured instruction-only skill that respects the token budget and is easy to navigate, but its guidance is principled and high-level rather than concrete and executable, which limits actionability.

Suggestions

Add concrete techniques for each principle (e.g., for 'avoid waterfalls' name Promise.all / parallel fetch / React 19 use(); for bundle size name specific analyzers or dynamic-import patterns) to raise actionability.

Provide a short review sequence (e.g., 1. rendering model → 2. data fetching → 3. hydration → 4. performance, then report) with a verification checkpoint to make the workflow explicit.

Remove or relocate the 'PilotDeck Migration Note' provenance block out of SKILL.md so every remaining token earns its place.

Dimension	Reasoning	Score
Conciseness	The body is lean, uses tight imperatives, and assumes Claude's React/Next.js competence, but the 'PilotDeck Migration Note' provenance block is a minor instance of non-essential content that could be trimmed, fitting anchor 4 rather than a clean 5.	4 / 5
Actionability	It names specific concerns to check (memoization misuse, browser-only values during SSR, bundle size) and gives a concrete output format, but guidance is mostly high-level hints ('avoid waterfalls', 'watch bundle size') without concrete techniques or commands, matching anchor 3.	3 / 5
Workflow Clarity	As a single-purpose review skill the action is unambiguous (review focus areas, return findings) and content is well-organized, but there is no explicit review sequence or checkpoints, so it sits at anchor 4 rather than 5.	4 / 5
Progressive Disclosure	The skill is under 50 lines, needs no external references (no references/scripts/assets bundle exists), and is organized into clearly headed sections, meeting the simple-skills exception for a top progressive-disclosure score.	5 / 5
	Total	16 / 20 Passed

Description

61%Weight 40%Scale 1-5

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

The description is concise and lists specific, relevant React/Next.js focus areas with good natural trigger terms, but it omits any explicit "Use when…" guidance, which caps completeness and limits its triggerability.

Suggestions

Add an explicit 'Use when…' clause naming concrete trigger situations (e.g., 'Use when creating, reviewing, or refactoring React/Next.js apps, or when the user mentions SSR, hydration errors, or bundle size').

Reframe the topic list with action verbs (e.g., 'Split components, fetch data without waterfalls, optimize bundle size') to lift specificity from topic-areas to concrete actions.

Include common synonyms alongside RSC (e.g., 'Server Components / RSC', 'SSR') to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain plus several concrete sub-areas ("组件拆分、数据获取…RSC、hydration 和路由"), which is more concrete than the anchor-2 example, but uses topic nouns with no action verbs, so it does not reach anchor 4's "several specific actions".	3 / 5
Completeness	Has a clear "what" (best practices across seven named areas) but no "Use when…" trigger clause, so per the judging guideline completeness is capped at 3; the "what" is specific rather than vague, ruling out 2.	3 / 5
Trigger Term Quality	Includes natural developer terms (React, Next.js, RSC, hydration, bundle, 性能, 路由) users would actually say, but misses some synonyms (SSR, "Server Components" spelled out) so it stops short of comprehensive anchor 5.	4 / 5
Distinctiveness Conflict Risk	Targets a clear React/Next.js niche with distinct triggers (RSC, hydration, bundle), but the broad "best practices" framing carries minor overlap risk with a generic React or code-review skill, fitting anchor 4 over 5.	4 / 5
	Total	14 / 20 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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: OpenBMB/PilotDeck
Path: skills/react-next-best-practices/SKILL.md
Commit: 9a33f4d

Reviewed: 2 days 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.