CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-artifact

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

Quality

84%

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

63%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.

A rich, opinionated, and largely actionable design directive whose main weaknesses are ornate prose that competes with the token budget and a monolithic structure that inlines conditionally-needed editorial guidance instead of progressively disclosing it.

Suggestions

Trim the persona and editorial flourishes (e.g. 'The question is never whether to design…', 'picture a client who has already thrown out every proposal that felt canned') to direct guidance, reducing tokens without losing substance.

Move the 'When the request is editorial' section into a separate reference file (e.g. references/editorial.md) and link to it, since the body itself says it only applies conditionally — this improves progressive disclosure and keeps the base skill lean.

Replace the prose description of the dark-mode token pattern with a concrete CSS code block showing :root tokens, the @media (prefers-color-scheme: dark) reassignment, and the :root[data-theme=...] overrides, so the core pattern is copy-paste ready.

DimensionReasoningScore

Conciseness

Most sentences carry real guidance, but the literary persona framing and editorial flourishes ('The question is never whether to design…', 'picture a client who has already thrown out every proposal that felt canned') add padding that could be tightened.

3 / 5

Actionability

Concrete, specific guidance throughout (embed @font-face data URIs, ~65-char measure, text-wrap: balance, tabular-nums, the dark-mode token pattern, tot CLI commands), but the core CSS token pattern is described in dense prose rather than shown as a copy-paste code block.

4 / 5

Workflow Clarity

A clear sequence (design plan → build → editorial originality audit → ship) with explicit gates (the originality check before coding; consent before publishing), though described in prose rather than crisp numbered checkpoints.

4 / 5

Progressive Disclosure

Well-organized into sections, but it is a single ~150-line file with no bundle references, and the 'When the request is editorial' section is self-described as only conditionally needed — a strong candidate for a separate reference file that is currently inlined.

3 / 5

Total

14

/

20

Passed

Description

96%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.

A strong, specific description that clearly states both capability and trigger conditions in natural language, with a distinctive anti-generic-AI hook. Its only weakness is the breadth of 'any visual HTML deliverable,' which carries slight overlap risk with adjacent skills.

DimensionReasoningScore

Specificity

Names the domain (HTML artifacts) and enumerates concrete deliverable types (pages, reports, plans, landing pages, demos, decks, small tools) plus concrete design decisions (palette, type pairing, layout, theming, register) — comprehensive coverage.

5 / 5

Completeness

Explicitly answers both 'what' (design principles and creative direction for building HTML artifacts) and 'when' (an explicit 'Use when…' clause with concrete trigger conditions).

5 / 5

Trigger Term Quality

Uses natural user phrasings — 'landing pages', 'palette', 'type pairing', 'theming', 'creating or restyling', and the distinctive 'must not look generically AI-generated' — that a user would actually say.

5 / 5

Distinctiveness Conflict Risk

The creative-direction framing and the 'must not look generically AI-generated' trigger give it a clear niche, but 'any visual HTML deliverable' is broad enough for minor overlap with general web or brand skills.

4 / 5

Total

19

/

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

plannotator/effective-html

Path

skills/design-artifact/SKILL.md

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.