agent-frontend-patterns

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

Quality

35%

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 ./.agent/skills/agent-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 technical domain (React/Next.js frontend development) but reads more like a topic list than actionable skill guidance. It lacks explicit trigger conditions and concrete actions, making it difficult for Claude to know precisely when to select this skill versus other web development skills.

Suggestions

Add a 'Use when...' clause with explicit triggers like 'Use when the user asks about React components, Next.js routing, frontend state management, or UI performance issues'

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

Include more natural trigger terms users would say: 'hooks', 'components', 'SSR', 'hydration', '.jsx', '.tsx', 'Redux', 'Zustand', 'Tailwind'

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	Describes what domain it covers but completely lacks a 'Use when...' clause or any explicit trigger guidance. There's no indication of when Claude should select this skill over others.	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

Implementation

37%

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

This skill file is essentially an index page with no substantive content of its own. While it's commendably concise and properly delegates to sub-skills, it provides no actionable guidance, no workflow for selecting patterns, and poor organization of the 14 sub-skills. The empty 'Component Patterns' section suggests incomplete work.

Suggestions

Add a brief decision guide or flowchart explaining when to use each pattern (e.g., 'Use Compound Components when building flexible UI kits, use Context + Reducer for complex shared state')

Group the 14 sub-skills into logical categories (e.g., 'Component Patterns', 'Custom Hooks', 'Performance', 'Accessibility') with brief 1-line descriptions

Add at least one quick-start code example in the main file showing a common pattern to make the skill immediately actionable

Fix the empty 'Component Patterns' section - either add content or remove the header

Dimension	Reasoning	Score
Conciseness	Extremely lean - just a title, brief description, and organized links to sub-skills. No unnecessary explanation of what React or frontend development is. Every line serves a purpose.	3 / 3
Actionability	The main skill file contains zero executable code, commands, or concrete guidance. It's purely a table of contents with no actionable content - all substance is deferred to sub-skills.	1 / 3
Workflow Clarity	No workflow is presented. There's no guidance on when to use which pattern, no sequencing, no decision tree for choosing approaches. It's just an unordered list of links.	1 / 3
Progressive Disclosure	Good use of sub-skills for detailed content, but the organization is weak - 14 links with no categorization or grouping. The 'Component Patterns' header is empty, suggesting incomplete structure. Links are one-level deep which is good.	2 / 3
	Total	7 / 12 Passed

Validation

90%

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

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: Dokhacgiakhoa/antigravity-ide
Commit: 332e58b

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