frontend-patterns

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

Quality

45%

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 technology stack (React, Next.js) but relies on category labels rather than concrete actions. It completely lacks trigger guidance ('Use when...'), making it difficult for Claude to know when to select this skill. The description would benefit from specific actions and explicit usage triggers.

Suggestions

Add a 'Use when...' clause with explicit triggers like 'Use when building React components, working with Next.js routing, managing application state, or optimizing frontend performance'

Replace abstract terms like 'patterns' and 'best practices' with concrete actions such as 'create React components, implement hooks, configure Next.js routing, optimize bundle size, manage Redux/Zustand state'

Include more natural trigger terms users would say: 'components', 'hooks', 'SSR', 'client-side rendering', '.jsx', '.tsx', 'Redux', 'CSS-in-JS'

Dimension	Reasoning	Score
Specificity	Names the domain (frontend development) and lists several areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions like 'create components' or 'optimize bundle size'.	2 / 3
Completeness	Describes what domain it covers but lacks any explicit 'Use when...' clause or trigger guidance. The 'when' is entirely missing, which per the rubric should cap this at 2, but since the 'what' is also weak (patterns rather than actions), this scores a 1.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization' that users might mention, but missing common variations like 'components', 'hooks', 'Redux', 'CSS', 'responsive design', or file extensions like '.jsx', '.tsx'.	2 / 3
Distinctiveness Conflict Risk	React and Next.js provide some specificity, but 'frontend development patterns' and 'UI best practices' are broad enough to potentially overlap with general coding skills, CSS skills, or other JavaScript framework skills.	2 / 3
	Total	7 / 12 Passed

Implementation

57%

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

This skill provides high-quality, executable React/TypeScript patterns with excellent code examples that are immediately usable. However, it suffers from being a monolithic document that tries to cover too much in one file, lacking progressive disclosure and decision guidance for when to apply each pattern. The content would benefit from being restructured into an overview with links to detailed pattern files.

Suggestions

Split into multiple files: create separate HOOKS.md, STATE-MANAGEMENT.md, PERFORMANCE.md, ACCESSIBILITY.md files and link from a concise overview

Add a decision matrix or flowchart at the top explaining when to use each pattern (e.g., 'Use Context+Reducer when: state shared across 3+ components')

Remove basic patterns Claude knows (simple useState, basic React.memo) and focus on project-specific conventions or non-obvious implementations

Add validation/testing guidance for each pattern category to improve workflow clarity

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes some patterns Claude already knows well (basic useState, useEffect, React.memo). The extensive code examples are valuable but could be more selective - not every common pattern needs full implementation details.	2 / 3
Actionability	Excellent executable TypeScript/React code throughout with complete, copy-paste ready implementations. Each pattern includes both the implementation and usage examples, making it immediately actionable.	3 / 3
Workflow Clarity	Patterns are well-organized by category but lack guidance on when to choose which pattern, decision trees for complexity levels, or validation steps. The final note mentions 'choose patterns matching complexity' but provides no criteria.	2 / 3
Progressive Disclosure	This is a monolithic 400+ line file with no references to external documentation. Content like the full virtualization implementation, animation patterns, and accessibility patterns could be split into separate files with links from a concise overview.	1 / 3
	Total	8 / 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: haniakrim21/everything-claude-code
Commit: ae2cadd

Reviewed: 18 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.