CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend

Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.

65

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

75%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 strong router-style SKILL.md: executable commands, explicit gates, verified one-level references, and no padding with known concepts. The main deductions are redundancy across the three overlapping route tables and a few workflow steps that defer their mechanics without pointing at a concrete command.

Suggestions

Collapse the overlapping route tables (Phase 0, Layer A, Quick routes) into a single authoritative routing table plus one 'when to load something else' section — interaction, ambience, and print rows currently appear in up to three places.

For steps that defer mechanics, name the owning artifact inline (e.g., the exact tool or command for "generate 2-3 imagen concept drafts", or the exact sub-command in the referenced file) so each step is executable without re-reading the target reference.

State the /visual-qa validation pass inline as a numbered final step of the implementation workflow rather than only as an axiom and a table row, making the workflow's terminal checkpoint impossible to miss.

DimensionReasoningScore

Conciseness

The body is dense, assumes Claude's competence, and teaches no known concepts — every line is a routing decision. It falls short of 5 because routing rules for interaction, ambience, and print work are repeated across three overlapping tables (Phase 0, Layer A, Quick routes), and the 'AI-slop / senior-designer bar' mandate is restated several times in slightly different words.

4 / 5

Actionability

Concrete, copy-paste commands are present ("uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000", the ui-ux-db search CLI with flags and domain/stack lists), plus a numbered branching workflow and a STOP-and-ask path. It misses 5 because some steps defer without any command — e.g., "generate 2-3 imagen concept drafts" gives no invocation or tool pointer.

4 / 5

Workflow Clarity

The sequence (route → read references → gates → DESIGN.md → implement → QA) is clear, with explicit checkpoints (Design System Gate, Primitive Showcase Gate, Research Log accountability) and audit discipline (production build, 3-5 runs, take the median). It stays at 4 because validation mechanics are largely delegated to referenced files (/visual-qa, README phases) rather than stated inline, and the Phase-0 table and the Design System Workflow branches overlap enough that a reader must reconcile two routing systems.

4 / 5

Progressive Disclosure

This is genuinely a router: all referenced files exist in the bundle, are one level deep, and are clearly signaled with 'Read when' columns. Not 5 because the same routing rows are duplicated across three tables instead of split cleanly, and designpowers/README.md routes into a nested vendor corpus (vendor/skills/..., vendor/agents/...) that sits two-plus levels below SKILL.md.

4 / 5

Total

16

/

20

Passed

Description

83%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 well-formed description with a clear what, an explicit 'Use for…' trigger clause, and natural user-facing keywords. Its only weaknesses are broad-abstract action verbs and a few missing common synonyms (e.g., CSS, redesign), which keep specificity and trigger coverage just below the top anchors.

DimensionReasoningScore

Specificity

"Builds, styles, and polishes web UI and UX" names the domain plus three concrete actions, matching the 'several specific actions; minor gaps' anchor. It is above 3 because more than 1-2 actions are listed, but below 5 because the action coverage is broad-abstract rather than the comprehensive enumeration the 5 anchor shows.

4 / 5

Completeness

It explicitly answers both: what it does ("Builds, styles, and polishes web UI and UX") and when to use it ("Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way") with concrete trigger phrases, matching the 5 anchor.

5 / 5

Trigger Term Quality

"frontend, page, component, styling, layout, animation, or visual-quality task" and "make an interface look or feel a certain way" are natural user phrasings, giving good keyword coverage. It sits at 4 rather than 5 because common synonyms like "CSS", "redesign", "landing page", or "responsive" are missing.

4 / 5

Distinctiveness Conflict Risk

The frontend/UI niche is clearly carved out with distinct triggers, but phrases like "visual-quality task" and "look or feel" are broad enough to risk minor overlap with closely related design or visualization skills. Mostly distinct, matching the 4 anchor rather than 5's minimal-conflict profile.

4 / 5

Total

17

/

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: 15 deeper-than-1-level

Warning

Total

15

/

16

Passed

Repository
code-yeongyu/lazycodex
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.