frontend-architecture

How to organize frontend code — separation of concerns (UI / logic / data / type), file responsibility, state tiers, API services, schema validation, and framework conventions for React/Next and Vue. Structural rules, not visual design.

Quality

90%

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

Quality

Content

88%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 concrete and actionable with strong executable examples and a clear logical structure, and it stays lean by assuming Claude's framework knowledge. The main improvement lever is progressive disclosure — splitting some detailed examples into reference files would lift it from good to excellent.

Suggestions

Move detailed code examples (e.g. the god-component decomposition and Tailwind cn() patterns) into a references/ file, keeping SKILL.md as a tight overview with one-level links.

Trim a few framing sentences that restate the obvious (e.g. 'Size is a signal, not a hard limit' can be implied by the table) to push conciseness toward fully lean.

Add a brief 'Quick reference' summary table at the top listing the layer → file home mapping, so the most-used rule is reachable without scrolling.

Dimension	Reasoning	Score
Conciseness	Lean and table-driven, assuming Claude's knowledge of React/Vue/TS with no basic-concept padding; a few sentences could still be trimmed (e.g. the 'signal, not a hard limit' framing), placing it just below the 'every token earns its place' anchor.	4 / 5
Actionability	Copy-paste-ready code across the common cases (useProducts hook, user.api.ts service, useUsers query, cn() class merging, typed props) plus concrete prefer/avoid and file-size tables — fully executable guidance.	5 / 5
Workflow Clarity	Rules are sequenced logically from layers through framework specifics to testing/a11y, with an unambiguous recap checklist; no destructive/batch workflow is present so the validation cap does not apply, and guidance is unambiguous for this rules-based skill.	5 / 5
Progressive Disclosure	Self-contained with clear section headers and one-level cross-skill links ([app-builder], [frontend-design], [nextjs-react-expert]); well-organized, though the single ~240-line file could offload some detailed examples into reference files, leaving minor organization gaps.	4 / 5
	Total	18 / 20 Passed

Description

92%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 is specific, complete, and well-differentiated, with explicit what/when guidance and clear conflict-avoidance boundaries against sibling skills. The only minor gap is a few missing colloquial trigger phrases.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete capabilities — separation of concerns (UI/logic/data/type), file responsibility, state tiers, API services, schema validation, and framework conventions — matching the 'comprehensive coverage' anchor.	5 / 5
Completeness	Explicitly answers both what (organize frontend code across the listed concerns) and when (the when_to_use field with concrete triggers like 'Next.js server/client split', 'component vs hook/composable boundaries').	5 / 5
Trigger Term Quality	Strong natural terms ('organize frontend code', 'React/Next', 'Vue', 'API calls', 'state', 'validation') with good coverage, though a few common user phrases ('component structure', 'where to put X') are absent — fits 'good keyword coverage, a few natural terms missing'.	4 / 5
Distinctiveness Conflict Risk	Clear niche carved with explicit boundary guidance — 'NOT for visual design (use frontend-design) and NOT for React/Next performance rules (use nextjs-react-expert)' — yielding minimal conflict risk.	5 / 5
	Total	19 / 20 Passed

Validation

81%

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

Validation for skill structure

Criteria	Description	Result
allowed_tools_field	'allowed-tools' contains unusual tool name(s)	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
relative_links	Relative link issues: 3 suspicious	Warning

	Total	13 / 16 Passed

Repository: vudovn/ag-kit
Path: .agents/skills/frontend-architecture/SKILL.md
Commit: 549ba3d

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