frontend-patterns

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

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/ja-JP/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 the technology stack (React, Next.js) and broad concern areas (state management, performance, UI) but fails to specify concrete actions the skill performs and entirely lacks a 'Use when...' clause. It reads more like a topic label than an actionable skill description, making it difficult for Claude to reliably select this skill over others in a large skill set.

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

Replace the abstract 'frontend development patterns' framing with concrete actions, e.g., 'Provides guidance on building React components, configuring Next.js pages and API routes, managing state with hooks or libraries, and optimizing rendering performance.'

Include common English and Japanese trigger terms users might naturally use, such as 'コンポーネント', 'hooks', 'SSR', 'レンダリング', 'ルーティング' to improve matching coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend development) and lists some technologies (React, Next.js, state management, performance optimization, UI best practices), but does not describe concrete actions like 'build components', 'optimize rendering', or 'implement routing'.	2 / 3
Completeness	Describes 'what' at a high level (frontend development patterns for listed technologies) but completely lacks any 'when' clause or explicit trigger guidance, which per the rubric caps completeness at 2 maximum, and the 'what' itself is weak enough to warrant a 1.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization', and 'UI best practices' that users might mention, but misses common variations like 'component', 'hooks', 'SSR', 'CSR', 'rendering', 'TypeScript', or English equivalents for broader matching.	2 / 3
Distinctiveness Conflict Risk	Mentioning React and Next.js specifically provides some distinctiveness, but 'frontend development patterns' is broad enough to overlap with general web development, CSS, or JavaScript 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 is essentially a comprehensive React/Next.js pattern catalog that Claude already knows. While the code examples are high-quality and executable, the skill adds almost no novel information — composition, render props, useDebounce, ErrorBoundary, Context+Reducer, React.memo, lazy loading, and Framer Motion are all well-known patterns. The massive token cost provides minimal value over Claude's existing knowledge, and the monolithic structure makes it inefficient as a reference.

Suggestions

Remove all generic React patterns Claude already knows (composition, render props, ErrorBoundary, useDebounce, etc.) and focus only on project-specific conventions, preferred libraries, or non-obvious decisions unique to your codebase.

Split into a concise SKILL.md overview (under 50 lines) with references to separate files like HOOKS.md, PERFORMANCE.md, ACCESSIBILITY.md for detailed examples.

Add a decision-making workflow or pattern selection guide (e.g., 'When to use Context+Reducer vs. external state management') rather than just listing patterns.

Include project-specific constraints such as preferred libraries, naming conventions, file structure requirements, or anti-patterns specific to your codebase that Claude wouldn't know by default.

Dimension	Reasoning	Score
Conciseness	This is extremely verbose at ~400+ lines, essentially a textbook of React patterns Claude already knows well. Composition, render props, useDebounce, ErrorBoundary, Context+Reducer — these are all standard patterns that don't need to be spelled out in full. Almost nothing here is project-specific or novel information.	1 / 3
Actionability	All code examples are fully executable TypeScript/React with complete implementations, proper typing, and usage examples. The code is copy-paste ready and includes concrete patterns with real implementations.	3 / 3
Workflow Clarity	The skill is organized by pattern category with clear sections, but there's no workflow guidance — no sequencing of when to apply which pattern, no decision tree for choosing patterns, and no validation steps. It reads as a reference catalog rather than actionable workflow guidance.	2 / 3
Progressive Disclosure	This is a monolithic wall of code examples with no references to external files and no layered structure. All content is inline regardless of complexity. The massive amount of content would benefit greatly from splitting into separate files (e.g., hooks.md, performance.md, accessibility.md) with a concise overview in the main file.	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: affaan-m/everything-claude-code
Commit: 5df943e

Reviewed: about 21 hours 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.