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

Content

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 reference manual, but it fundamentally fails as a SKILL.md because it teaches Claude things it already knows well (React composition, hooks, Context, ErrorBoundary, memoization, Framer Motion, accessibility patterns). The code quality is high and fully executable, but the massive token cost provides almost no incremental value. It would only be justified if it encoded project-specific conventions or constraints, which it does not.

Suggestions

Reduce content to only project-specific patterns, conventions, or constraints that Claude wouldn't already know — remove generic React patterns like ErrorBoundary, useDebounce, and composition examples.

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

Add project-specific decision guidance: when to use which pattern in this particular codebase, what libraries are already installed, and what conventions the team follows.

Include a quick-reference section at the top summarizing the key rules/constraints (e.g., 'Always use X for state management, never use Y') rather than generic pattern demonstrations.

Dimension	Reasoning	Score
Conciseness	This is extremely verbose at ~400+ lines, essentially a React patterns textbook. It explains well-known patterns (composition, render props, Context+Reducer, ErrorBoundary, debounce hooks) that Claude already knows thoroughly. Very little here is project-specific or adds knowledge Claude doesn't already possess.	1 / 3
Actionability	All code examples are fully executable TypeScript/React with proper types, imports, and usage examples. The patterns are copy-paste ready with concrete implementations rather than pseudocode.	3 / 3
Workflow Clarity	The skill is organized as a pattern catalog rather than a workflow, so there are no multi-step processes requiring validation. However, there's no guidance on when to choose one pattern over another, no decision tree, and no sequencing for how patterns compose together in a real project.	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 with no separation between quick-reference overview and detailed implementations. The entire document could benefit from splitting into separate files per topic area with a concise overview in SKILL.md.	1 / 3
	Total	7 / 12 Passed

Description

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 lists relevant technology names but lacks concrete actions (verbs) describing what the skill does and entirely omits a 'Use when...' clause. It reads as a topic tag list rather than a functional description that would help Claude distinguish this skill from other coding-related skills. Adding specific actions and explicit trigger conditions would significantly improve selection accuracy.

Suggestions

Add specific concrete actions using verbs, e.g., 'Provides component architecture patterns, implements state management solutions, optimizes React rendering performance, configures Next.js routing and SSR.'

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about React components, Next.js configuration, frontend performance issues, or UI implementation patterns.'

Include common trigger term variations in both Japanese and English, such as 'コンポーネント', 'hooks', 'SSR', 'CSR', 'レンダリング', 'Redux', 'Zustand', '.tsx files'.

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 specific concrete actions. No verbs describing what the skill actually does.	2 / 3
Completeness	Partially answers 'what' (frontend development patterns) but provides no 'when' clause or explicit trigger guidance. The description reads more like a topic list than actionable guidance for skill selection. Missing a 'Use when...' clause caps this at 2, but the 'what' is also weak (no concrete actions), so it scores 1.	1 / 3
Trigger Term Quality	Includes relevant keywords like 'React', 'Next.js', '状態管理' (state management), 'パフォーマンス最適化' (performance optimization) that users might mention, but lacks common variations or specific terms like 'hooks', 'SSR', 'component', 'rendering', or English equivalents that users might also use.	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 coding skills, CSS skills, or JavaScript skills.	2 / 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 (646 lines); consider splitting into references/ and linking	Warning

	Total	10 / 11 Passed

Repository: affaan-m/everything-claude-code
Commit: ec92b52

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.