frontend-design

Sets the visual direction for a new or redesigned surface, with production quality that avoids generic AI aesthetics. Use when building a new page, app, or marketing surface, defining visual identity, or doing a design pass ("make this look good"). Do not load it for routine UI edits: adding a field to an existing form, fixing spacing, wiring a button, or changing copy.

Quality

96%

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 high-quality, actionable design skill body with concrete commands, tokens, and a clear verification workflow. Its only weakness is structure: it is a long monolithic document whose reference-grade detail could be progressively disclosed into separate files.

Suggestions

Move the dense reference material — motion/easing token tables in Aesthetic Guidelines and the shadcn/ui Design Rules list — into separate reference files (e.g. references/motion-tokens.md, references/shadcn-rules.md) and link to them one level deep from SKILL.md.

Split the Agent-Native UI Rules section into a dedicated reference document, keeping SKILL.md as a concise overview that points to it and to the related shadcn-ui / customizing-agent-native skills.

Tighten the Minimalism And Progressive Disclosure section, which restates the same subtract-first idea across prose, a numbered list, and a bullet list; consolidate to reduce redundancy.

Dimension	Reasoning	Score
Conciseness	Dense, opinionated rules with no basic-concept filler (no "what is Tailwind/accessibility"); every section adds distinct, Claude-doesn't-already-know guidance like specific motion tokens and shadcn adapter seams. Borderline given length, but no tokens are spent re-explaining known concepts.	3 / 3
Actionability	Fully concrete guidance throughout — executable commands (`pnpm dlx shadcn@latest add <component>`, `pnpm typecheck`, `@agent-native/toolkit/conformance`), exact token names (`var(--ease-drawer)`, `bg-background`), and named primitives to use per scenario.	3 / 3
Workflow Clarity	The Verification section gives a clear numbered sequence (formatter → dev server → browser tooling → interactive-state checks → conformance) gated by a "match effort to size" rule; design work is framed as decide-then-implement with a pre-coding checklist.	3 / 3
Progressive Disclosure	Well-sectioned and easy to navigate, but it is a single monolithic body with no bundle files and no one-level-deep reference links; reference-grade detail (motion tokens, shadcn rules, agent-native adapter specifics) is inline rather than split into separate reference files. The under-50-lines exception does not apply here.	2 / 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 tight, third-person description that states concrete capabilities, natural trigger terms, and explicit when-to-use and when-not-to-use guidance. It cleanly satisfies every dimension with no fluff or over-claims.

Dimension	Reasoning	Score
Specificity	Lists concrete actions and scenarios — "Sets the visual direction for a new or redesigned surface, with production quality that avoids generic AI aesthetics" — and enumerates specific build contexts (page, app, marketing surface) plus excluded routine edits.	3 / 3
Completeness	Explicitly answers both what (sets visual direction, production quality, avoids generic AI aesthetics) and when ("Use when building a new page, app, or marketing surface...") and adds explicit negative triggers, exceeding the anchor for a 3.	3 / 3
Trigger Term Quality	Uses natural phrases users would say — "building a new page, app, or marketing surface", "defining visual identity", "design pass (\"make this look good\")", and routine-edit terms (form, spacing, button, copy).	3 / 3
Distinctiveness Conflict Risk	A clear niche (visual direction / design pass) with distinct triggers and an explicit "Do not load it for routine UI edits" exclusion, making it unlikely to trigger for the wrong skill.	3 / 3
	Total	12 / 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
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

	Total	13 / 16 Passed

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

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.