frontend-engineer

Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Pairs with a deployment skill such as vercel-cli, where one is installed.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

High

Do not use without reviewing

Fix and improve this skill with Tessl

tessl review fix ./container/skills/frontend-engineer/SKILL.md

Quality

Content

73%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 strong, actionable workflow with excellent sequencing, mandatory verification, and a clear feedback loop. Its main weakness is conciseness: it re-explains several frontend fundamentals Claude already knows rather than stating them as terse standards.

Suggestions

Compress the well-known frontend basics (semantic HTML, heading order, WCAG contrast, TypeScript-over-any) into terse bullet standards without explanatory padding to reclaim tokens.

Consider moving the detailed code-quality standards (TypeScript/React/CSS/imports) into a references file linked from a short 'Quality standards' section, keeping the build-test-verify workflow as the overview.

Replace the placeholder Vercel token and '<deployed-url>' with a note on where real values come from, or mark them explicitly as user-supplied, to keep the deploy step fully executable.

Dimension	Reasoning	Score
Conciseness	The body is well-organized but spends notable tokens restating frontend fundamentals Claude already knows ('Use TypeScript for all code', semantic HTML tags, 'One <h1> per page', '4.5:1 contrast (WCAG AA)'), which could be tightened into bare standards.	3 / 5
Actionability	Provides concrete, mostly copy-pasteable commands ('pnpm run build 2>&1', 'agent-browser screenshot desktop.png', dynamic-import snippet) with only minor gaps such as the placeholder Vercel token and '<deployed-url>'.	4 / 5
Workflow Clarity	A clear six-step 'Build Workflow' sequenced with 'Do not skip steps', an explicit mandatory visual-verification step with checklists, and an Iteration Protocol that forms a fix → rebuild → re-test → screenshot → compare feedback loop.	5 / 5
Progressive Disclosure	Well-structured with clear section headers and no nested references, and the inline standards are reasonable for a discipline skill, though the detailed TS/React/CSS standards could optionally live in a reference file to slim the overview.	4 / 5
	Total	16 / 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 clearly conveys a frontend engineering discipline with a build-test-verify workflow and strong verification language, but lacks an explicit 'Use when' trigger clause and could include more natural user-facing keywords. It is solid but not comprehensive.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger phrases (e.g., 'Use when building or fixing a website, web app, or UI; when a user asks for a responsive, accessible, or production-quality frontend').

Broaden natural trigger terms to include synonyms users actually say ('website', 'web app', 'UI', 'landing page', 'front end').

Lead with the concrete outputs the skill produces before the enforcement framing, so 'what it does' is immediately visible.

Dimension	Reasoning	Score
Specificity	Names the domain ('frontend engineering', 'web project') and lists several concrete criteria ('built, tested, responsive, accessible, and visually verified in a real browser'), but frames them as enforced standards rather than a comprehensive enumeration of the skill's actions, leaving minor gaps.	4 / 5
Completeness	The 'what' is clear ('Pro frontend engineering discipline. Enforces build-test-verify workflow'), but there is no explicit 'Use when...' trigger clause, so 'when' is only weakly implied and completeness is capped at 3 per the rubric guideline.	3 / 5
Trigger Term Quality	Includes natural terms users would say ('web project', 'responsive', 'accessible', 'browser', 'build', 'test'), but omits common variations like 'website', 'web app', 'UI', or 'landing page'.	4 / 5
Distinctiveness Conflict Risk	Frontend-specific framing ('visually verified in a real browser', 'pairs with a deployment skill such as vercel-cli') makes it mostly distinct from general coding skills, with only minor overlap risk.	4 / 5
	Total	15 / 20 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: nanocoai/nanoclaw
Path: container/skills/frontend-engineer/SKILL.md
Commit: ad8837c

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.