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

64%

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

50%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 is well-organized and code-forward with genuinely executable examples, but it spends most of its tokens restating standard React knowledge Claude already has, and inlines everything into one large file with no progressive disclosure. Its highest value content (the non-obvious gotchas) is diluted by the textbook bulk.

Suggestions

Cut the body to the patterns that add non-obvious value (e.g., the ref-stability fix in useQuery, sort-mutation copy, focus restoration) and drop implementations Claude can produce unaided (useToggle, useDebounce, controlled forms, ErrorBoundary).

Move full pattern implementations into a references/ directory (e.g., references/hooks.md, references/performance.md) and keep SKILL.md as a concise index with one-line pointers, making the structure progressive.

Replace the stubbed '// Success handling' / '// Error handling' comments in CreateMarketForm with a concrete retry/validation example so the form workflow has an explicit feedback loop.

Dimension	Reasoning	Score
Conciseness	The ~660-line body is essentially a React textbook of patterns Claude already knows (composition, compound components, useToggle, useDebounce, Context+reducer, React.memo, lazy loading, controlled forms, error boundaries, framer-motion). Only a few tokens earn their place (the ref-stability infinite-loop note in useQuery, the sort-mutates-in-place note), so it matches the 2 anchor ('noticeably verbose; several unnecessary explanations') rather than 1, since there is no prose padding and the examples are code-dense.	2 / 5
Actionability	The code examples are concrete, executable TypeScript/React that are mostly copy-paste ready, including complete implementations and usage snippets. Minor gaps (undefined types like ModalProps, Market, and the createMarket call) keep it below the 5 anchor's fully-covered common cases.	4 / 5
Workflow Clarity	This is a pattern catalog, not a sequenced process: there is no step order, no checkpoints, and no error-recovery flow, just a 'When to Activate' list and topic sections. The simple-skill exception does not apply cleanly at this size, and no validation guidance exists even where relevant (e.g., form submission error paths are stubbed as '// Error handling'), matching the 3 anchor ('steps listed but validation gaps').	3 / 5
Progressive Disclosure	The body has good section structure and headers, but everything is inlined in a single 660-line SKILL.md with no references, scripts, or assets, and much of it (full standard-pattern implementations) clearly belongs in reference files. It is well past the under-50-line exception, fitting the 3 anchor ('some structure... content that should be separate is inline') rather than 2, since structure and navigation are present.	3 / 5
	Total	12 / 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 strong description with an explicit and well-phrased 'Use when...' trigger clause and clear domain scoping. Its main weakness is that capabilities are framed as topic areas rather than concrete actions, which slightly blunts specificity.

Dimension	Reasoning	Score
Specificity	The description names several domains ('React, Next.js, state management, performance optimization, and UI best practices') but presents topic labels rather than concrete actions. It names the domain with only minimal, generic action language ('development patterns for'), matching the 3 anchor; it lacks the specific verbs ('extract', 'fill', 'merge') that would justify a 4.	3 / 5
Completeness	It clearly answers both what ('Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices') and when ('Use when building or reviewing React or Next.js components, state, or render performance') with concrete trigger phrases, matching the 5 anchor.	5 / 5
Trigger Term Quality	Natural user phrases like 'building or reviewing React or Next.js components, state, or render performance' are present and would be said by users. A few common variations (e.g., 'hooks', 'frontend', 'UI', 'frontend performance') are missing, so it falls just short of the comprehensive 5 anchor.	4 / 5
Distinctiveness Conflict Risk	The React/Next.js frontend niche is fairly distinct with clear triggers, but 'UI best practices' and 'state management' leave minor overlap risk with general web-development or CSS/styling skills. This fits the 4 anchor ('mostly distinct; minor overlap risk') rather than the 5 anchor's minimal-conflict profile.	4 / 5
	Total	16 / 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 (663 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

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