CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 well-organized, code-heavy pattern catalog with near-executable examples, but it front-loads ~650 lines into SKILL.md where a lean overview plus one-level-deep reference files would serve better, and much of the catalog restates React knowledge Claude already has. The strongest material is the few genuinely non-obvious notes (fetcher refs to avoid re-render loops, copy-before-sort).

Suggestions

Split the catalog into one-level-deep reference files (e.g., references/components.md, references/hooks.md, references/performance.md, references/a11y.md) and keep SKILL.md as a concise overview with the 'When to Activate' list plus per-topic links.

Trim sections that restate standard React knowledge (error boundary, controlled forms, focus management) down to only non-obvious guidance like the useQuery refs-against-stale-closure note and the copy-before-sort memoization warning.

Add a short decision workflow (e.g., local vs global state, when memoization is worth it, when to virtualize) with a validation checkpoint such as profiling before/after applying a performance pattern, so the skill guides selection rather than just listing patterns.

DimensionReasoningScore

Conciseness

Prose is lean and there is no concept-explaining padding, but large sections catalog textbook React knowledge Claude already has (error boundaries, controlled forms, focus management, render props, standard memoization) with little that is non-obvious beyond a few gems (the useQuery refs note, 'copy before sorting — sort mutates in place'). Mostly efficient, but hundreds of lines could be trimmed — matching anchor 3 rather than 4, since whole sections add little beyond Claude's baseline knowledge.

3 / 5

Actionability

The examples are near-copy-paste-ready, complete TypeScript with usage snippets across components, hooks, state, forms, animation, and a11y. Minor gaps keep it from 5: the Dropdown keyboard example ends at '{/* Dropdown implementation */}' and the form elides '{/* Other fields */}', plus the CreateMarketForm's try/catch is 'Success handling'/'Error handling' placeholders rather than concrete guidance.

4 / 5

Workflow Clarity

This is a pattern catalog, not a sequenced process: the 'When to Activate' section gives selection triggers and sections are well-grouped, but there is no workflow, ordering, or validation checkpoints (e.g., 'how to choose between Context and Zustand', or verifying a memoization actually improved renders). Not a risky/destructive skill, so no cap applies; it lands at anchor 3 — useful structure present, but guidance for moving from trigger to chosen pattern is implicit.

3 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent) and ~650 lines are inlined in SKILL.md with good section headers. That matches anchor 3: some structure, but content that would clearly work better as separate reference files (per-topic pattern pages) is inline. It avoids anchor 2 because the sectioning and headings do provide usable structure and navigation.

3 / 5

Total

13

/

20

Passed

Description

83%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 in third-person voice that explicitly states what the skill covers and when to use it with concrete trigger phrases. Its main weaknesses are that the 'what' leans on topic nouns and a buzzwordy 'UI best practices' rather than concrete actions, and trigger coverage lacks synonyms such as 'hooks' or 'frontend'.

DimensionReasoningScore

Specificity

The description lists several specific coverage areas — "React, Next.js, state management, performance optimization, and UI best practices" — but these are topic areas rather than concrete actions (compare "Extract text and tables from PDF files"), leaving minor gaps. It sits above score 3 (only 1-2 concrete actions) but the generic phrase 'UI best practices' keeps it below the comprehensive, action-oriented anchor 5.

4 / 5

Completeness

Both parts are explicitly answered: the 'what' ("Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices") and a concrete 'when' ("Use when building or reviewing React or Next.js components, state, or render performance"). This matches anchor 5's pattern of a clear what plus an explicit, trigger-phrase-bearing when clause; anchor 4's weaker example ('Use when working with PDF files') is noticeably less specific.

5 / 5

Trigger Term Quality

Natural trigger phrases users would say are present: "React or Next.js components", "state", "render performance", "building or reviewing". Coverage is good but misses common synonyms and variations a user might say (e.g., 'hooks', 'frontend', 'web UI', 'App Router'), so it falls between anchors 4 and 5, closer to 4.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js scoping and the building/reviewing trigger make it mostly distinct with minor overlap risk against closely related skills (general web development, testing, or framework-specific tooling skills). It does not fully claim a niche with minimal conflict the way the PDF-example anchor 5 does.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

CriteriaDescriptionResult

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
Reviewed

Table of Contents

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.