frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

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 is a strong, actionable pattern library with excellent executable examples, but it is a monolithic catalog that could be split into reference files and carries minor redundancy. It works well as a reference but does not practice progressive disclosure.

Suggestions

Split the monolithic catalog into one-level-deep reference files (e.g., hooks.md, performance.md, accessibility.md) and keep SKILL.md as a concise overview with clearly signaled links.

Remove the duplicate Modal example (present in both the animation and accessibility sections) and the closing '記住' platitude to tighten token use.

Add a brief validation/checklist note where patterns involve risky operations (e.g., confirming memoization actually prevents re-renders) to introduce workflow checkpoints.

Dimension	Reasoning	Score
Conciseness	It is code-forward and assumes Claude's competence with no basic-concept padding, but the ~640-line single file is large, the Modal example is duplicated across the animation and accessibility sections, and the closing '記住' line is a platitude.	2 / 3
Actionability	Every section provides complete, executable TypeScript/React code with a '使用方式' usage example — copy-paste ready and matching the score-3 anchor.	3 / 3
Workflow Clarity	Patterns are clearly categorized with per-pattern usage, but this is a reference catalog with no multi-step sequences or validation checkpoints to sequence.	2 / 3
Progressive Disclosure	Section headers give it clear structure, but it is entirely monolithic — no bundle files exist and all 640 lines are inline with no one-level-deep references, where content could be split into reference files.	2 / 3
	Total	9 / 12 Passed

Description

50%

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 names a clear, specific domain but reads as a topic list rather than actionable capabilities and entirely lacks use-when trigger guidance. It is serviceable but misses the triggers that would let Claude reliably select it.

Suggestions

Add an explicit 'Use when…' clause with natural triggers (e.g., 'Use when building React/Next.js UIs, managing component state, or optimizing render performance') to satisfy the 'when' half of completeness.

Reframe the topic list as concrete actions (e.g., 'Compose components, build custom hooks, memoize renders, virtualize long lists') to lift specificity above a topic enumeration.

Include common trigger variations users actually say — 'hooks', 'components', 'forms', 'accessibility' — to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	It enumerates specific domains ("React, Next.js, state management, performance optimization, and UI best practices") but uses no action verbs — it is a topic catalog ("patterns for…") rather than concrete actions, so it sits above the vague score-1 anchor but below the multi-action score-3 anchor.	2 / 3
Completeness	It states the "what" (a frontend pattern catalog) but provides no "Use when…" clause or equivalent trigger guidance, which the guidelines cap at 2.	2 / 3
Trigger Term Quality	It includes natural terms users say ("React", "Next.js", "state management", "performance optimization") but omits common variations such as hooks, components, forms, and accessibility.	2 / 3
Distinctiveness Conflict Risk	The React/Next.js framing gives it a clear niche, but with no explicit triggers and a broad "UI best practices" tail it could still overlap with general web/frontend skills.	2 / 3
	Total	8 / 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: ysyecust/everything-claude-code
Commit: a9cbecb

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