Name: frontend-patterns
Rating: 53.6 (1 reviews)
Author: affaan-m

Blog Docs Log in Get started

frontend-patterns

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

Quality

61%

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

The canonical home for this skill is frontend-patterns in affaan-m/ECC

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 body is a well-organized, largely executable catalog of React/Next.js patterns with lean code examples, but it is a monolithic inline reference with no progressive disclosure to separate files and no workflow sequencing or validation checkpoints. It is strong on actionability and conciseness, weaker on structure and workflow.

Suggestions

Move the larger reference sections (custom hooks, performance, forms, accessibility) into separate files under references/ and link to them from SKILL.md to implement progressive disclosure.

Complete the placeholder code blocks (Dropdown implementation, CreateMarketForm 'Other fields') so every example is fully copy-paste ready.

Remove the generic 'Remember' closing line and any obvious inline comments that restate what the code already shows.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean code examples with brief section headers and assumes Claude's knowledge of React; the only padding is the generic closing 'Remember' line and a few obvious inline comments, matching the 'efficient with minor trimmable instances' anchor.	4 / 5
Actionability	It provides mostly executable, copy-paste TypeScript/React examples across the common cases, with minor gaps such as the Dropdown and CreateMarketForm leaving placeholder comments instead of full implementations.	4 / 5
Workflow Clarity	This is a pattern catalog rather than a sequenced workflow: the 'When to Activate' section lists triggers but there is no ordered multi-step process or validation checkpoints, so it sits at the 'steps/sequence present but checkpoints missing' level.	3 / 5
Progressive Disclosure	No bundle files exist and all ~650 lines of pattern reference live inline in SKILL.md; section headers give good structure, but content that could reasonably be split into reference files (hooks, performance, forms, accessibility) is not separated out.	3 / 5
	Total	14 / 20 Passed

Description

57%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 names the frontend domain and several relevant technologies, but it reads as a topic list rather than a statement of concrete actions and omits any explicit 'Use when...' trigger guidance. It is adequate but not comprehensive or maximally distinctive.

Suggestions

Rewrite as concrete actions with verbs, e.g. 'Compose React components, manage state with hooks/Zustand/Context, optimize rendering with memoization and code splitting, and build accessible forms.'

Add an explicit trigger clause such as 'Use when building or refactoring React/Next.js UIs, managing client state, or optimizing frontend performance.'

Narrow the scope or lead with the highest-signal triggers (React, Next.js) to reduce overlap with general web/UI skills.

Dimension	Reasoning	Score
Specificity	The description names several specific domains ('React, Next.js, state management, performance optimization, and UI best practices') but lists topics rather than concrete actions (no verbs like 'extract', 'fill', 'merge'), matching the anchor that names the domain with minimal/generic actions.	3 / 5
Completeness	It gives a clear 'what' (frontend development patterns for a listed set of areas) but provides no 'Use when...' trigger clause, so per the judging guideline a missing trigger caps completeness at 3.	3 / 5
Trigger Term Quality	It includes natural terms users actually say ('React', 'Next.js', 'state management', 'performance optimization', 'UI'), giving good keyword coverage with only a few common variations missing.	4 / 5
Distinctiveness Conflict Risk	It is scoped to frontend/React/Next.js but the covered surface (state, performance, forms, accessibility, UI) is broad enough to overlap with several related frontend skills.	3 / 5
	Total	13 / 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 (659 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata.version' is missing	Warning

	Total	14 / 16 Passed

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