frontend-patterns

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

Quality

37%

Does it follow best practices?

Impact

—

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 capability areas but lacks concrete actions (verbs) and has no explicit 'Use when...' trigger clause. It reads more like a topic list 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 specifying trigger conditions, e.g., 'Use when the user asks about React components, Next.js routing, state management patterns, or frontend performance optimization.'

Replace the category listing with concrete actions using verbs, e.g., 'Provides React component patterns, implements Next.js routing and SSR, optimizes rendering performance, and structures state management with hooks or Redux.'

Include common user-facing trigger terms in both Japanese and English, such as 'コンポーネント', 'hooks', 'SSR', 'レンダリング', 'Redux', 'Zustand' to improve matching coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend development) and lists some areas like React, Next.js, state management, performance optimization, and UI best practices, but these are broad categories rather than concrete actions. No specific verbs describing what the skill does.	2 / 3
Completeness	Describes 'what' at a high level (frontend development patterns) but completely lacks any 'when' clause or explicit trigger guidance. There is no 'Use when...' or equivalent instruction for Claude to know when to select this skill.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'React', 'Next.js', '状態管理' (state management), 'パフォーマンス最適化' (performance optimization) that users might mention, but misses common variations and related terms like 'component', 'hooks', 'SSR', 'rendering', or English equivalents for bilingual matching.	2 / 3
Distinctiveness Conflict Risk	The mention of React and Next.js provides some specificity, but 'フロントエンド開発パターン' (frontend development patterns) is broad enough to overlap with general web development, CSS, or JavaScript skills. The scope is somewhat defined but could still conflict with related 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 React/Next.js pattern cookbook that restates well-known patterns Claude already understands deeply. While the code examples are high-quality and executable, the massive token cost (~400+ lines) provides almost no information Claude doesn't already have. The content would benefit enormously from being reduced to project-specific conventions or non-obvious patterns, with the standard patterns removed entirely.

Suggestions

Remove all standard React patterns (ErrorBoundary, useDebounce, React.memo, etc.) that Claude already knows—focus only on project-specific conventions, preferred libraries, or non-obvious decisions.

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

Add a decision-making workflow: when to use Context vs. external state management, when to virtualize lists, when to apply memoization—guidance Claude can't infer from general knowledge.

Add a table of contents or quick-reference section at the top so Claude can navigate to relevant patterns without reading the entire file.

Dimension	Reasoning	Score
Conciseness	This is extremely verbose at ~400+ lines, presenting well-known React patterns (composition, context, memo, error boundaries, render props) that Claude already knows thoroughly. Almost every pattern here is standard React documentation content that adds no novel information. The skill explains basic concepts like useDebounce, useToggle, and ErrorBoundary that are fundamental React knowledge.	1 / 3
Actionability	The code examples are fully executable, complete TypeScript with proper type annotations, and include usage examples for each pattern. They are copy-paste ready and demonstrate concrete implementations rather than pseudocode.	3 / 3
Workflow Clarity	The patterns are organized by category (components, hooks, state management, performance, etc.) which provides some structure, but there's no workflow sequencing—it's a reference catalog without guidance on when to apply which pattern, no decision trees, and no validation steps for choosing appropriate patterns.	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 in a single massive file with no navigation aids, table of contents, or separation of quick-start vs. advanced content. Each section could be its own reference file with the SKILL.md providing a concise overview.	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: 841beea

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