frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Quality

60%

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

Quality

Content

65%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, actionable catalog of frontend patterns with mostly executable code and lean explanations, though it relies on a few undefined placeholder types. As a monolithic reference with no external file references or multi-step workflow, it scores mid-range on workflow clarity and progressive disclosure.

Suggestions

Define or stub the undefined placeholder types (Market, ModalProps, DropdownProps, MarketCardProps) so code examples are fully copy-paste ready.

Split large pattern groups (e.g. custom hooks, performance, accessibility) into separate reference files linked from a concise SKILL.md overview to improve progressive disclosure.

Remove the generic closing '記住...' line or replace it with a concrete decision guide for choosing among the patterns.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean code with brief, useful comments and assumes Claude knows React (e.g. the non-obvious useQuery ref trick earns its place); it is not a 5 because the closing '記住...' line is mild generic padding and a few sections could be tightened.	4 / 5
Actionability	It provides complete, executable TypeScript/React with imports and usage examples across many patterns, matching 'mostly executable guidance with minor gaps'; it is not a 5 because several examples reference undefined types (Market, ModalProps, DropdownProps, MarketCardProps) that prevent fully copy-paste-ready execution.	4 / 5
Workflow Clarity	This is a catalog of independent patterns rather than a multi-step process, with no sequencing or validation checkpoints; the structure is adequate but there is no workflow to clarify, matching 'steps listed but validation gaps/implicit' in spirit. It is not a 4 because no explicit checkpoints or sequences are present.	3 / 5
Progressive Disclosure	The body has good ## /### section organization but is a monolithic ~640-line file with no references to external files, so content that could be split stays inline; it is not a 4 because there are no clearly signaled one-level-deep references, and not a 2 because the internal section structure is solid.	3 / 5
	Total	14 / 20 Passed

Description

56%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 the skill to React/Next.js frontend patterns with good natural keywords, but it lists domains rather than concrete actions and omits any 'Use when' trigger guidance, capping completeness at 3. It is reasonably distinct but would benefit from explicit usage triggers and action verbs.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger situations, e.g. 'Use when building React/Next.js components, managing state, or optimizing frontend performance.'

Replace domain listing with concrete actions, e.g. 'Compose reusable React components, build custom hooks, manage state with Context+Reducer, and optimize rendering with memoization and code splitting.'

Include common natural terms users say like 'components', 'hooks', 'forms', and 'accessibility' to improve trigger coverage.

Dimension	Reasoning	Score
Specificity	The description names the domain richly ('React, Next.js, state management, performance optimization, and UI best practices') but contains no concrete action verbs (e.g. extract, fill, merge), matching the anchor 'Names the domain but actions are minimal or generic'; it is not a 3 because it lacks even one or two concrete actions.	2 / 5
Completeness	It gives a clear 'what' (frontend development patterns for listed areas) but has no 'Use when...' clause or equivalent trigger guidance, so per the guideline completeness is capped at 3; not a 4 because 'when' is entirely absent rather than weakly implied.	3 / 5
Trigger Term Quality	'React', 'Next.js', 'state management', and 'performance optimization' are natural terms users would say, giving good keyword coverage; it stops short of 5 because common variations like 'components', 'hooks', 'forms', and 'accessibility' are missing.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js frontend niche is mostly distinct with only minor overlap risk from the broad 'UI best practices' phrasing; it is not a 5 because no explicit trigger phrases sharpen the niche and 'UI best practices' could overlap with general UI skills.	4 / 5
	Total	13 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (646 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Path: docs/zh-TW/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.