CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

web-design-engineer

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.

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

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

This is a high-quality, deeply actionable skill body with an exceptionally clear workflow (checkpoints, verification checklist, critique rubric) and well-designed progressive disclosure into a verified reference bundle. The main costs are token efficiency: some standard-knowledge sections and repeated rules could be consolidated, and the long always-loaded body could shed more detail to its references. Weighted score 4.25 of 5.

Suggestions

Consolidate the placeholder/no-fabricated-data rules, which currently appear in the cliché table, Placeholder Philosophy, Content Principles, and the Pre-delivery Checklist, into one canonical section and have the checklist reference it by name.

Trim or relocate standard-knowledge sections ("Aim to Stun", "Appropriate Scale", and generic CSS practices like clamp() and prefers-color-scheme) into a reference file, keeping only the skill-specific constraints (no scrollIntoView, no `const styles`, namespacing rules) inline.

Move the full six-row school-library table into references/design-directions.md (which already serves as the school taxonomy), keeping 2–3 sample rows inline in the Design Direction Advisor section to shorten the always-loaded body.

DimensionReasoningScore

Conciseness

The bulk is expert, non-obvious guidance (asset protocol, calibration dials, iframe/Babel hard rules), but sections like "Aim to Stun", the "Appropriate Scale" table, and generic CSS practices (clamp(), prefers-reduced-motion) restate knowledge Claude already has, and the placeholder/no-fabricated-data rules are repeated across the cliché table, Placeholder Philosophy, Content Principles, and the checklist. Mostly efficient with some unnecessary explanation and tightening opportunities matches anchor 3; not 2 because padding is localized rather than pervasive.

3 / 5

Actionability

Guidance is fully executable for an instruction-only skill: concrete templates (Design Read YAML block, Design Decisions markdown block), exact URLs (Popmotion pinned CDN, Chart.js, D3 v7), quantified thresholds (title/body ≥ 2.5×, ≤ 4 colors, ≤ 2 font families, 1920×1080 canvas), and specific code fixes (`Object.assign(window, { Terminal, Line })`, `element.scrollTop = ...`). Matches the anchor for fully executable, copy-paste-ready guidance covering common cases.

5 / 5

Workflow Clarity

Steps 0–7 are clearly sequenced with three explicit 🛑 checkpoints (with "actually wait" reinforcement), a Step 6 verification phase plus a pre-delivery checklist, a Step 7 critique rubric with scoring, and a repair feedback loop in the browser-acceptance path ("report evidence and repair failures before delivery"). Matches the anchor for clear sequence with explicit validation steps and checklists.

5 / 5

Progressive Disclosure

Structure is strong: a References Routing table maps each task type to one of 8 reference files plus 26 recipe files (all verified to exist), references are one level deep, and the body repeatedly instructs loading only the single needed file. It falls short of anchor 5 because the always-loaded 492-line body still inlines substantial content (the full school-library table, the complete 8-row cliché table) that could partially live in the already-existing design-directions.md and failure-patterns.md references.

4 / 5

Total

17

/

20

Passed

Description

92%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 names the medium and technologies, enumerates the deliverable types, gives an explicit "Use for" trigger clause, and adds negative scope to prevent mis-triggering. The only minor gap is a few missing natural synonyms such as "landing page" or "website". Weighted score 4.7 of 5.

DimensionReasoningScore

Specificity

"Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations" lists multiple concrete actions (build, redesign, critique, QA) across a comprehensive enumeration of artifact types and technologies. This matches the anchor for multiple specific concrete actions with comprehensive coverage; it is not score 4 because there are no significant coverage gaps.

5 / 5

Completeness

It explicitly answers both what ("Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes...") and when ("Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact"), plus explicit negative triggers ("Not for back-end, CLI, non-visual coding..."). This clearly matches the anchor for explicit what AND when with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural trigger terms are well covered — "pages", "dashboards", "prototypes", "slide decks", "animations", "UI mockups", "data visualizations", "design critique", "QA" — but a few common user phrasings are missing (e.g., "landing page", "website", ".html"). Good coverage with a few natural terms missing matches anchor 4; not 5 because synonym/file-extension-level completeness is absent.

4 / 5

Distinctiveness Conflict Risk

A clear visual front-end niche is combined with explicit exclusions ("Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations") that route adjacent request types away. Minimal conflict risk, matching the anchor for a clear niche with distinct triggers.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 7 deeper-than-1-level

Warning

Total

15

/

16

Passed

Repository

ConardLi/garden-skills

Path

skills/web-design-engineer/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.