CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

68

Quality

82%

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

65%

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

The body is highly actionable and well-structured, especially the email/Outlook rendering constraints which provide rare, specific reference detail. Its main weaknesses are a slightly padded design-philosophy opening, absent validation checkpoints, and a monolithic structure where the email reference could live in a separate file.

Suggestions

Move the Email & Outlook Rendering section into a references/EMAIL-OUTLOOK.md file and replace it with a one-line pointer, reducing the inline body to the core design guidance.

Trim the opening prose and the Design Thinking Q&A framing to directive statements (e.g., 'Pick one bold aesthetic direction and execute it precisely') to improve token efficiency.

Add a brief verification step for the general (non-email) path, such as checking responsiveness across desktop/tablet/mobile before finalizing output, to add an explicit checkpoint to the workflow.

DimensionReasoningScore

Conciseness

The Outlook CSS/HTML support tiers and unsupported-property lists are dense, non-obvious reference material that earns its tokens, but the opening design-philosophy prose ("This skill guides creation of distinctive, production-grade frontend interfaces...") and the Design Thinking Q&A framing could be tightened.

2 / 3

Actionability

Guidance is concrete and copy-paste ready: exact element CSS tiers (CORE/COREEXTENDED/FULL), explicit unsupported lists, "Set width as an HTML attribute", "design for a fixed width of 600px", "Use inline styles only". Per the scoring notes, code absence in an instruction-only skill is not penalized when guidance is this actionable.

3 / 3

Workflow Clarity

A light sequence exists ("Before coding, understand the context..." then "Then implement working code") plus a clear email-vs-general override branch, but there are no validation or verification checkpoints. This is acceptable for a non-destructive design skill yet sits just below the explicit-checkpoint bar.

2 / 3

Progressive Disclosure

No bundle files exist and the SKILL.md is a single ~96-line document. Sections are well-organized with clear headings, but the detailed Email & Outlook Rendering reference (CSS tiers, unsupported lists) is inline content that would benefit from being split into a one-level-deep reference file.

2 / 3

Total

9

/

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 concise, specific, and answers both what it does and when to use it with an explicit 'Use this skill when' trigger. It uses third-person voice and natural trigger terms with low conflict risk.

DimensionReasoningScore

Specificity

"generating reports, tables, or email output to produce polished, self-contained, responsive HTML" lists multiple specific concrete actions and output types, matching the score-3 anchor.

3 / 3

Completeness

It states both what ("produce polished, self-contained, responsive HTML") and when ("Use this skill when generating reports, tables, or email output") with an explicit trigger clause.

3 / 3

Trigger Term Quality

"reports, tables, or email output" are natural terms a user would say when requesting this skill, giving good coverage of common phrasings.

3 / 3

Distinctiveness Conflict Risk

The HTML/report/table/email-output niche with explicit triggers is clearly distinguishable and unlikely to fire for unrelated skills.

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
microsoft/agent-academy
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.