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 content is a well-organized, mostly executable pattern catalog with clear activation triggers, but it is a large monolithic inlined reference that re-covers familiar patterns and lacks the one-level-deep external file split the rubric expects for a skill of this size.

Suggestions

Split separable concerns (hooks, state management, performance, forms, accessibility, animation) into one-level-deep reference files and keep SKILL.md as an overview, raising progressive disclosure.

Define or import the undefined referenced types (Market, MarketCardProps, ModalProps) so every code example is fully copy-paste runnable.

Trim the well-known boilerplate patterns (useToggle, useDebounce, ErrorBoundary, Context+Reducer) and the duplicate Modal definition to reduce token load and lift conciseness.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient per section (brief Chinese headers, code-heavy) but the ~650-line catalog re-implements well-known patterns (useToggle, useDebounce, ErrorBoundary) and even duplicates Modal, so it could be tightened and includes familiar material, matching score 3.	3 / 5
Actionability	Examples are executable, typed TypeScript with usage blocks and even a subtle ref-stability bug note, but several reference undefined types (Market, MarketCardProps, ModalProps), leaving minor gaps that hold this at score 4 rather than 5.	4 / 5
Workflow Clarity	A "何时激活" trigger list plus concern-organized sections give clear guidance for selecting the right pattern; no destructive/batch operations exist so the validation cap doesn't apply, fitting score 4 for a pattern-catalog skill.	4 / 5
Progressive Disclosure	No bundle files exist and the skill is a ~650-line monolithic catalog inlined in SKILL.md with clearly separable concerns (hooks, state, perf, forms, a11y) that would benefit from separate reference files, matching the score-3 anchor of structure present but content that should be split is inline.	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 clearly scopes a frontend-patterns skill around React/Next.js but is missing an explicit "Use when..." trigger clause, which caps its completeness. Trigger-term coverage is good but omits the library synonyms mentioned in the body.

Suggestions

Add an explicit "Use when..." (何时使用) trigger clause listing concrete situations, e.g. building React components, managing state, or optimizing frontend performance.

Include natural synonyms and library names users actually say (Zustand, SWR, React Query, hooks) to raise trigger-term coverage to comprehensive.

Reframe the abstract "开发模式" phrasing as concrete actions (e.g. "compose components", "manage state", "optimize rendering") to improve specificity.

Dimension	Reasoning	Score
Specificity	Names concrete domains ("React、Next.js、状态管理、性能优化和UI最佳实践") but describes them as abstract "开发模式" rather than listing concrete actions, matching the score-3 anchor of domain-plus-actions that aren't comprehensive.	3 / 5
Completeness	There is a clear "what" (frontend development patterns for React/Next.js), but no "Use when..." / "何时使用" trigger clause exists, so per the rubric's explicit cap a missing trigger clause holds completeness at 3.	3 / 5
Trigger Term Quality	Natural keywords a user would say ("React", "Next.js", "状态管理", "性能优化") are present with good coverage, but common variations and library names (Zustand, SWR, React Query) that appear in the body are missing from the description, fitting score 4 over 5.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js frontend niche is mostly distinct with minimal conflict risk, though the broad "UI最佳实践" scope leaves minor overlap with general web/UI skills, matching score 4.	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: e04ea0b

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.