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

67%

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

53%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 highly actionable and code-complete but far too long for a SKILL.md overview, inlining an entire pattern reference that belongs in separate bundle files. It lacks sequencing/checkpoints (it is a catalog, not a workflow) and provides no progressive disclosure.

Suggestions

Split the pattern catalogs (hooks, state, performance, forms, a11y, animation) into separate files under references/ and keep SKILL.md as a short overview that links to them one level deep.

Trim each inlined example to the minimal illustrative snippet and drop usage boilerplate Claude already knows, to reduce the ~655-line token cost.

Add a brief decision workflow ('when to reach for memoization vs virtualization', 'context vs Zustand') with any validation step for performance changes, so the catalog also guides sequencing rather than only listing options.

Dimension	Reasoning	Score
Conciseness	At ~655 lines the body is a monolithic catalog of full implementations covering concepts Claude already knows (composition, memoization, controlled forms); each pattern repeats usage boilerplate that pads the token budget well past what a skill overview should carry.	2 / 5
Actionability	Every section provides complete, executable TypeScript/JSX with imports, types, and realistic usage examples (useQuery with ref-stability, useVirtualizer, controlled form validation, error boundary), covering the common cases copy-paste ready.	5 / 5
Workflow Clarity	This is a pattern catalog rather than a sequenced workflow, so 'When to Activate' and per-section headers provide loose organization but there are no checkpoints or validation steps; the pattern-selection guidance is implicit, and the closing 'Remember' note is generic.	3 / 5
Progressive Disclosure	All content is inlined into SKILL.md with no bundle files (references/, scripts/, assets/ absent) and no references to deeper material; a 655-line reference catalog that should live in separate topic files is inlined into one document with no navigation to offloaded detail.	2 / 5
	Total	12 / 20 Passed

Description

81%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 well-formed description with an explicit 'Use when...' trigger, third-person voice, and clear domain scoping. It is slightly more topical than action-oriented, which keeps specificity at the strong-but-not-perfect level.

Dimension	Reasoning	Score
Specificity	Names the domain and several specific capability areas (React, Next.js, state management, performance optimization, UI best practices), though these read as topic buckets rather than discrete concrete actions like 'extract' or 'fill forms'.	4 / 5
Completeness	Explicitly answers 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').	5 / 5
Trigger Term Quality	Strong natural keywords users would say ('React or Next.js components', 'state', 'render performance'); missing some synonyms/extensions (e.g., hooks, JSX, .tsx) but coverage is good.	4 / 5
Distinctiveness Conflict Risk	Scoped clearly to React/Next.js frontend work, distinguishing it from backend or general skills, though 'UI best practices' is broad enough to risk minor overlap with a generic UI/accessibility skill.	4 / 5
	Total	17 / 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 (662 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

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

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.