frontend-patterns

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

Quality

37%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./docs/zh-TW/skills/frontend-patterns/SKILL.md

Quality

Discovery

32%

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 a clear domain (frontend/React/Next.js) 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, making it hard for Claude to know precisely when to select this skill over others.

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 issues.'

Replace the category list with concrete actions, e.g., 'Guides creation of React components, configures Next.js routing and SSR, implements state management with hooks/Redux, and optimizes rendering performance.'

Include more natural trigger terms users would say, such as 'hooks', 'components', 'SSR', 'CSR', 'hydration', '.tsx', '.jsx', 'Tailwind', 'CSS-in-JS'.

Dimension	Reasoning	Score
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 describing what the skill does.	2 / 3
Completeness	Partially addresses 'what' by listing topic areas but lacks any explicit 'when' clause or trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also weak (patterns rather than actions), so this scores a 1.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization', and 'UI' that users might mention, but misses common variations like 'component', 'hooks', 'CSS', 'rendering', 'TypeScript', 'frontend framework', or file extensions like '.tsx', '.jsx'.	2 / 3
Distinctiveness Conflict Risk	Mentioning React and Next.js provides some specificity, but 'frontend development patterns' and 'UI best practices' are broad enough to overlap with general web development, CSS, or design system skills.	2 / 3
	Total	7 / 12 Passed

Implementation

42%

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

This skill reads like a comprehensive React patterns textbook rather than a targeted skill file. It explains patterns Claude already knows well (composition, render props, context, memo, lazy loading, error boundaries) without adding project-specific conventions or novel guidance. The content is well-structured with executable code but desperately needs to be condensed to project-specific decisions and conventions, with detailed examples moved to reference files.

Suggestions

Reduce the main file to a concise overview of project-specific conventions and preferences (e.g., 'prefer composition over render props', 'use @tanstack/react-virtual for lists > 100 items'), moving detailed code examples to separate reference files like COMPONENTS.md, HOOKS.md, PERFORMANCE.md.

Remove patterns Claude already knows (ErrorBoundary, React.memo, useCallback, lazy/Suspense, basic form handling) unless there are project-specific conventions that differ from standard React practices.

Add a decision tree or brief guidance on when to use which pattern (e.g., 'Use Context+Reducer for state shared across 3+ components; use local state otherwise') rather than just listing all patterns.

Add project-specific details: which libraries are actually used in this project, naming conventions, file structure expectations, and any anti-patterns specific to this codebase.

Dimension	Reasoning	Score
Conciseness	This is extremely verbose at ~400+ lines, essentially a React patterns encyclopedia. Most of these patterns (composition, render props, context+reducer, error boundaries, React.memo, lazy loading, form handling, framer motion) are well-known patterns that Claude already understands deeply. Very little here is project-specific or adds novel knowledge.	1 / 3
Actionability	The code examples are fully executable TypeScript/React components with proper type annotations, imports, and usage examples. Each pattern includes complete, copy-paste ready implementations.	3 / 3
Workflow Clarity	The content is organized by pattern category with clear sections, but there's no workflow sequencing—it's a reference catalog rather than a guided process. There are no validation checkpoints or decision trees for when to apply which pattern.	2 / 3
Progressive Disclosure	This is a monolithic wall of code examples with no references to external files. The massive amount of content (component patterns, hooks, state management, performance, forms, error boundaries, animations, accessibility) should be split into separate reference files with a concise overview in the main skill.	1 / 3
	Total	7 / 12 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (632 lines); consider splitting into references/ and linking	Warning

	Total	10 / 11 Passed

Repository: ysyecust/everything-claude-code
Commit: 79cc4e3

Reviewed: 8 days ago

Table of Contents

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.