CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-patterns

React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。

56

Quality

65%

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

Quality

Content

82%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-structured, executable React/Next.js pattern catalog with strong actionability and efficient prose. Its main weaknesses are the absence of validation/error-recovery checkpoints in the form and error-boundary patterns and the lack of any progressive-disclosure split for a fairly long inlined catalog.

Suggestions

Add concrete validation and error-recovery steps to the form submission and error-boundary examples instead of placeholder '// Success handling' / '// Error handling' comments.

Consider splitting the longer sections (e.g. hooks, state management, performance) into reference files linked from a concise overview to improve navigation.

Trim mildly redundant inline comments and the closing '覚えておいてください' summary to push conciseness toward fully lean.

DimensionReasoningScore

Conciseness

The body is mostly lean pattern examples with minimal prose — section headers are followed directly by executable TypeScript and a brief '// Usage' block, with almost no explanation of concepts Claude already knows. It earns a 4 ('Efficient; minor instances of over-explanation that could be trimmed') rather than 5 because a few inline comments like 'Estimated row height' and the closing '覚えておいてください' summary are mildly redundant.

4 / 5

Actionability

Every section provides complete, copy-paste-ready TypeScript/React code covering the common case (composition, custom hooks, context+reducer, memoization, virtualization, forms, error boundary, a11y), matching the score-5 anchor 'Fully executable; copy-paste ready code; specific examples cover the common cases'. Not below 5 because the examples are concrete and runnable, not pseudocode.

5 / 5

Workflow Clarity

This is a pattern catalog (not a multi-step destructive process), so the simple-skill exception applies; sections are clearly grouped by concern and each pattern is self-contained, meriting a 4. Not a 5 because there are no validation checkpoints or error-recovery guidance for the patterns that involve risky operations (e.g. the form submission and error boundary sections use placeholder 'Success handling'/'Error handling' comments rather than concrete checks).

4 / 5

Progressive Disclosure

The body is well-organized into clearly labeled sections (component patterns, hooks, state, performance, forms, a11y) with no bundle files inlined unnecessarily and a single-level structure. Per the rubric, a skill under 50 lines with no external references could score 5, but this is ~640 lines of inlined pattern catalog that could plausibly be split into reference files, so it sits at 4 ('Good structure; most content appropriately placed; minor organization gaps'). Not a 5 because no references/signals exist and the catalog is long enough that splitting would aid navigation.

4 / 5

Total

17

/

20

Passed

Description

48%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 names a clear domain and relevant framework keywords but is a noun-based topic catalog with no concrete action verbs and no 'Use when...' trigger guidance, capping completeness and specificity. Adding action verbs and an explicit trigger clause would materially raise the score.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when building React/Next.js interfaces, managing component state, or optimizing render performance.'

Replace abstract category nouns with concrete actions, e.g. 'Compose components, build custom hooks, memoize renders, and lazy-load heavy views.'

Include natural trigger synonyms and file/extension terms users might say (e.g. 'React components', 'Next.js pages', 'hooks', 'context', 're-renders').

DimensionReasoningScore

Specificity

It names the domain (React, Next.js) and topic categories ('状態管理', 'パフォーマンス最適化', 'UIベストプラクティス') but lists no concrete actions — it reads as a topic catalog rather than verbs like 'extract', 'fill', 'merge', matching the score-2 anchor 'Names the domain but actions are minimal or generic'. Not a 3 because there is not even one concrete action verb, only abstract category nouns.

2 / 5

Completeness

It gives a clear 'what' (frontend development patterns for React/Next.js) but there is no 'Use when...' clause or equivalent trigger guidance, so per the rubric a missing 'Use when...' caps completeness at 3. Not a 4 because 'when' is entirely absent rather than present-but-weak.

3 / 5

Trigger Term Quality

It includes relevant natural keywords users would say ('React', 'Next.js', '状態管理') but misses common synonyms and file/extension terms and offers no natural phrases beyond the bare framework names, fitting the score-3 anchor 'Some relevant keywords but missing common variations or synonyms'. Not a 4 because coverage is a short list of framework names with no synonyms or natural phrasings.

3 / 5

Distinctiveness Conflict Risk

Naming React, Next.js, state management, and performance optimization carves a recognizable niche with only minor overlap risk against a generic 'frontend' or framework-specific skill, matching the score-4 anchor 'Mostly distinct; minor overlap risk with closely related skills'. Not a 5 because there is no explicit trigger phrase sharpening the niche.

4 / 5

Total

12

/

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

Total

15

/

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.