frontend-patterns

适用于 React、Next.js、状态管理、性能优化和 UI 最佳实践的前端开发模式。

Quality

48%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./docs/ja-JP/skills/frontend-patterns/SKILL.md

Quality

Content

65%Weight 40%Scale 1-3

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

The content is a well-organized, highly actionable catalog of executable React/Next.js patterns with strong code examples and minimal concept-explanation padding. Its weaknesses are structural: a monolithic single-file layout with no progressive disclosure, and no workflow validation checkpoints for the side-effecting patterns it presents.

Suggestions

Split the catalog into bundle reference files (e.g. references/component-patterns.md, references/hooks.md, references/performance.md) and keep SKILL.md as a concise overview with one-level-deep links to improve progressive disclosure.

Deduplicate the repeated Modal/AnimatedMarketList and hook scaffolding, and trim boilerplate to push conciseness toward fully lean.

For side-effecting patterns (forms with validation, useQuery, error boundaries), add a short validate->fix->retry note or checkpoint to strengthen workflow clarity.

Dimension	Reasoning	Score
Conciseness	The body is mostly code with minimal prose and assumes Claude's React knowledge (no 'what is useState' padding), but it repeats boilerplate patterns (e.g. two separate Modal implementations, near-identical hook scaffolding) that could be trimmed, so it is efficient yet not fully lean.	2 / 3
Actionability	Nearly every section is complete, executable TypeScript/TSX with typed interfaces, real imports, and usage examples — copy-paste ready (Card, Tabs, useQuery, useVirtualizer, ErrorBoundary, etc.), matching the 'fully executable, specific examples' anchor.	3 / 3
Workflow Clarity	Sections are clearly categorized but this is a pattern catalog, not a multi-step process; there is no sequencing, and the form/error-boundary/hook sections involve side effects or validation without any validate->fix->retry checkpoint, so per the rubric a non-workflow skill with no explicit validation caps at 2.	2 / 3
Progressive Disclosure	The ~630-line body is a single monolithic file organized under clear H2/H3 headings, with no bundle files and no one-level-deep references; structure is decent but everything is inline that could be split, matching the 'some structure but content that should be separate is inline' anchor.	2 / 3
	Total	9 / 12 Passed

Description

32%Weight 40%Scale 1-3

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 on-topic and third-person but is a topic catalog rather than a concrete, action-oriented statement, and it entirely lacks any 'Use when...' trigger guidance. It clears a low bar of distinguishability but falls short on completeness and specificity.

Suggestions

Replace the topic list with concrete verbs, e.g. '实现 React/Next.js 的组合模式、自定义 Hook、状态管理与性能优化代码' to lift specificity.

Add an explicit trigger clause such as 'Use when building or refactoring React/Next.js components, state management, or performance-critical UI.' to answer the 'when' half and raise completeness.

Include task-shaped natural keywords users actually say (组件、Hook、渲染、可访问性、懒加载) to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	The description names a domain and several capability areas ('React、Next.js、状态管理、性能优化和 UI 最佳实践') but lists no concrete actions like 'build', 'optimize', or 'refactor'; it reads as a topic list rather than actions, matching the 'names domain and some actions, but not comprehensive' anchor.	2 / 3
Completeness	It states 'what' the skill covers but contains no 'Use when...' or equivalent trigger clause, so the 'when should Claude use it' half is entirely missing — which the guidelines say caps completeness at 2 at most, and here even the 'what' is a vague topic list rather than concrete actions, landing at 1.	1 / 3
Trigger Term Quality	It surfaces relevant natural keywords ('React', 'Next.js', '状态管理', '性能优化') that users would say, but misses common task-shaped variations users actually request (e.g. '组件', 'Hook', '渲染优化', '可访问性'), so coverage is partial rather than complete.	2 / 3
Distinctiveness Conflict Risk	It is scoped to frontend React/Next.js rather than fully generic, giving it a discernible niche, but '状态管理' and '性能优化' could still overlap with other React or web skills, so it is 'somewhat specific but could still overlap'.	2 / 3
	Total	7 / 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 (632 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: xu-xiang/everything-claude-code-zh
Path: docs/ja-JP/skills/frontend-patterns/SKILL.md
Commit: dfbf946

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