frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

Quality

75%

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

Quality

Content

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

A rich, highly actionable catalogue of React/Next.js patterns with executable examples and useful gotcha commentary. Its weaknesses are the absence of pattern-selection guidance and a monolithic structure with no progressive disclosure into reference files.

Suggestions

Add brief decision guidance (e.g. a 'Choosing a state approach' or 'When to memoize' note) so Claude can select the right pattern rather than scanning all of them.

Move the larger or less-common pattern groups (forms, accessibility, animation) into reference files linked from a concise overview to improve progressive disclosure.

Remove the redundant opening and closing prose lines that restate the description.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, executable code with terse commentary and useful gotcha notes (e.g. the ref-stability comment in useQuery), but the opening "Modern frontend patterns..." line and the closing "Remember: ..." line are fluff that could be trimmed.	4 / 5
Actionability	It provides numerous complete, copy-paste-ready TypeScript/React examples covering composition, hooks, state, performance, forms, error boundaries, animation, and accessibility, matching the anchor for fully executable guidance across common cases.	5 / 5
Workflow Clarity	A "When to Activate" section gives entry triggers, but as a pattern catalogue there is no multi-step workflow, no decision guidance for choosing among the many patterns, and no checkpoints; structure exists but sequencing is implicit.	3 / 5
Progressive Disclosure	The file is well-organized with clear ## and ### headers, but it is a ~15KB monolithic document with no bundle/reference files and no one-level-deep navigation; content that could be split (e.g. forms, accessibility, animation references) is fully inlined.	3 / 5
	Total	15 / 20 Passed

Description

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

A solid description that clearly answers both what the skill covers and when to activate it, with natural trigger terms. It is held back from the top by category-style capability framing and some missing natural trigger terms (hooks, forms, routing, accessibility).

Suggestions

Replace category nouns with concrete verbs in the 'what' clause, e.g. "Build and review React/Next.js components, manage state, and optimize render performance".

Expand the trigger to include natural terms users say for the other covered areas: hooks, forms, routing, and accessibility.

Tighten the closing "UI best practices" phrase into a concrete capability to reduce overlap with generic web-dev skills.

Dimension	Reasoning	Score
Specificity	The description names the domain ("React, Next.js, state management, performance optimization, and UI best practices") but frames capabilities as topic categories ("patterns for...") rather than concrete actions like "build", "extract", or "fill", matching the anchor that names the domain with limited concrete actions.	3 / 5
Completeness	It explicitly states both what it does ("Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices") and when to use it ("Use when building or reviewing React or Next.js components, state, or render performance") with concrete trigger phrases.	5 / 5
Trigger Term Quality	"Use when building or reviewing React or Next.js components, state, or render performance" supplies natural phrases users would say, but omits several natural terms covered in the body (hooks, forms, routing, accessibility, animation).	4 / 5
Distinctiveness Conflict Risk	The React/Next.js frontend niche is clear with distinct triggers, but there is minor overlap risk with closely related general web-development or CSS/testing skills.	4 / 5
	Total	16 / 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 (658 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata.version' is missing	Warning

	Total	14 / 16 Passed

Repository: affaan-m/ECC
Path: skills/frontend-patterns/SKILL.md
Commit: d8409a4

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