frontend-patterns

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

Quality

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

65%

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

The body delivers highly actionable, executable React/Next.js code examples across a broad range of patterns, but it is a long single-file catalog that reprints fairly standard knowledge with no progressive disclosure into reference files and no workflow validation checkpoints. It scores well on actionability and moderately on conciseness, workflow clarity, and structure.

Suggestions

Split advanced/large sections (e.g., animation, accessibility, virtualization) into reference files under references/ and link to them from SKILL.md so the main file stays a lean overview.

Trim or remove the most boilerplate patterns Claude already knows (useToggle, useDebounce, basic React.memo) to reduce token cost, keeping only non-obvious guidance like the useQuery ref-stability comment.

Where the skill guides risky or multi-step operations (e.g., form submission, error boundaries), add explicit validation/retry checkpoints so workflow clarity reaches the anchor-3 bar.

Dimension	Reasoning	Score
Conciseness	The body is code-dense with minimal fluff and avoids basic concept explanations, but it restates many fairly standard React patterns (compound components, useToggle, useDebounce, React.memo) across ~640 inline lines that largely restate knowledge Claude already has, fitting 'mostly efficient but could be tightened' rather than the lean anchor 3.	2 / 3
Actionability	Examples like the full useQuery hook, ErrorBoundary class, and VirtualMarketList are complete, executable TypeScript with imports, types, and usage snippets — copy-paste ready and specific, matching 'fully executable code/commands; specific examples; copy-paste ready'.	3 / 3
Workflow Clarity	Content is organized into clear topical sections but this is a patterns catalog, not a sequenced multi-step process, and there are no validation checkpoints or feedback loops (e.g., the form's validate() has no fix-and-retry loop); this matches 'steps listed but validation gaps / sequence present but checkpoints missing' rather than the explicit-validation anchor 3.	2 / 3
Progressive Disclosure	No bundle files exist in references/, scripts/, or assets/, and everything lives inline in one ~640-line SKILL.md with no external references; the section headings provide structure (avoiding anchor 1's monolithic-poor-organization) but content that could be split out (e.g., advanced animation/accessibility patterns) is inline, matching 'some structure but content that should be separate is inline'.	2 / 3
	Total	9 / 12 Passed

Description

57%

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 is in third person and clearly identifies its React/Next.js frontend niche, but it is a topic list rather than a list of concrete actions and omits any 'Use when' trigger guidance. It is reasonably distinct from other skills yet only partially complete.

Suggestions

Add an explicit 'Use when ...' clause stating when Claude should invoke the skill (e.g., when the user asks for React/Next.js component, hook, state-management, or performance patterns).

Reframe the topic list as concrete actions, e.g. 'Build composable React components, custom hooks, and Next.js performance optimizations' instead of noun phrases.

Include common user phrasings/variations (e.g. 'React components', 'custom hooks', 'memoization', 'virtual lists') to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Quotes "React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン" — it names a clear domain and several specific topic areas, but lists categories rather than concrete verbs/actions, so it falls short of the multi-action anchor 3 and sits at 'names domain and some actions'.	2 / 3
Completeness	It clearly states what the skill covers (frontend patterns for React/Next.js etc.) but contains no 'Use when...' clause or equivalent trigger guidance for when Claude should invoke it; per the guidelines a missing explicit trigger caps completeness at 2.	2 / 3
Trigger Term Quality	Terms like "React", "Next.js", "状態管理", "パフォーマンス最適化" are relevant keywords a user might say, but coverage is limited to these listed topics with no common variations or phrasings, matching 'some relevant keywords but missing common variations' rather than the broad anchor 3.	2 / 3
Distinctiveness Conflict Risk	Naming React and Next.js together with frontend patterns carves out a clear niche unlikely to fire for unrelated skills, matching 'clear niche with distinct triggers; unlikely to conflict'; it is more specific than the anchor 2 'works with document files' style overlap.	3 / 3
	Total	9 / 12 Passed

Validation

93%

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 — 15 / 16 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	15 / 16 Passed

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

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