implement-frontend

Implements a use case's frontend: a React view, form, or grid wired to the backend API, covering the main flow and every alternative/failure flow. Use when the user asks to "implement the frontend for UC-xxx", "build the React view", "wire up the form", "add the page for", or mentions React implementation for a specific use case.

Quality

92%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

85%

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

A well-structured, highly actionable skill body with a clear validated workflow and clean reference organization. Its only weakness is token efficiency: one DO-NOT entry over-explains React internals Claude already understands.

Suggestions

Tighten the useEffect/cancellation-guard DO-NOT bullet: state the rule (set a `cancelled` flag in cleanup, check before setState) and the failure symptom (StrictMode double-invoke can overwrite an in-progress edit) without narrating the full dev-vs-production mechanics.

Consider moving the per-UC cross-references (UC-002, UC-004, UC-010 A3, UC-011 A2, etc.) into a compact table so the DO-NOT list reads as rules rather than embedded spec citations.

Dimension	Reasoning	Score
Conciseness	Most content is valuable project-specific guidance, but the useEffect/cancellation-guard DO-NOT item runs several lines re-explaining React <StrictMode> dev-mode double-invocation mechanics that Claude already knows, which could be tightened to the rule and the failure symptom.	2 / 3
Actionability	Points to concrete files (docs/use-cases/UC-*.md, docs/guidelines/design-system.md, architecture.md §2.1/§2.2) and named patterns (shared interceptor/Error Boundary, confirmation-banner component, Amplify-backed API client) giving specific, executable direction.	3 / 3
Workflow Clarity	An 8-step sequenced workflow with explicit validation checkpoints: step 7 confirms error/401 routing through the shared interceptor and step 8 requires exercising the feature in a real browser across every flow before marking the use case done.	3 / 3
Progressive Disclosure	No bundle files exist, and the body is well-organized into Instructions, DO NOT, Workflow, and Resources sections with clearly-signaled one-level-deep references to external docs (design-system.md, use-case files, CLAUDE.md, Context7, Playwright MCP).	3 / 3
	Total	11 / 12 Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, specific description in third-person voice that names concrete capabilities, gives natural trigger phrases, and explicitly signals when to use it. It is clearly distinguishable from adjacent backend and testing skills.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'a React view, form, or grid wired to the backend API, covering the main flow and every alternative/failure flow' — rather than vague language.	3 / 3
Completeness	Explicitly states what it does (implements the frontend view/form/grid wired to the API, main + alternative flows) and when to use it via an explicit 'Use when...' clause with concrete triggers.	3 / 3
Trigger Term Quality	Includes natural phrases a user would actually say: 'implement the frontend for UC-xxx', 'build the React view', 'wire up the form', 'add the page for'.	3 / 3
Distinctiveness Conflict Risk	Occupies a clear niche (frontend implementation for a specific use case) with distinct triggers and explicit boundaries against sibling skills like /implement-backend and /playwright-test.	3 / 3
	Total	12 / 12 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: adolfobolivar/VETOnline
Commit: dee4c03

Reviewed: about 2 hours 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.