CtrlK
BlogDocsLog inGet started
Tessl Logo

react-next-best-practices

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

54

Quality

60%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

67%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.

The body is an efficient, well-structured overview with a clear trigger line and a concrete output contract, but its guidance is entirely heuristic: no code patterns, commands, or worked examples that would make the best practices directly executable. The PilotDeck migration note is meta-content that should be removed.

Suggestions

Delete the 'PilotDeck Migration Note' section — it is provenance metadata irrelevant to executing the skill and pure token overhead.

Add one compact code example per critical area (e.g. a guarded browser-only value using a mounted/hydration check, and a parallel data fetch replacing a waterfall) to move guidance from heuristic to executable.

Tie each focus-area bullet to a checkable signal (e.g. 'bundle: flag client components importing large dependencies; check `next build` output size') so review findings are concretely derivable.

DimensionReasoningScore

Conciseness

The body is a lean ~25 lines with terse directives like "avoid waterfalls; keep server/client responsibilities explicit" and no re-teaching of React basics. Not 5 because the 'PilotDeck Migration Note' section is off-task meta-content whose tokens buy nothing for skill execution.

4 / 5

Actionability

Some concrete heuristics are present ("avoid browser-only values during server render unless guarded", "use semantic HTML before custom ARIA", output must include "file paths, severity, and suggested fixes"), but for a code-adjacent skill there are no code examples, lint commands, or thresholds — guidance stays at the heuristic level. Not 4 because anchor 4 expects concrete, executable guidance with only minor gaps; not 2 because the bullets are more than high-level hints.

3 / 5

Workflow Clarity

As a single-task skill the action is unambiguous — apply the focus areas and return findings per the 'Review Output' spec — and the skill involves no destructive or batch operations requiring validation checkpoints. Not 5 because there is no sequencing for how to conduct a review or prioritize among focus areas.

4 / 5

Progressive Disclosure

No bundle files exist and the body is well-organized into short, clearly headed sections; per the simple-skill note a sub-50-line skill can score 5 here. Not 5 because the eight broad focus areas each carry only one line, and the skill gives no navigation to deeper material despite covering wide territory (rendering models, caching, testing).

4 / 5

Total

15

/

20

Passed

Description

53%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 names a specific niche and a rich set of sub-topics, but it reads as a topic index rather than a capability statement: there is no explicit action and no 'Use when...' trigger guidance. Adding an explicit trigger clause and action verbs would lift both completeness and specificity.

Suggestions

Add an explicit 'Use when...' clause, e.g. '创建、审查或重构 React/Next.js 应用时使用' (use when creating, reviewing, or refactoring React/Next.js apps), to resolve the completeness cap.

Convert topic nouns into concrete actions, e.g. '拆分组件、消除数据请求瀑布、定位 hydration 与 bundle 问题' (split components, eliminate data waterfalls, diagnose hydration and bundle issues) instead of the generic '最佳实践'.

Add natural trigger-term variations users actually say — 'SSR', 'App Router', 'code review', 'refactor', '.tsx' — to improve trigger coverage.

DimensionReasoningScore

Specificity

The description enumerates domain topics ("组件拆分、数据获取、性能、bundle、RSC、hydration 和路由") but the only action stated is the generic "最佳实践" (best practices); no concrete verbs like review, refactor, or audit appear. Not 4 because anchor 4 requires several specific actions, not a topic list; not 2 because the domain and sub-areas are specifically named.

3 / 5

Completeness

The 'what' is moderately clear (best practices across the listed areas) but the description contains no 'when to use' clause at all; per guidelines a missing trigger clause caps completeness at 3. Not 4 because there is zero explicit 'when' guidance, not even a weak one.

3 / 5

Trigger Term Quality

"React/Next.js", "hydration", "bundle", and "RSC" are terms users naturally say, giving some relevant keywords. Not 4 because common variations and synonyms are missing (SSR, App Router, Pages Router, refactoring, code review).

3 / 5

Distinctiveness Conflict Risk

"React/Next.js" plus rendering-model terms (RSC, hydration) carve a clear niche with distinct triggers. Not 5 because it could still overlap with generic code-review or React-adjacent skills given the action-free phrasing.

4 / 5

Total

13

/

20

Passed

Validation

100%

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
Reviewed

Table of Contents

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.