frontend-patterns

tessl i github:sickn33/antigravity-awesome-skills --skill frontend-patterns

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

54%

Overall

Validation — 63%

Implementation — 57%

Activation — 33%

SKILL.md

Review

Evals

Validation

63%

Warnings & errors only

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (633 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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
body_steps	No step-by-step structure detected (no ordered list); consider adding a simple workflow	Warning

	Total	10 / 16 Passed

Implementation

57%

This skill provides high-quality, executable code examples for common React patterns, but suffers from being overly comprehensive in a single file. It lacks guidance on pattern selection and workflow integration, and would benefit significantly from being split into focused sub-documents with a concise overview pointing to them.

Suggestions

Split into separate files (e.g., HOOKS.md, STATE-MANAGEMENT.md, PERFORMANCE.md, ACCESSIBILITY.md) with SKILL.md as a brief overview linking to each

Add a decision matrix or flowchart for choosing between patterns (e.g., when to use Context+Reducer vs. external state management)

Remove basic patterns Claude already knows (useToggle, basic memoization) and focus on project-specific conventions or non-obvious patterns

Add a 'Pattern Selection' section explaining when each pattern is appropriate and what tradeoffs to consider

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes patterns Claude already knows well (basic React hooks, standard component patterns). Some sections like the basic toggle hook or simple memoization examples could be trimmed as they're common knowledge.	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	Patterns are presented as isolated examples without guidance on when to choose one over another or how they fit together in a real application. No decision trees or selection criteria for choosing between patterns.	2 / 3
Progressive Disclosure	This is a monolithic 400+ line file with no references to external documentation. Content that could be split (hooks, state management, animations, accessibility) is all inline with no navigation structure beyond headers.	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

17 days ago

Table of Contents

Validation Implementation Activation

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.