CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

64

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

78%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.

An exceptionally dense, opinionated, and executable rulebook: almost nothing is background knowledge Claude already has, and the verification procedure is concrete. The weaknesses are structural repetition across the density-related sections and a 335-line monolithic body that should offload the shadcn and agent-surface rulebooks to reference files the way it already offloads visual direction.

Suggestions

Move the shadcn/ui Design Rules and Agent Surface And Page Boundary sections into a references/ file (e.g., references/shadcn-rules.md and references/agent-surface.md), keeping a 2-3 line summary plus a clearly signaled link in SKILL.md, as is already done with references/visual-direction.md.

Deduplicate the density rules: the 'title or description, never both', 'no more than four visible choices', and nested-cards rules each appear in 2-3 sections (first-viewport budget, Default Surface Density, Product Surface Review, Anti-Patterns) — state each rule once and cross-reference it.

Make the implementation throughline explicit: after the one-line contract step, add a short ordered sequence (pick direction -> build smallest cohesive surface -> run Product Surface Review checklist -> run Verification) so the thematic sections read as stages of one workflow.

DimensionReasoningScore

Conciseness

Nearly every token is product-specific knowledge Claude cannot infer (repo easing tokens like `var(--ease-collapse)`, `guard:no-default-chrome`, `sendToAgentChat` contracts, Tabler icon verification), with no filler explanations of concepts Claude already knows. It misses anchor 5 because rules repeat across sections: the "title or description, never both" and four-visible-choices rules each appear in roughly three places (first-viewport budget, Default Surface Density, Product Surface Review, Anti-Patterns).

4 / 5

Actionability

Guidance is copy-paste executable throughout: `pnpm dlx shadcn@latest add <component>`, grepping `node_modules/@tabler/icons-react/dist/tabler-icons-react.d.ts` for an exact icon name, token names with timings (`var(--ease-drawer)` 260ms), `ease-[var(--ease-collapse)]` in Tailwind, and concrete primitive choices (Switch for binary, ToggleGroup for small option sets). This matches anchor 5: specific examples cover the common cases.

5 / 5

Workflow Clarity

There is a clear pre-coding checkpoint (write the `<mode> / <user> / <job> / <next action>` contract before implementing) and a numbered 6-step verification procedure with escalation criteria, state checks (hover, focus, loading, empty, error), and a conformance gate for adapter changes. It stops short of anchor 5 because the implementation phase between contract and verification is organized thematically rather than as one coherent sequence, so a reader assembles the throughline from separate sections.

4 / 5

Progressive Disclosure

The one bundle reference (`references/visual-direction.md`) is real, well-signaled, and exactly one level deep, cited both in the Visual Direction Contract and Verification sections. But the 335-line body inlines entire rulebooks that belong in separate reference files (shadcn/ui design rules, agent surface and page boundary rules, anti-patterns), and the Related Skills list confirms sibling skills exist, so this matches anchor 3 (content that should be separate is inline) rather than anchor 4.

3 / 5

Total

16

/

20

Passed

Description

78%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.

A strong description with an explicit what, an enumerated and colloquial trigger list, and a rare asset: an explicit load-exclusion clause that sharpens triggering. The main weakness is that the capability statement is goal-level rather than enumerating the concrete design actions the body actually covers.

DimensionReasoningScore

Specificity

"Sets the visual direction for UI work, avoiding generic AI aesthetics" names the domain plus one concrete behavior, but the 'what' stays at the goal level rather than listing several concrete actions. It matches anchor 3 (domain + 1-2 concrete actions) rather than anchor 4, which expects several specific actions listed.

3 / 5

Completeness

It 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 trigger phrases plus an explicit exclusion clause ("Do not load it only for purely mechanical wiring or formatting"). This fully matches the anchor-5 example; anchor 4's caveat about a less-explicit 'when' does not apply.

5 / 5

Trigger Term Quality

"new surfaces, screenshot-driven feedback, copy/density cleanup, settings, control placement, or a 'make this look good' pass" covers natural phrases a user would actually say, including the colloquial "make this look good". It falls short of anchor 5 because common synonyms like "polish", "restyle", or "redesign" are absent.

4 / 5

Distinctiveness Conflict Risk

The visual-direction/anti-generic-aesthetic niche is distinct and the exclusion clause reduces false triggers, but "any user-facing UI change" is broad enough to overlap with the closely related shadcn-ui skill referenced in the body. Mostly distinct with minor overlap risk, matching anchor 4 rather than the minimal-conflict anchor 5.

4 / 5

Total

16

/

20

Passed

Validation

75%

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

CriteriaDescriptionResult

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
Reviewed

Table of Contents

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.