Tessl • The management layer for AI agent skills

Blog Docs Log inGet started

SkillPublic

frontend-patterns

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

1.94x

Quality

59%

Does it follow best practices?

Impact

97%

1.94x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-patterns/SKILL.md

Quality

Content

50%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 delivers idiomatic, mostly executable React/Next.js code across well-organized sections, but it functions as a monolithic textbook reference: nearly all of it restates knowledge Claude already has, nothing is split into reference files, and there is no guidance for choosing among the patterns. The highest-leverage fixes are pruning known material and moving detailed implementations into bundle files.

Suggestions

Cut or drastically compress patterns Claude already knows (useToggle, useDebounce, ErrorBoundary, React.memo basics) and keep only project-specific conventions, non-obvious guidance, or house-style patterns that differ from defaults.

Move detailed pattern implementations into one-level-deep reference files (e.g. references/components.md, references/performance.md) and keep SKILL.md as a short index with pointers, per progressive-disclosure best practice.

Add brief selection guidance under 'When to Activate' — e.g. when to prefer compound components vs. render props, or Context+reducer vs. a store like Zustand — so the catalog becomes a decision guide rather than a code dump.

Dimension	Reasoning	Score
Conciseness	The ~640-line body consists almost entirely of textbook React that Claude already knows — useToggle, useDebounce, a class-based ErrorBoundary, React.memo, composition-over-inheritance, render props — provided as full inline implementations. This matches anchor 2 ('noticeably verbose; several unnecessary... padded sections'); not 1 because prose is minimal and the code is idiomatic, not 3 because the padding is not isolated sections but the bulk of the file.	2 / 5
Actionability	Code examples are concrete, executable TypeScript with usage snippets — mostly copy-paste ready, matching anchor 4. Not 5 because several referenced symbols are undefined (createMarket, MarketCardProps, ModalProps, DropdownProps, Spinner, ChartSkeleton, Market), so examples require adaptation before they run.	4 / 5
Workflow Clarity	The body is a pattern catalog with no sequence: nothing guides Claude on when to pick composition vs. compound components vs. render props, and there are no checkpoints of any kind. It sits at anchor 3 — organized and coherent, but no decision guidance or validation structure; not 2 because each section is self-contained and clearly labeled.	3 / 5
Progressive Disclosure	Section headers are good, but ~600 lines of detailed pattern implementations are inlined in SKILL.md with no bundle files at all (no references/, scripts/, or assets/ exist). This matches anchor 3 ('content that should be separate is inline'); not 2 because the structure is genuinely well organized, not 4 because nothing is offloaded to one-level-deep reference files.	3 / 5
	Total	12 / 20 Passed

Description

52%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 technologies but reads as a topic list rather than a capability statement: no concrete actions, no 'Use when' trigger clause, and generic tail phrases like 'UI best practices'. It would benefit most from adding explicit actions and a trigger clause.

Suggestions

Replace the topic catalog with concrete actions, e.g. 'Implements React component, hook, state-management, form, and performance patterns (memoization, virtualization, code splitting) for React and Next.js apps.'

Add an explicit trigger clause, e.g. 'Use when building or refactoring React/Next.js components, managing client state (useState, useReducer, Zustand, Context), or optimizing render performance.'

Drop the generic 'UI best practices' tail and include natural trigger terms users actually say, such as 'components', 'hooks', 'forms', and 'accessibility', to reduce overlap with generic frontend skills.

Dimension	Reasoning	Score
Specificity	The description is a topic catalog ('React, Next.js, state management, performance optimization, and UI best practices') with no concrete actions — no verbs describing what the skill does. It names the domain but actions are minimal/generic, matching anchor 2; it is above anchor 1 because specific technologies are named, but below anchor 3 because not even 1-2 concrete actions are stated.	2 / 5
Completeness	A clear 'what' is present (frontend development patterns for named topics), but there is no 'Use when...' clause or any equivalent explicit trigger guidance, which the rubric says caps completeness at 3. It is not 4 because the 'when' is not even weakly implied.	3 / 5
Trigger Term Quality	'React', 'Next.js', 'state management', 'performance optimization' are natural phrases users would say, giving good keyword coverage. It falls short of anchor 5 (no synonyms or extensions like 'components', 'hooks', 'forms', '.tsx') and 'UI best practices' is generic filler, but it is above anchor 3 because the core natural terms are present and specific.	4 / 5
Distinctiveness Conflict Risk	'Frontend development patterns' and 'UI best practices' are broad and would overlap with general web-dev, CSS, accessibility, or framework-specific skills, though the React/Next.js naming adds some specificity. This matches anchor 3 ('somewhat specific but could still overlap with similar skills'), below anchor 4 which requires mostly distinct triggers.	3 / 5
	Total	12 / 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 (643 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: valeriibeck-star/claude-skills
Path: skills/frontend-patterns/SKILL.md
Revision: 0bda8b8

Reviewed: 2 days ago

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.

frontend-patterns

Table of Contents

Is this your skill?