frontend-patterns
tessl i github:ysyecust/everything-claude-code --skill frontend-patternsFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Validation
69%| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (632 lines); consider splitting into references/ and linking | Warning |
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 11 / 16 Passed | |
Implementation
57%This skill provides high-quality, actionable React/TypeScript code examples covering a broad range of frontend patterns. Its main strength is the executable, well-typed code throughout. However, it suffers from being overly comprehensive in a single file without progressive disclosure, and includes some patterns that Claude already knows well, reducing token efficiency.
Suggestions
Split content into separate files: SKILL.md as overview with links to HOOKS.md, STATE.md, PERFORMANCE.md, ACCESSIBILITY.md for detailed patterns
Remove basic patterns Claude already knows (simple useState, basic React.memo usage) and focus on project-specific conventions or advanced patterns
Add a quick reference section at the top summarizing when to use each pattern category, with links to detailed sections
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some patterns Claude already knows well (basic useState, useEffect, React.memo). The examples are clean but the sheer volume (~500 lines) could be trimmed by removing more basic patterns and focusing on project-specific conventions. | 2 / 3 |
Actionability | Excellent executable TypeScript/React code throughout. Every pattern includes complete, copy-paste ready implementations with usage examples. The code is properly typed and follows modern React conventions. | 3 / 3 |
Workflow Clarity | This is a pattern reference rather than a workflow guide, so multi-step processes aren't the focus. However, for patterns that do involve sequences (form validation, error boundaries), the steps are implicit rather than explicitly numbered with validation checkpoints. | 2 / 3 |
Progressive Disclosure | The content is a monolithic wall of code examples with no references to external files for advanced topics. All patterns are inline regardless of complexity. No navigation structure or links to separate reference files for detailed API documentation or advanced use cases. | 1 / 3 |
Total | 8 / 12 Passed |
Activation
33%The description identifies a clear technical domain with recognizable framework names but reads more like a topic list than an actionable skill description. It lacks concrete actions (what Claude will actually do) and completely omits trigger guidance (when to use it), which significantly limits its effectiveness for skill selection among many options.
Suggestions
Add a 'Use when...' clause with explicit triggers like 'Use when the user asks about React components, Next.js routing, frontend performance, or building UI interfaces'
Replace category labels with concrete actions: instead of 'state management', say 'implement Redux/Zustand stores, manage component state with hooks'
Include common user terms and file extensions: 'JSX', 'TSX', 'components', 'hooks', 'CSS modules', '.jsx', '.tsx'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend development) and lists several areas (React, Next.js, state management, performance optimization, UI best practices), but these are categories rather than concrete actions like 'build components' or 'optimize bundle size'. | 2 / 3 |
Completeness | Describes what domain it covers but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. The 'when' is entirely missing. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'React', 'Next.js', 'state management', 'performance optimization' that users might mention, but missing common variations like 'components', 'hooks', 'Redux', 'CSS', 'responsive design', or file extensions like '.jsx', '.tsx'. | 2 / 3 |
Distinctiveness Conflict Risk | React and Next.js provide some specificity, but 'frontend development patterns' and 'UI best practices' are broad enough to potentially overlap with general web development, CSS, or JavaScript skills. | 2 / 3 |
Total | 7 / 12 Passed |
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.