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.

Quality

82%

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

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 content is exceptionally actionable with a concrete planning format, worked example, and verification checklist, and the workflow is clearly sequenced with validation. Its weaknesses are conciseness (atmospheric prose that could be trimmed) and progressive disclosure (a single monolithic file with no reference split).

Suggestions

Trim atmospheric framing (studio persona elaboration, Chanel quote, aphoristic restatements) to reduce token load while preserving the concrete guidance.

Split environment constraints and the copywriting guidance into referenced files (e.g. references/environment.md, references/copy.md) so SKILL.md stays a lean overview with one-level-deep navigation.

Consider moving the worked Tidelines plan example to a reference file, keeping only the plan format shape inline as the anchor.

Dimension	Reasoning	Score
Conciseness	The body is intelligent and largely non-padded, but at ~118 lines it includes atmospheric prose and repeated framing (e.g. the studio persona, Chanel quote, several 'the X is the Y' aphorisms) that could be tightened without losing guidance.	3 / 5
Actionability	Highly actionable: a concrete token-system plan format with a fully worked fictional example (Tidelines), explicit environment constraints (font fallbacks, Tailwind limits, specificity rules), and a runnable verification checklist with specific thresholds (4.5:1 contrast, 44px tap targets).	5 / 5
Workflow Clarity	Clear two-pass process (plan, then self-simulate and revise) with an explicit validation checkpoint (the 'defaults check' against generic briefs) and a verification checklist run before presenting, plus error-recovery guidance for weak existing systems.	5 / 5
Progressive Disclosure	No bundle files exist and the skill is a single monolithic 118-line SKILL.md with no references; it is well-sectioned but inlines content (environment constraints, design principles, copywriting) that could live in separate files, and signals no external references at all.	3 / 5
	Total	16 / 20 Passed

Description

90%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 strong: it covers what the skill does and when to use it with rich natural trigger terms and even handles the case where the user never says 'design'. It is mostly distinct, with only minor overlap risk from its broad rendered-surface scope.

Dimension	Reasoning	Score
Specificity	Lists several specific action areas (aesthetic direction, typography, environment constraints, when to converge on convention) but stays at the category level rather than naming concrete manipulations, leaving minor coverage gaps.	4 / 5
Completeness	Explicitly answers 'what' (distinctive, intentional visual design direction) and 'when' via the 'Use whenever the task produces or modifies anything a user will see rendered' clause with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive natural trigger terms including 'websites, landing pages, web apps, dashboards, React/HTML/Vue components', 'make this look better', and 'design' with explicit synonyms, covering how users actually phrase such requests.	5 / 5
Distinctiveness Conflict Risk	Clear niche (visual design / aesthetic direction) with distinct triggers, though the broad surface of 'anything a user will see rendered' creates minor overlap risk with general frontend or component skills.	4 / 5
	Total	18 / 20 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: XiaomiMiMo/MiMo-Code
Path: packages/opencode/src/skill/builtin/.bundle/frontend-design/SKILL.md
Commit: ec3f989

Reviewed: 3 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.