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 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

37%

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

This skill functions as a pure index/table of contents with no substantive content in the main file. While it's concise and well-organized with clear links, it provides zero actionable guidance, no workflow for selecting patterns, and no quick examples. The skill body should include at least a decision matrix or brief guidance on when to use each pattern category.

Suggestions

Add a quick-start section with 1-2 concrete code examples of the most common patterns (e.g., a simple custom hook or compound component)

Include a decision guide or table showing when to use each pattern category (e.g., 'Use Compound Components when: building reusable UI with shared state')

Add brief inline summaries for each sub-skill link so readers can quickly identify which pattern fits their need without clicking through all 14 files

Dimension	Reasoning	Score
Conciseness	The content is extremely lean - just a title, brief description, and organized links to sub-skills. No unnecessary explanation of what React or frontend development is.	3 / 3
Actionability	The skill body contains zero executable code, commands, or concrete guidance. It's purely a table of contents with links - all actual content is deferred to sub-skills with no inline examples or quick-start guidance.	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 between patterns, and no validation steps for implementing any of them.	1 / 3
Progressive Disclosure	References are one-level deep and clearly organized into numbered sub-skills, which is good. However, there's no overview content at all - the skill is entirely references with no quick-start or summary guidance to help navigate which sub-skill to use when.	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: 3395991

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