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

87%

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

92%

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

A tight, highly actionable structural-rules skill with concrete code and decision tables; the only gap is progressive disclosure, since the ~230-line body keeps all detail inline rather than pointing to reference files.

Suggestions

Extract the longer reference material (e.g., the state-tier and Next.js server/client split tables) into a reference file and link to it one level deep, leaving SKILL.md as a tighter overview.

Consider adding a short 'How to apply this skill' sequence at the top so reviewers follow a consistent inspection order.

Dimension	Reasoning	Score
Conciseness	Lean, table-driven, and assumes Claude's competence with React/Vue/Tailwind basics; no padded concept explanations and every section earns its tokens (e.g., 'Size is a signal, not a hard limit').	3 / 3
Actionability	Provides fully executable, copy-paste-ready code (ProductList before/after, user.api.ts + useUsers.ts, typed ProductCardProps, cn() usage) plus concrete numeric ranges and naming tables.	3 / 3
Workflow Clarity	Organized as clear numbered decision rules with need→tool mapping tables; for an architecture decision skill the single-action decision guidance is unambiguous, and no destructive/batch operation requires validation checkpoints.	3 / 3
Progressive Disclosure	Well-organized into 15 numbered sections with one-level-deep pointers to sibling skills, but all detail is inline with no one-level-deep reference files for deeper material, short of the anchor-3 split.	2 / 3
	Total	11 / 12 Passed

Description

82%

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 specific, natural-sounding description with strong trigger terms and clear distinctiveness, weakened only by lacking an explicit 'Use when' trigger clause within the description field itself.

Suggestions

Add a concise 'Use when...' clause to the description (e.g., 'Use when structuring or reviewing a React/Next or Vue codebase') so the trigger is explicit within the description, not only in when_to_use.

Consider mirroring the NOT-for-design / NOT-for-performance exclusions briefly in the description to further reduce conflict risk.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete concerns — separation of concerns (UI/logic/data/type), file responsibility, state tiers, API services, schema validation, framework conventions for React/Next and Vue — matching the multi-action anchor.	3 / 3
Completeness	Clearly answers 'what' but the 'when' guidance lives in when_to_use, not the description itself, so per the guideline a missing 'Use when...' clause caps completeness at 2.	2 / 3
Trigger Term Quality	Natural frontend vocabulary a user would actually say (organize frontend code, React/Next, Vue, state, API services, validation) with good coverage of common phrasings.	3 / 3
Distinctiveness Conflict Risk	Clear niche with an explicit distinguishing clause ('Structural rules, not visual design') that separates it from visual-design and performance skills, unlikely to trigger wrongly.	3 / 3
	Total	11 / 12 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: 04514f0

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