CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend

Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain way.

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Failed to scan

The risk profile of this skill

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 body is an unusually disciplined router: a sequenced five-phase workflow with real validation gates, executable lint/detect/Lighthouse commands, and hard numeric build rules. Its one material defect is bundle integrity — the majority of the Layer A style skills it routes to, plus the whole ui-ux-db subtree, are absent, so the routing table promises files that do not resolve; secondary costs are duplicated descriptions of the reference library and one command targeting a missing script.

Suggestions

Restore or delete the missing referenced files — 15 design references (most Layer A taste skills, output-/stitch-/imagegen-*) and the entire ui-ux-db/ directory (README.md and scripts/search.py) are named in SKILL.md but absent from the bundle; every path in the routing table and Layer A/Layer B lists should resolve.

Remove or gate the ui-ux-db CLI commands (python3 -B $SKILL_DIR/references/ui-ux-db/scripts/search.py ...) until that script ships, since the command as written fails.

Trim the overlap between the routing table, the Layer A table, and "The reference library" section, which each describe the same files, and cut the Activation section that restates the frontmatter description.

DimensionReasoningScore

Conciseness

The body is dense, rule-first, and assumes Claude's competence — no explanations of concepts Claude already knows, and every line states a rule, threshold, or route. Not a 5: the routing table, Layer A table, and reference-library section each re-describe the same reference files, and the Activation section restates the frontmatter description — all trimmable duplication.

4 / 5

Actionability

Gives copy-paste-ready commands ("bun $SKILL_DIR/scripts/perfection/check-draft-guard.ts", "detectPage({ kind: \"url\", url }, { reflow: true })", "uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py") and hard numeric thresholds (44x44, 24x24, 4.5:1, 1.25x, 65-75 chars). Not a 5: the ui-ux-db search CLI command points at references/ui-ux-db/scripts/search.py, which does not exist in the bundle, so that command is not actually executable.

4 / 5

Workflow Clarity

A clear sequenced flow (ground -> brief -> build -> subtract -> verify) with explicit validation checkpoints and feedback loops: "Lint before visual QA" with "Exit 1 means a tell is in the draft: remove it", "Fix every error and warning before /visual-qa", a one-row-per-check WCAG 2.2 AA evidence table, and a bounded review loop. Matches the top anchor with checklist and error-recovery loops.

5 / 5

Progressive Disclosure

The router design itself is exemplary — a request-to-reference table, one-level-deep references, and "read exactly those" discipline — but scored against the actual bundle, 15+ named files are missing: most Layer A taste skills (taste-skill.md, minimalist-skill.md, soft-skill.md, gpt-tasteskill.md, brutalist-skill.md, redesign-skill.md, image-to-code-skill.md, output-skill.md, stitch-skill.md), all imagegen-* files, and the entire ui-ux-db/ directory. Not a 4: navigation through the core Layer A routing breaks for most named paths, which is more than a minor organization gap.

3 / 5

Total

16

/

20

Passed

Description

80%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 description: concrete artifact coverage, explicit third-person what-and-when structure with usable trigger phrases. Its main weaknesses are missing common trigger synonyms ("design", "redesign", "frontend") and an artifact scope broad enough to collide with charting, slides, and image skills.

Suggestions

Add the natural trigger words users actually say — "design", "redesign", "polish", "frontend" — to the Use-for clause.

Narrow the artifact claim (figures, slides, images) or scope it with a styling/visual-quality qualifier to reduce overlap with charting, presentation, and image-generation skills.

DimensionReasoningScore

Specificity

"Builds, styles, and polishes" plus a concrete artifact list ("web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack") names several specific capabilities. Not a 5: the verbs are broad strokes and auditing/redesigning (covered in the body's Activation) are absent, leaving minor gaps in coverage.

4 / 5

Completeness

Explicitly answers both: what ("Builds, styles, and polishes anything drawn with HTML, CSS, or SVG...") and when ("Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain way"). The when-clause carries multiple concrete trigger phrases, matching the top anchor; a 4 would require the when to be less explicit than it is.

5 / 5

Trigger Term Quality

Natural user phrases are present: "styling, layout, animation, or visual-quality task" and "make something look or feel a certain way", plus "web UI" and artifact terms. Not a 5: common trigger words users actually say such as "design", "redesign", "polish", and "frontend" are missing.

4 / 5

Distinctiveness Conflict Risk

The styling/visual-quality framing is a recognizable niche, but the claim spans "anything drawn with HTML, CSS, or SVG" including figures, diagrams, slides, and images, which overlaps charting/dataviz, presentation, and image-generation skills. Not a 4: the artifact breadth creates real overlap risk with closely related skills rather than minor risk.

3 / 5

Total

16

/

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: 4 missing, 28 deeper-than-1-level

Warning

Total

15

/

16

Passed

Repository

code-yeongyu/oh-my-openagent

Path

packages/shared-skills/skills/frontend/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.