CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Use whenever the task produces or modifies anything a user will see rendered — websites, landing pages, web apps, dashboards, React/HTML/Vue components, artifacts with visual output, style overhauls, or "make this look better" requests — even if the user never says the word "design". Covers aesthetic direction, typography, environment constraints (fonts, Tailwind, assets), and when to converge on convention instead of chasing distinctiveness.

72

Quality

88%

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

SKILL.md
Quality
Evals
Security

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, opinionated design skill with excellent actionability and a clear build/verify workflow. Its main weaknesses are mild verbosity in the persona framing and a long monolithic structure that uses no progressive disclosure.

Suggestions

Trim narrative padding (persona preamble, the Chanel anecdote, the full Tidelines plan block) to raise conciseness without losing the concrete guidance.

Consider moving the verification checklist and environment-constraints detail into a short reference file referenced one level deep, so SKILL.md reads as a lean overview.

DimensionReasoningScore

Conciseness

Assumes Claude's competence — no explaining of basic concepts (e.g., 'grep for CSS variables, Tailwind config' with no preamble) — but carries narrative padding (persona framing, the Chanel anecdote, the full Tidelines plan) that could be tightened, matching the score-2 anchor.

2 / 3

Actionability

Highly concrete and executable: real system-font stacks ('Georgia, 'Times New Roman', serif'), exact hex tokens (--ink #1B2A33), and a verification checklist with measurable thresholds ('contrast >= 4.5:1', 'tap targets >= 44px'), matching the score-3 anchor.

3 / 3

Workflow Clarity

The 'brainstorm, self-simulate, plan, build, verify' section gives a clear ordered sequence with an explicit checkpoint ('Only after the plan survives this check do you write code') and a feedback loop plus checklist, matching the score-3 anchor; not a destructive/batch operation so no cap applies.

3 / 3

Progressive Disclosure

Well-organized into clear sections but it is a monolithic single file with no one-level-deep references (none exist and none are clearly needed for an instruction-only design philosophy), so it does not meet the score-3 requirement for well-signaled external references; matches score-2.

2 / 3

Total

10

/

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.

The description is excellent: third-person, concrete, with explicit 'Use whenever...' triggers and broad natural-language coverage of design surfaces. It clearly distinguishes this skill from general frontend build skills while remaining concise.

DimensionReasoningScore

Specificity

Names the visual-design domain and multiple concrete capabilities — 'aesthetic direction, typography, environment constraints (fonts, Tailwind, assets), and when to converge on convention' — matching the score-3 anchor for listing several specific actions.

3 / 3

Completeness

Answers both halves explicitly: 'Guidance for distinctive, intentional visual design' (what) and 'Use whenever the task produces or modifies anything a user will see rendered' (when), matching the score-3 anchor.

3 / 3

Trigger Term Quality

Strong coverage of natural user phrasing — 'websites, landing pages, web apps, dashboards, React/HTML/Vue components... make this look better requests' — terms a user would actually say, matching the score-3 anchor.

3 / 3

Distinctiveness Conflict Risk

Carves a clear niche (frontend visual design) with distinctive triggers; minor overlap with generic build skills via 'dashboards/web apps' is not enough to push below 3.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
XiaomiMiMo/MiMo-Code
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.