frontend-patterns
React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。
39
37%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./docs/ja-JP/skills/frontend-patterns/SKILL.mdQuality
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 completely omits a 'Use when...' clause. It reads more like a topic list than a skill description, making it difficult for Claude to reliably select this skill over other frontend or coding-related skills.
Suggestions
Add a 'Use when...' clause specifying trigger scenarios, e.g., 'Use when the user asks about React component patterns, Next.js routing, state management with Redux/Zustand, or frontend performance optimization.'
Replace the category listing with concrete actions using verbs, e.g., 'Provides React component architecture patterns, implements Next.js page routing and SSR strategies, optimizes rendering performance, and recommends state management solutions.'
Include common English trigger terms alongside Japanese ones (e.g., 'React', 'hooks', 'SSR', 'CSR', 'component') to improve matching for bilingual users.
| 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', 'TypeScript', or English equivalents. | 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 coding skills, CSS skills, or other JavaScript framework 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 catalog that explains concepts Claude already knows well. While the code examples are high-quality and executable, the massive volume of standard React patterns (composition, render props, context, memoization, error boundaries, etc.) wastes token budget without adding novel or project-specific value. The content would benefit dramatically from being reduced to only project-specific conventions and patterns that deviate from standard React practices.
Suggestions
Remove or drastically reduce coverage of standard React patterns (error boundaries, memoization, render props, debounce) that Claude already knows — focus only on project-specific conventions or deviations from standard practices.
Split the monolithic file into separate reference files (e.g., hooks.md, state-patterns.md, performance.md, accessibility.md) and keep SKILL.md as a concise overview with links.
Add a decision framework or workflow for when to use which pattern (e.g., 'Use Context+Reducer when X, use Zustand when Y') rather than just listing patterns.
Include project-specific constraints such as preferred libraries, naming conventions, file structure requirements, or anti-patterns specific to the codebase.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | This is extremely verbose at ~400+ lines, presenting well-known React patterns (composition, render props, context+reducer, error boundaries, memoization, debounce hooks) that Claude already knows thoroughly. Almost every pattern here is standard React knowledge that adds no novel information. The skill reads like a React tutorial rather than project-specific guidance. | 1 / 3 |
Actionability | The code examples are fully executable TypeScript/React code with proper type annotations, complete implementations, and usage examples. Every pattern includes copy-paste ready code with clear interfaces and concrete implementations. | 3 / 3 |
Workflow Clarity | The content is organized into clear sections by pattern type, but there are no multi-step workflows, no validation checkpoints, and no guidance on when to apply which pattern or how to sequence decisions. For a skill covering this many patterns, some decision framework or workflow for pattern selection would be valuable. | 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. The patterns could easily be split into separate reference files (hooks.md, state-management.md, performance.md, accessibility.md) with a concise overview in the main skill. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%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
928076c
- Reviewed
Table of Contents
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.