frontend-design

Sets the visual direction for UI work, avoiding generic AI aesthetics. Use for any user-facing UI change: new surfaces, screenshot-driven feedback, copy/density cleanup, settings, control placement, or a "make this look good" pass. Do not load it only for purely mechanical wiring or formatting.

Quality

75%

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 ./.agents/skills/frontend-design/SKILL.md

Quality

Content

75%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 dense, repo-specific instruction set that scores well on actionability and workflow clarity thanks to concrete commands, tokens, and sequenced review/verification steps. It is concise for its domain though some general principles are restated and the density message recurs across sections.

Suggestions

Trim restatements of general principles Claude already knows (e.g. basic accessibility maxims, generic 'match the workflow' composition advice) to tighten the body.

Consolidate the repeated density/no-chrome guidance so the rule appears once with cross-references rather than across multiple sections.

Add an explicit validate->fix->retry loop to the Product Surface Review checklist to push workflow clarity to the top anchor.

Dimension	Reasoning	Score
Conciseness	Most content is genuinely non-obvious, repo-specific guidance (exact token names like var(--ease-drawer), guard:guard:no-default-chrome, specific path conventions), so tokens largely earn their place; a few sections restate principles Claude already knows (general composition and accessibility maxims) and the density theme is repeated across sections.	4 / 5
Actionability	Highly concrete and executable: specific commands (pnpm dlx shadcn@latest add <component>), exact CSS variables, named hooks (useActionQuery/useActionMutation), and the step-by-step 'approved shape' walkthrough; minor gaps where guidance stays principle-level rather than copy-paste.	4 / 5
Workflow Clarity	Provides explicit sequenced workflows (Design Thinking decision steps, Product Surface Review checklist, numbered Verification with escalation logic and interactive-state checks); the review checklist lacks an explicit error-recovery feedback loop, keeping it just below the top anchor.	4 / 5
Progressive Disclosure	Uses one clearly-signaled, one-level-deep reference (references/visual-direction.md, cited twice with its purpose stated) and a Related Skills pointer list, with well-organized section headers; the body is long enough that some inline guidance could arguably be split out, a minor organization gap.	4 / 5
	Total	16 / 20 Passed

Description

75%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 well-constructed: it states a clear purpose, lists concrete use-case triggers in natural language, and adds a negative trigger to avoid misuse. It sits solidly above the midpoint on every dimension but stops short of the top anchor on breadth and synonym coverage.

Suggestions

Add a few common synonyms to broaden trigger matching (e.g. 'restyle', 'redesign', 'retheme', 'UI polish').

Consider explicitly naming 'new app or page' and 'dashboard' as triggers, since the body emphasizes those surfaces.

Dimension	Reasoning	Score
Specificity	Names a concrete domain (visual direction for UI) and several specific actions ('screenshot-driven feedback, copy/density cleanup, settings, control placement') plus an explicit product goal ('avoiding generic AI aesthetics'); just short of comprehensive multi-action coverage.	4 / 5
Completeness	Explicitly answers both what ('Sets the visual direction for UI work, avoiding generic AI aesthetics') and when ('Use for any user-facing UI change: ...') with concrete triggers, plus a negative trigger ('Do not load it only for purely mechanical wiring or formatting'); 'when' is concrete but slightly less exhaustive than the top anchor.	4 / 5
Trigger Term Quality	Includes natural phrases users actually say ('make this look good', 'screenshot-driven feedback', 'copy/density cleanup', 'control placement') with good keyword coverage; a few synonyms (e.g. 'restyle', 'redesign', 'theme') are not present.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (visual design direction / anti-generic-AI-aesthetics) distinct from sibling skills like shadcn-ui and customizing-agent-native, with minor overlap risk only against those closely related skills.	4 / 5
	Total	16 / 20 Passed

Validation

75%

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

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
referenced_paths_exist	Referenced path issues: 1 missing	Warning

	Total	12 / 16 Passed

Repository: BuilderIO/agent-native
Path: .agents/skills/frontend-design/SKILL.md
Commit: d477ebc

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.