CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-patterns

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

Quality

69%

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 ./.agents/skills/frontend-patterns/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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-dense pattern catalog with strong actionability and clear per-pattern sections, plus welcome non-obvious details (ref-stability in useQuery, sort mutation). Its weaknesses are inlining the entire catalog in SKILL.md with no progressive disclosure, and re-teaching standard React patterns Claude already knows, which inflates token cost.

Suggestions

Split the catalog into one-level-deep reference files (e.g. references/hooks.md, references/performance.md, references/accessibility.md) and keep SKILL.md as a concise overview with clearly signaled links.

Cut sections that re-teach patterns Claude already knows (useToggle, useDebounce, the classic ErrorBoundary, basic Card composition) and keep only the non-obvious guidance like the fetcherRef stability trick and the sort-mutation warning.

Complete the placeholder examples (the Dropdown's '{/* Dropdown implementation */}' and the form's '{/* Other fields */}') so every example is copy-paste ready, and add brief guidance on when to prefer one competing pattern over another.

DimensionReasoningScore

Conciseness

The body is lean per-section (code-heavy, no padded prose) and includes genuinely non-obvious guidance (the fetcherRef comment explaining the infinite-fetch loop, the '[...markets].sort' in-place-mutation warning). However, large sections re-teach standard patterns Claude already knows (Card composition, useToggle, useDebounce, the classic ErrorBoundary, basic framer-motion usage), so roughly a third of the ~660 lines could be cut. Matches anchor 3 ('mostly efficient but includes some unnecessary content or could be tightened') — not 2, since no section is padded with explanation.

3 / 5

Actionability

Nearly all sections provide complete, executable TypeScript with usage examples. Minor gaps keep it from anchor 5: the Dropdown example ends at '{/* Dropdown implementation */}', the form has a '{/* Other fields */}' placeholder, and several domain types/components are undefined (Market, ModalProps, DropdownProps, MarketCard, Spinner). This fits anchor 4 ('concrete code with minor gaps') and sits clearly above anchor 3's pseudocode level.

4 / 5

Workflow Clarity

This is a pattern reference rather than a multi-step process, and it involves no destructive or batch operations, so the validation-cap does not apply. The 'When to Activate' section plus cleanly separated per-pattern sections make the intended use unambiguous, matching anchor 4. It falls short of 5 because there is no guidance for choosing between competing patterns (e.g. composition vs. compound components, Context+reducer vs. a store library).

4 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/), so ~660 lines of pattern catalog are inlined entirely in SKILL.md. Section headers are clear and navigable — ruling out anchor 2's 'minimal structure' — but content that clearly belongs in separate reference files (hooks catalog, performance techniques, accessibility patterns) is inline with zero external references, which is exactly anchor 3 ('some structure but content that should be separate is inline').

3 / 5

Total

14

/

20

Passed

Description

61%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 domain and its main sub-areas with good natural keywords, but it is topic-list style rather than action-oriented and entirely lacks a 'Use when...' trigger clause, which caps completeness at 3. Adding explicit trigger guidance and concrete actions would lift the two capped dimensions.

Suggestions

Add an explicit trigger clause, e.g. 'Use when building or refactoring React/Next.js components, managing client state, or optimizing frontend performance.'

Convert topic nouns into concrete actions (e.g. 'Implements component composition, custom hooks, data fetching, memoization, and virtualization patterns') and drop the generic 'UI best practices' buzzword.

Add natural trigger synonyms users would say — 'hooks', 'components', 'frontend web app' — to improve trigger-term coverage toward anchor 5.

DimensionReasoningScore

Specificity

The description names the domain ('Frontend development patterns') and enumerates sub-areas (React, Next.js, state management, performance optimization), but these are topic nouns rather than concrete actions — there are no action verbs like 'builds' or 'optimizes', and 'UI best practices' is generic. This matches anchor 3 (domain named, actions not comprehensive) rather than anchor 4, which expects several specific concrete actions.

3 / 5

Completeness

The 'what' is clear (frontend development patterns for React, Next.js, state management, performance, UI), but there is no 'Use when...' clause or equivalent explicit trigger guidance — the 'when' is at best weakly implied by the topic list. Per the judging guideline, a missing 'Use when...' clause caps completeness at 3, and the content fits anchor 3 exactly.

3 / 5

Trigger Term Quality

Includes natural terms users would say: 'React', 'Next.js', 'state management', 'performance optimization', 'UI'. Matches anchor 4 (good keyword coverage, a few natural terms missing) — common variations like 'hooks', 'components', 'web app', or file extensions are absent, so it falls short of anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

React and Next.js anchor it to a distinct frontend niche (analogous to 'Works with PDF and Word document files' at anchor 4), but 'UI best practices' and 'performance optimization' are broad phrases that could overlap with general web/CSS/perf or component-library skills. Mostly distinct with minor overlap risk — anchor 4, not 5, since the broad tail terms weaken the niche.

4 / 5

Total

14

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (662 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

ysyecust/everything-claude-code

Path

.agents/skills/frontend-patterns/SKILL.md

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.