frontend-patterns

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

Quality

45%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./docs/v19.7/configuration/agent/skills_external/antigravity-awesome-skills-main/skills/cc-skill-frontend-patterns/SKILL.md

Quality

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 a clear domain (frontend/React development) but reads more like a topic list than actionable skill guidance. It lacks concrete actions, explicit trigger conditions, and the 'Use when...' clause that would help Claude reliably select this skill from a large skill library.

Suggestions

Add a 'Use when...' clause specifying trigger scenarios like 'Use when the user asks about React components, Next.js routing, frontend performance, or building user interfaces'

Replace category labels with concrete actions: 'Create React components, configure Next.js routing, implement Redux/Zustand state management, optimize bundle size and rendering performance'

Expand trigger terms to include common variations users would say: 'hooks', 'components', 'SSR', 'client-side rendering', '.jsx', '.tsx', 'CSS-in-JS'

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 'create components' or 'optimize bundle size'.	2 / 3
Completeness	Only addresses 'what' at a high level (frontend development patterns) but completely lacks any 'when' guidance - no 'Use when...' clause or explicit trigger conditions 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 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 'performance optimization' and 'UI best practices' are generic enough to potentially overlap with general coding skills or other framework-specific skills.	2 / 3
	Total	7 / 12 Passed

Implementation

57%

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

This skill provides high-quality, executable React/TypeScript patterns but suffers from being a monolithic reference document. The code examples are excellent and actionable, but the skill explains many patterns Claude already knows (basic hooks, error boundaries, standard form handling) and lacks organization into separate files for different concerns. It reads more like a tutorial than a targeted skill enhancement.

Suggestions

Split into separate files: HOOKS.md, COMPONENTS.md, PERFORMANCE.md, ACCESSIBILITY.md with SKILL.md as a brief overview linking to each

Remove patterns Claude already knows well (basic useToggle, standard ErrorBoundary, basic form validation) and focus on project-specific conventions or non-obvious patterns

Add a decision guide section explaining when to use each pattern (e.g., 'Use compound components when X, use render props when Y')

Trim explanatory comments in code examples - the code itself is self-documenting for Claude

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes patterns Claude already knows well (basic React hooks, standard form handling, error boundaries). Some sections like the basic useToggle hook or standard ErrorBoundary class add little value. Could be significantly tightened.	2 / 3
Actionability	Excellent executable TypeScript examples throughout. All code is copy-paste ready with proper typing, imports shown where needed, and usage examples provided for each pattern.	3 / 3
Workflow Clarity	This is a reference/pattern catalog rather than a workflow skill, so multi-step processes aren't the focus. However, patterns are presented in isolation without guidance on when to choose one over another or how they compose together in real applications.	2 / 3
Progressive Disclosure	Monolithic 400+ line file with no references to external documentation. Content that could be split (hooks patterns, animation patterns, accessibility patterns) is all inline. No navigation aids or links to deeper resources.	1 / 3
	Total	8 / 12 Passed

Validation

81%

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 — 9 / 11 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (633 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	9 / 11 Passed

Repository: duclm1x1/Dive-Ai
Commit: 20ba150

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