CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Use this skill when generating reports, tables, or email output to produce polished, self-contained, responsive HTML.

57

Quality

65%

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 ./docs/cowork-collective/badge-check/assets/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

68%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-organized, unusually specific set of directives whose Outlook compatibility rules are genuinely non-obvious and earn their tokens. Its weakest point is workflow clarity — the design-to-implementation flow has no validation checkpoints (e.g., checking output against the unsupported-CSS list or testing responsiveness), and the email compatibility matrices would sit better in a reference file.

Suggestions

Add explicit validation checkpoints to the workflow, e.g., after generating email HTML: 'Scan the output against the unsupported CSS/HTML lists above; fix any hits before delivering' and 'Confirm no <style> blocks, var(--x), or external fonts remain'.

Include a minimal copy-paste Outlook-safe email skeleton (outer width="100%" table wrapping a width="600" table with bgcolor and inline styles) so the email rules are executable on first use.

Move the CORE/COREEXTENDED/FULL support matrices and unsupported lists into references/outlook-css-support.md, keeping SKILL.md as the overview with a clearly signaled pointer.

DimensionReasoningScore

Conciseness

The body is dense and directive throughout — "Use table-based layouts", "No CSS variables (var(--x)) — Outlook ignores them entirely", and enumerated unsupported-CSS/HTML lists convey hard-won, non-obvious compatibility facts without padding. Minor trimmable spots remain: the rhetorical framing in Design Thinking ("What makes it UNFORGETTABLE?") and the wordy "one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions" sentence, so it is efficient with minor over-explanation rather than lean at anchor 5.

4 / 5

Actionability

Guidance is concrete and executable in the main: exact attributes ("Set border=\"0\" on layout tables", "fixed width of 600px", "bgcolor on <table>, <tr>, and <td>"), a web-safe font list, and explicit do-not-use lists for CSS and HTML. It stops short of anchor 5 because there is no copy-paste-ready example (e.g., a minimal Outlook-safe email HTML skeleton) covering the common case.

4 / 5

Workflow Clarity

The sequence is present — understand context, commit to an aesthetic direction, implement working code, then override for email — but there are no validation checkpoints or feedback loops anywhere (no 'verify the output renders responsively', no 'confirm no unsupported CSS remains before sending the email'). That matches the anchor for steps listed with missing checkpoints; it does not reach anchor 4's 'most checkpoints present'. The destructive/batch cap does not apply since this skill generates output rather than modifying data.

3 / 5

Progressive Disclosure

No bundle files exist and the body uses clear, well-organized sections (## Design Thinking, ## Frontend Aesthetics Guidelines, ## Email & Outlook Rendering with focused subsections) that are easy to navigate, which fits anchor 4's good structure with minor organization gaps. It is not anchor 5 because at ~96 lines the detailed Outlook CSS-support matrices (CORE/COREEXTENDED/FULL lists, unsupported-element tables) are exactly the reference material that could be split into a references/outlook-compat.md file rather than inlined.

4 / 5

Total

15

/

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 is concise, in third person, and clearly states both what the skill does and when to use it, which places it above average. Its main weakness is narrow trigger coverage and a single-action capability statement that limits specificity and could miss common invocations like building web pages or dashboards.

Suggestions

List the concrete capabilities the skill provides beyond 'produce HTML' — e.g., 'generates responsive single-file HTML pages, styled report layouts, data tables, and Outlook-compatible email templates'.

Broaden trigger terms with natural synonyms users would say: 'HTML report', 'email template', 'landing page', 'web page', 'dashboard', '.html file'.

Add a user-mention trigger clause such as 'or when the user asks for polished HTML output, an HTML email, or a self-contained web page' to strengthen the 'when' half.

DimensionReasoningScore

Specificity

The description names the domain (HTML output) and essentially one concrete action — "produce polished, self-contained, responsive HTML" — across three output types ("reports, tables, or email output"). It does not list multiple distinct actions like the anchor-4 example ("Extracts text..., fills forms, converts pages..."), and "polished" is closer to vague fluff than a concrete capability, so it sits at the 1-2-actions anchor rather than above it.

3 / 5

Completeness

Both parts are present: what ("produce polished, self-contained, responsive HTML") and when ("Use this skill when generating reports, tables, or email output"). It is not a 5 because the 'when' clause covers only three narrow contexts and lacks the richer trigger phrasing of the anchor-5 example (e.g., "or when the user mentions...").

4 / 5

Trigger Term Quality

"reports", "tables", and "email" are natural terms users would say, but coverage is narrow — no synonyms or common variations such as "web page", "landing page", "frontend", "UI", "dashboard", or "HTML file". This matches the anchor for some relevant keywords missing common variations rather than anchor 4's good coverage with only a few gaps.

3 / 5

Distinctiveness Conflict Risk

The combination "reports, tables, or email output to produce ... responsive HTML" carves a fairly clear niche with distinct triggers. There is minor overlap risk with closely related skills (e.g., general web development or dataviz skills that also produce HTML tables/reports), which keeps it from anchor 5.

4 / 5

Total

14

/

20

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.

Validation — 16 / 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.