react-next-best-practices

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

Quality

64%

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

57%

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

The body is a lean, well-organized review checklist, but it stays at the level of principles: it names what to watch for without executable rules or code, and includes an unnecessary migration-note section. Workflow and actionability are the main limiters.

Suggestions

Add concrete, actionable rules or short examples for the highest-value focus areas (e.g. a 'use client' placement rule, a bundle-size threshold, an anti-waterfall data-fetching pattern) rather than only naming concerns.

Remove or relocate the 'PilotDeck Migration Note' section; provenance details do not help Claude execute the skill and add tokens.

Add a short verification step to the review workflow (e.g. 'Confirm each finding cites the offending file/line and a concrete fix before returning') to introduce a checkpoint.

Dimension	Reasoning	Score
Conciseness	The focus-area bullets are terse and assume Claude's competence (no explaining what RSC or hydration is), but the 'PilotDeck Migration Note' section is non-essential context that does not earn its place. Mostly efficient with some removable padding, so not a 3.	2 / 3
Actionability	It names concrete concerns (memoization misuse, data-fetching waterfalls, browser-only values during server render) but gives no executable rules, thresholds, or code examples — mostly principles. It is more concrete than pure abstraction but lacks the specific, copy-paste-ready guidance needed for a 3.	2 / 3
Workflow Clarity	The review skill has a clear single output action ('Return concrete findings with file paths, severity, and suggested fixes') but provides no validation checkpoints, verification step, or explicit sequencing of the review process. The action is unambiguous, yet the missing feedback loop caps this at 2.	2 / 3
Progressive Disclosure	The skill is under 50 lines, needs no external references, and is organized into clear sections (Focus Areas, Review Output). Per the simple-skills guideline, well-organized short skills with no needed bundle files can score 3 on structure alone.	3 / 3
	Total	9 / 12 Passed

Description

72%

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 specific and distinct, naming a clear React/Next.js niche with natural trigger terms, but it omits an explicit 'Use when' trigger clause and frames capabilities as topic areas rather than concrete actions. Completeness is the main limiter.

Suggestions

Add an explicit 'Use when...' clause (e.g. 'Use when creating, reviewing, or refactoring React/Next.js apps') to the description so the 'when' is stated, not just implied.

Reframe the topic list with concrete actions/verbs (e.g. 'split components, fix data-fetching waterfalls, reduce bundle size') instead of naming areas alone.

Consider adding common natural variations users say (e.g. 'SSR', 'SSG', 'use client', 'App Router') alongside 'RSC' to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the React/Next.js domain plus specific sub-topics (组件拆分, 数据获取, 性能, bundle, RSC, hydration, 路由), but these are topic nouns rather than concrete actions and '最佳实践' is itself a vague verb. It is more specific than a bare domain mention but lacks the concrete verbs (e.g. extract/fill/merge) needed for a 3.	2 / 3
Completeness	The description clearly states what the skill covers but includes no 'Use when...' clause or equivalent explicit trigger guidance. Per the judging guidelines, a missing 'Use when' clause caps completeness at 2 even though the 'what' is well covered.	2 / 3
Trigger Term Quality	Includes natural terms a user would actually say — 'React/Next.js', '性能', 'bundle', 'hydration', '路由' — giving good coverage of natural trigger language. 'RSC' is somewhat jargon, but the dominant terms are exactly what users say when they need this skill.	3 / 3
Distinctiveness Conflict Risk	React/Next.js combined with Next.js-specific topics (RSC, hydration, bundle, routing) defines a clear niche unlikely to trigger for unrelated skills. It is distinct from generic code-review or pure React skills thanks to these framework-specific concerns.	3 / 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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

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

Reviewed: about 13 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.