frontend-patterns

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

Install with Tessl CLI

npx tessl i github:affaan-m/everything-claude-code --skill frontend-patterns

What are skills?

Overall
score

61%

Review — 49%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Discovery

33%

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 stack and domain but reads more like a topic list than an actionable skill description. It lacks concrete actions Claude would perform and completely omits guidance on when to select this skill, making it difficult for Claude to choose appropriately among multiple skills.

Suggestions

Add a 'Use when...' clause specifying triggers like 'when building React components', 'when optimizing Next.js apps', or 'when implementing frontend state management'

Convert the topic list into concrete actions: 'Implements React component patterns, configures Next.js routing and SSR, optimizes bundle size and rendering performance'

Include common English variations of trigger terms (React, components, hooks, SSR, client-side rendering) to improve matching for bilingual users

Dimension	Reasoning	Score
Specificity	Names the domain (frontend development) and lists technologies (React, Next.js, state management, performance optimization, UI best practices), but doesn't describe concrete actions like 'build components', 'optimize rendering', or 'implement state patterns'.	2 / 3
Completeness	Only describes 'what' at a high level (frontend development patterns for listed technologies) but completely lacks any 'when to use' guidance or explicit trigger clause.	1 / 3
Trigger Term Quality	Includes relevant technical keywords (React, Next.js, state management, performance optimization) that users might mention, but lacks common variations like 'components', 'hooks', 'SSR', 'client-side', or English equivalents for broader matching.	2 / 3
Distinctiveness Conflict Risk	The combination of React, Next.js, and frontend-specific terms provides some distinctiveness, but 'UI best practices' and 'performance optimization' are generic enough to potentially overlap with other development skills.	2 / 3
	Total	7 / 12 Passed

Implementation

65%

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

This is a comprehensive React/frontend patterns reference with excellent, executable code examples covering composition, hooks, state management, performance, and accessibility. The main weaknesses are verbosity (many patterns Claude already knows) and lack of progressive disclosure for such extensive content. The skill would benefit from being more selective about which patterns truly add value beyond Claude's existing knowledge.

Suggestions

Trim basic patterns (composition, render props, basic hooks) that Claude already knows well, focusing on project-specific conventions or less common patterns

Split into multiple files: keep SKILL.md as a concise overview with links to HOOKS.md, STATE.md, PERFORMANCE.md, ACCESSIBILITY.md for detailed patterns

Add a 'When to use' decision guide at the top to help select appropriate patterns for different scenarios

Dimension	Reasoning	Score
Conciseness	The skill provides useful patterns but is quite lengthy (~400 lines). Some patterns like basic composition and render props are well-known React concepts that Claude already understands. The content could be more selective about which patterns truly need documentation.	2 / 3
Actionability	Excellent executable TypeScript/React code examples throughout. Every pattern includes complete, copy-paste ready implementations with proper typing, usage examples, and clear component structures.	3 / 3
Workflow Clarity	This is a reference/pattern catalog rather than a workflow-based skill, so multi-step processes aren't the focus. However, for patterns that do involve sequences (like form validation), the steps are implicit rather than explicitly numbered with validation checkpoints.	2 / 3
Progressive Disclosure	Content is organized into clear sections with good headers, but everything is in one monolithic file. For a skill this comprehensive, splitting advanced topics (virtualization, animations, accessibility) into separate reference files would improve navigation.	2 / 3
	Total	9 / 12 Passed

Validation

91%

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

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