frontend-patterns

React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。

Quality

62%

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 ./docs/zh-CN/skills/frontend-patterns/SKILL.md

Quality

Content

63%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 delivers flawlessly executable, well-organized code examples — its actionability is excellent. Its weaknesses are token economics: nearly all patterns are standard knowledge Claude already has, and the whole catalog lives inline in SKILL.md instead of being split into referenced files with a lean index.

Suggestions

Split the pattern catalog into one-level-deep reference files (e.g. references/components.md, references/hooks.md, references/performance.md, references/a11y.md) and keep SKILL.md as a lean index with the 何时激活 triggers and one-line pattern summaries.

Trim or drop implementations Claude already knows verbatim (useToggle, useDebounce, Error Boundary, React.memo basics) and keep only the patterns that encode non-obvious guidance — e.g. the ref-stabilized useQuery that avoids the infinite fetch loop, and the sort-mutates copy note.

Add brief selection guidance for overlapping alternatives (when to prefer compound components vs render props; DataLoader vs useQuery vs SWR/React Query) so the reference tells Claude which pattern to reach for, not just what each looks like.

Dimension	Reasoning	Score
Conciseness	The body is ~650 lines of textbook React (useToggle, useDebounce, Error Boundary, React.memo, lazy/Suspense, compound Tabs) that Claude already produces from memory — the rationale states skills should add only what Claude does not already know. It is not score 1 because there is no prose padding and the code is dense, but entire sections of standard-library-level patterns are unnecessary tokens.	2 / 5
Actionability	Every pattern is a complete, copy-paste-ready TypeScript implementation with a Usage block, spanning composition, compound components, render props, data hooks (including a genuine infinite-loop fix note on ref-stabilized fetchers), forms, virtualization, and a11y. External references (Market, Spinner, createMarket) are ordinary contextual placeholders, not gaps.	5 / 5
Workflow Clarity	As a single-purpose pattern reference it is unambiguous: the 何时激活 section defines when to consult it and sections are logically grouped, with no destructive operations requiring validation. It falls below 5 because overlapping alternatives (DataLoader vs useQuery vs SWR/React Query; two Modal implementations) are presented without selection guidance.	4 / 5
Progressive Disclosure	Section headers are clear and navigation within the file is easy, but a ~650-line pattern catalog inlined entirely in SKILL.md — with no references/, scripts/, or assets/ bundle at all — is exactly the content that belongs in one-level-deep reference files. Not 2 because the structure is genuinely well-organized rather than minimal.	3 / 5
	Total	14 / 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 communicates a clear, reasonably distinct technical niche, but reads as a topic list rather than a capability statement and lacks any explicit "when to use" trigger clause. Adding a 使用时机 (use-when) clause with natural trigger phrases would resolve its main weaknesses.

Suggestions

Add an explicit trigger clause, e.g. "适用于构建 React/Next.js 组件、管理前端状态或优化渲染性能时使用" (use when building React/Next.js components, managing frontend state, or optimizing rendering performance).

Convert the topic list into concrete actions, e.g. "提供 React 组件组合、自定义 Hooks、状态管理、性能优化（记忆化、虚拟化、代码分割）与表单验证的开发模式" — state what the skill provides/does, not just the domains it covers.

Include natural trigger synonyms users would say — 组件, hooks, 受控表单, 懒加载/虚拟化 — so the skill surfaces for those phrasings too.

Dimension	Reasoning	Score
Specificity	The description enumerates five specific scope areas (React、Next.js、状态管理、性能优化、UI最佳实践) but is a pure noun phrase with no concrete actions. It is more informative than a bare domain statement (score 2) yet lists no executable capabilities (score 4 requires several specific actions).	3 / 5
Completeness	The "what" is clear (frontend development patterns for the listed areas) but there is no "Use when..." clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines. Not 2, because the "what" is concrete and multi-area rather than vague.	3 / 5
Trigger Term Quality	React, Next.js, 状态管理, and 性能优化 are terms users naturally say when they need this skill. Common synonyms and variations (组件, hooks, 前端组件, SSR) are missing, keeping it below the comprehensive anchor 5.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js framing carves out a distinct niche with minimal conflict risk; the broad "UI最佳实践" tail and generic "前端开发模式" phrasing leave minor overlap with general web/UI skills, preventing a 5.	4 / 5
	Total	14 / 20 Passed

Validation

87%

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 — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (657 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: docs/zh-CN/skills/frontend-patterns/SKILL.md
Commit: c70874f

Reviewed: 1 day 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.