CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

57

Quality

72%

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 ./builtin-skills/skills/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 content is a well-structured, opinionated design guide with concrete deliverables and a clear two-pass workflow including critique feedback loops. Its main weakness is the closing writing section, which re-explains generic UX-writing conventions Claude already knows and could be trimmed or split off.

Suggestions

Trim or condense the 'More on writing in design' section to only the non-obvious, design-specific guidance, dropping general rules (active voice, plain terms, 'errors don't apologize') Claude already applies.

Tighten the workflow into an explicit validate→fix→retry checklist (e.g., a numbered 'review plan against brief → revise → build → screenshot → self-critique → revise') to push workflow clarity to the top anchor.

Add one short worked example (e.g., a sample token system + signature for a named brief) to make the actionability fully copy-paste ready.

DimensionReasoningScore

Conciseness

The body is mostly efficient and much of the opinionated guidance earns its place (the three AI-default looks, the two-pass token system, the CSS-specificity warning), but the 'More on writing in design' section explains generic UX-writing concepts Claude already knows (active voice, plain terms, error tone), fitting the 'mostly efficient but includes some unnecessary explanation' anchor.

3 / 5

Actionability

It gives concrete, actionable deliverables — a token system with '4–6 named hex values', typefaces for 2+ roles, ASCII wireframes, and a 'signature' element — plus a defined two-pass process and a specific CSS selector-specificity warning, but it stops short of a fully worked example, matching 'mostly executable guidance with minor gaps'.

4 / 5

Workflow Clarity

The 'brainstorm, explore, plan, critique, build, critique again' process and the explicit two-pass sequence (plan, review against the brief, revise, then build) provide clear sequencing with review/self-critique feedback loops, but the checkpoints are described in prose rather than as an explicit validate→fix→retry checklist, fitting the 'clear sequence with most checkpoints present' anchor.

4 / 5

Progressive Disclosure

The body is organized into well-labeled topical sections (Ground it in the subject, Design principles, Process, Restraint and self-critique, More on writing) with no nested or multi-level references, and no external bundle files are needed, so the simple-skill well-organized-sections exception applies.

5 / 5

Total

16

/

20

Passed

Description

62%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 communicates a distinctive visual-design niche with both a what and a when, but its actions are phrased as guidance rather than concrete operations and it omits an explicit 'Use when...' trigger clause with synonyms. Third-person voice is correctly used throughout.

Suggestions

Add an explicit 'Use when...' clause with concrete trigger phrases and synonyms (e.g., 'Use when building or redesigning a UI, choosing a palette or type pairing, or when a design feels templated or generic').

Replace abstract guidance verbs with more concrete deliverables (e.g., 'define a color palette, pair display and body typefaces, lay out a hero, and specify a signature element') to lift specificity.

Include natural synonyms users say ('redesign', 'rebrand', 'restyling', 'visual identity', 'design system') to broaden trigger coverage.

DimensionReasoningScore

Specificity

Names the domain (visual design for UI) and a couple of concrete areas ('aesthetic direction, typography'), but the phrasing is guidance-oriented rather than a comprehensive list of concrete actions, so it sits at the 'names domain and 1-2 concrete actions' anchor rather than the multi-action anchor above.

3 / 5

Completeness

It states both what ('Guidance for distinctive, intentional visual design... Helps with aesthetic direction, typography') and when ('when building new UI or reshaping an existing one'), but the 'when' is embedded mid-sentence rather than a clean explicit trigger clause, fitting the 'has both what and when; when could be more explicit' anchor.

4 / 5

Trigger Term Quality

It includes relevant natural terms ('visual design', 'building new UI', 'typography', 'aesthetic direction') but lacks common synonyms and variations users might say, matching the 'some relevant keywords but missing common variations' anchor rather than the comprehensive anchor.

3 / 5

Distinctiveness Conflict Risk

'Distinctive, intentional visual design when building new UI' carves a clear niche with minor overlap risk against closely related design/dataviz skills, matching 'mostly distinct; minor overlap risk' rather than the fully distinct anchor.

4 / 5

Total

14

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
iflytek/skillhub
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.