frontend-patterns

React、Next.js、状态管理（State Management）、性能优化（Performance Optimization）及 UI 最佳实践的前端开发模式。

Quality

57%

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 ./.agents/skills/frontend-patterns/SKILL.md

Quality

Content

65%Weight 40%Scale 1-3

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

The body is highly actionable — rich, executable, copy-paste-ready TypeScript examples across composition, hooks, state, performance, forms, error boundaries, animation, and accessibility. Its weaknesses are length/derivable standard implementations, the absence of any multi-step workflow with validation checkpoints, and a monolithic structure with no progressive disclosure into reference files.

Suggestions

Split the catalog into one-level-deep reference files (e.g. COMPONENTS.md, HOOKS.md, STATE.md, PERFORMANCE.md, FORMS.md, A11Y.md) and keep SKILL.md as a concise overview with signaled links, raising progressive_disclosure.

Trim or compress the most standard implementations (useToggle, useDebounce, ErrorBoundary, Context+Reducer) to minimal canonical snippets so every token earns its place, improving conciseness.

For the form-handling and state sections, add an explicit validate → fix → retry feedback loop so the destructive/batch-adjacent operations meet the workflow_clarity anchor 3.

Dimension	Reasoning	Score
Conciseness	The body avoids concept-explanation fluff (no "React is a library…" padding) and uses lean code with brief headers, but it is a ~640-line catalog of full standard implementations (useToggle, useDebounce, useQuery, Context+Reducer, ErrorBoundary) that Claude could largely derive, so it could be tightened. This fits 'mostly efficient but could be tightened' rather than the every-token-earns-its-place anchor 3.	2 / 3
Actionability	Nearly the entire body is complete, executable TypeScript/TSX with typed interfaces, exported functions, and concrete usage examples (e.g. the DataLoader, useQuery, and VirtualMarketList snippets). This matches the fully executable, copy-paste-ready anchor 3.	3 / 3
Workflow Clarity	Content is well organized by category and opens with a "何时激活 (When to Activate)" list, but there is no sequenced multi-step workflow or validation/feedback checkpoints — it is a pattern catalog rather than a single unambiguous task. Not a 1 (structure is clear) but not the explicit-checkpoint workflow of anchor 3.	2 / 3
Progressive Disclosure	Sections are clearly headed, but everything lives inline in one >600-line file with no references, scripts, or assets present; content that could be split (component patterns, hooks, state, performance, forms, accessibility) is monolithic. This matches 'content that should be separate is inline' rather than the well-signaled one-level-deep references of anchor 3.	2 / 3
	Total	9 / 12 Passed

Description

50%Weight 40%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.

The description clearly identifies the frontend domain and its main sub-areas in a bilingual, third-person phrasing, but it functions as a topical noun phrase rather than a capability statement with explicit activation triggers. Adding concrete actions and a "Use when…" clause would lift all four dimensions.

Suggestions

Append an explicit activation clause, e.g. "Use when building React/Next.js components, managing state, fetching data, optimizing rendering, or handling forms and accessibility."

Lead with concrete actions ("Build", "Optimize", "Manage state for") instead of the noun phrase "前端开发模式" to raise specificity.

Include common trigger variations users actually say — hooks, components, forms, routing, rendering, accessibility — so the description alone covers the terms now buried in the body.

Dimension	Reasoning	Score
Specificity	The description names the domain and several sub-areas ("React、Next.js、状态管理…性能优化…UI 最佳实践") but lists no concrete actions/verbs, only topical nouns. It is more specific than "Helps with documents" (anchor 1) but stops short of listing multiple concrete actions like the anchor 3 example.	2 / 3
Completeness	It answers "what" (frontend development patterns across the listed areas) but provides no "Use when…" clause or equivalent explicit trigger guidance, so per the judging guidelines completeness is capped at 2. Not a 1 because the "what" is substantive; not a 3 because "when" is entirely absent.	2 / 3
Trigger Term Quality	It includes relevant natural terms users would say ("React", "Next.js", "状态管理/State Management", "性能优化/Performance Optimization"), but omits common variations such as hooks, components, forms, routing, and accessibility that appear only in the body. This matches 'some relevant keywords but missing common variations.'	2 / 3
Distinctiveness Conflict Risk	React/Next.js frontend patterns form a recognizable niche, but "前端开发模式" (frontend development patterns) is broad and lacks distinct explicit triggers, so it could still overlap with general coding or other frontend skills. It is more specific than anchor 1 but not the clearly-distinct niche of anchor 3.	2 / 3
	Total	8 / 12 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 (643 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: xu-xiang/everything-claude-code-zh
Path: .agents/skills/frontend-patterns/SKILL.md
Commit: dfbf946

Reviewed: 28 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.