CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-patterns

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

39

Quality

37%

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

Quality

Content

42%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill is essentially a React patterns cookbook that restates well-known patterns Claude already understands deeply. While the code examples are high-quality and executable, the massive token cost provides minimal incremental value. The content would benefit enormously from being condensed to project-specific conventions and split across referenced files.

Suggestions

Drastically reduce content to only project-specific conventions or non-obvious patterns; remove standard React patterns (ErrorBoundary, React.memo, lazy loading, etc.) that Claude already knows.

Split detailed code examples into separate referenced files (e.g., COMPONENTS.md, HOOKS.md, PERFORMANCE.md) and keep SKILL.md as a concise overview with links.

Add a decision framework or workflow for when to apply each pattern (e.g., 'Use virtual list when items > 100; use Context+Reducer when state shared across 3+ components').

Include project-specific constraints such as preferred libraries, naming conventions, or file structure requirements that differentiate this from generic React guidance.

DimensionReasoningScore

Conciseness

This is extremely verbose at ~500+ lines, covering many well-known React patterns (composition, render props, context+reducer, React.memo, lazy loading, error boundaries, framer motion, accessibility) that Claude already knows thoroughly. Almost none of this content adds novel knowledge beyond standard React documentation.

1 / 3

Actionability

The code examples are fully executable TypeScript/React with proper type annotations, complete component implementations, and clear usage examples. Every pattern includes copy-paste ready code with realistic interfaces and implementations.

3 / 3

Workflow Clarity

Individual patterns are clearly presented with usage examples, but there's no guidance on when to choose one pattern over another, no decision tree, and no workflow for how these patterns compose together in a real project. The closing sentence vaguely says 'choose patterns that fit your project complexity' without actionable criteria.

2 / 3

Progressive Disclosure

This is a monolithic wall of code examples with no references to external files and no layered structure. All content is inline in a single massive file with no separation between quick-reference material and detailed implementations. There are no bundle files to offload the extensive code examples into.

1 / 3

Total

7

/

12

Passed

Description

32%Scale 1-3

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 identifies the technology domain (React/Next.js frontend) but reads more like a topic list than an actionable skill description. It lacks concrete actions (verbs), has no 'Use when...' clause, and uses category-level terms rather than specific capabilities. The description would benefit significantly from specifying concrete actions and explicit trigger conditions.

Suggestions

Add a 'Use when...' clause with explicit triggers, e.g., 'Use when the user asks about React components, Next.js routing, state management with Redux/Zustand, or frontend performance optimization.'

Replace abstract categories with concrete actions, e.g., 'Creates React components, implements Next.js routing and SSR, configures state management with Redux or Zustand, optimizes bundle size and rendering performance.'

Expand trigger terms to include common user phrases like 'component', 'hooks', 'SSR', 'server-side rendering', 'bundle size', 'lazy loading', 'CSS', 'responsive design', '.tsx', '.jsx'.

DimensionReasoningScore

Specificity

Names the domain (frontend development) and lists some areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions. No specific verbs like 'create components', 'optimize bundle size', or 'implement routing'.

2 / 3

Completeness

Describes 'what' at a high level (frontend development patterns) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when' caps completeness at 2, and the 'what' is also weak, so this scores a 1.

1 / 3

Trigger Term Quality

Includes some relevant keywords users might say like 'React', 'Next.js', 'state management', and 'performance optimization', but misses common variations like 'component', 'hooks', 'CSS', 'styling', 'TypeScript', 'SSR', 'server-side rendering', or 'responsive design'.

2 / 3

Distinctiveness Conflict Risk

Mentioning React and Next.js specifically provides some distinctiveness, but 'frontend development patterns' and 'UI best practices' are broad enough to overlap with general web development, CSS/styling, or JavaScript skills.

2 / 3

Total

7

/

12

Passed

Validation

90%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

Total

10

/

11

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.