frontend-developer

Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.

Quality

50%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills/skills/frontend-developer/SKILL.md

The canonical home for this skill is frontend-developer in rmyndharis/antigravity-skills

Quality

Content

35%Weight 40%Scale 1-5

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

The body is a persona-style overview padded with capability lists Claude already knows, offering high-level guidance but no executable code or concrete tool commands. It is organized into sections yet lacks progressive disclosure and real actionability.

Suggestions

Cut the Capabilities/Knowledge Base/Behavioral Traits bullet lists (concepts Claude already knows) down to decision-oriented guidance; remove the Knowledge Base section entirely to recover token budget.

Add at least one copy-paste-ready code example per core task (e.g., a Server Component with Suspense boundaries, or a useActionState form with optimistic updates) to make the guidance executable.

Turn the vague 'Validate performance and UX' step into explicit checkpoints (e.g., run `next build`, Lighthouse, and axe-core; only proceed when thresholds pass) with a fix-and-retry feedback loop.

Dimension	Reasoning	Score
Conciseness	The ~160-line body is noticeably padded with long bullet lists (Capabilities, Knowledge Base, Behavioral Traits) that restate concepts Claude already knows about React/Next.js/CSS; there is some useful structure (Use/Don't-use/Instructions) but most sections are unnecessary padding, fitting anchor 2 rather than severely verbose prose anchor 1.	2 / 5
Actionability	There is no code, no commands, and no executable examples; the Instructions ('Implement UI with accessibility and responsive behavior') and Response Approach are high-level hints missing the specific steps to execute, matching anchor 2's minimal concrete guidance.	2 / 5
Workflow Clarity	A sequence exists (4-step Instructions, 8-step Response Approach) and step 4 ('Validate performance and UX with profiling and audits') is a soft checkpoint, but the steps are abstract and validation is implicit rather than an explicit run-this-tool checkpoint, fitting anchor 3.	3 / 5
Progressive Disclosure	The skill has clear section headers (some structure) but no bundle files and no external references at all, while the large inline capability/knowledge lists are content that could be split into reference files; this fits anchor 3's 'some structure, content that should be separate is inline.'	3 / 5
	Total	10 / 20 Passed

Description

66%Weight 40%Scale 1-5

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 names a clear, fairly specific frontend niche with several concrete actions, but omits any explicit 'when to use' trigger guidance, capping its completeness. It is solid but would improve markedly with a Use-when clause and de-claimed wording.

Suggestions

Add an explicit 'Use when...' clause naming concrete user phrases, e.g. 'Use when building or debugging React/Next.js UIs, fixing render performance, or wiring up client-side state.'

Replace the over-claim 'Masters React 19, Next.js 15, and modern frontend architecture' with one or two more concrete actions to lift specificity toward 5.

Include common synonyms users say ('React app', 'Next.js app', 'frontend', 'UI') to round out trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ('Build React components, implement responsive layouts, and handle client-side state management') rather than a single generic one; the trailing 'Masters React 19, Next.js 15, and modern frontend architecture' is an over-claim rather than an action, leaving minor coverage gaps that keep it just below a 5.	4 / 5
Completeness	It clearly states the 'what' (build components, layouts, state management) but provides no 'when'/'Use when' clause or equivalent explicit trigger guidance, which per the rubric caps completeness at 3.	3 / 5
Trigger Term Quality	Natural terms a user would say are present ('React components', 'responsive layouts', 'state management', 'React 19', 'Next.js 15'), giving good keyword coverage, but common variations/synonyms ('React app', 'frontend', 'UI') and any 'Use when' trigger phrasing are missing, so it does not reach comprehensive 5.	4 / 5
Distinctiveness Conflict Risk	The React 19 + Next.js 15 frontend niche is mostly distinct from backend/design skills, but the broad 'modern frontend architecture' phrasing and absence of distinct trigger phrases leave minor overlap risk with closely related web-dev skills, fitting anchor 4.	4 / 5
	Total	15 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

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

	Total	15 / 16 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: plugins/AI-Agents-Safe-Coding-Skills/skills/frontend-developer/SKILL.md
Commit: 57c135b

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