CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend

MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines; designpowers personas/accessibility/critique/handoff; plus curl-only lazyweb real-app-screen research and the beui.dev interaction catalog. Triggers: frontend, UI, UX, design, redesign, styling, layout, animation, motion, interaction, micro-interaction, make it feel alive, premium, luxury, minimal, brutalist, Awwwards, DESIGN.md, mockup, React, Lighthouse, accessibility, WCAG, Core Web Vitals, looks generic, make it pretty, like X brand, lazyweb, design research.

74

Quality

92%

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

85%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 a well-structured router: it sequences work clearly with explicit validation gates and delegates detail to a verified, one-level-deep reference bundle. Its main weakness is minor rhetorical repetition of the core axiom and actionability that is partly mediated through referenced files rather than inline executable steps.

Suggestions

Consolidate the 'design + perfection load together / both win or neither' principle into one location (e.g., shared axioms) and reference it from Phase 0 and the workflow to reduce repetition.

For the most common workflows (clone-from-url, image-to-code, lazyweb), include a one-line inline executable snippet or a single concrete example so the body is actionable before the reference is opened.

Define or note the $SKILL_DIR convention once near the first CLI block so the copy-paste commands are self-contained.

DimensionReasoningScore

Conciseness

The body is dense and directive, assuming Claude's competence without explaining known concepts, but repeats the design+perfection 'both win or neither' axiom across Phase 0, the workflow, and shared axioms — minor instances that could be trimmed.

4 / 5

Actionability

Provides copy-paste CLI commands (lighthouse-audit.py, search.py) and exact file-load routing tables, but delegates the executable procedures for clone/image-to-code/lazyweb/interaction to referenced files, leaving minor gaps in the body itself.

4 / 5

Workflow Clarity

Clear sequence (Phase 0 route → branch selection → implementation → QA) with explicit validation gates (/visual-qa reference-fidelity, Primitive Showcase Gate), a feedback loop ('until the dual-oracle completion gate passes on fresh evidence'), and a Research Log checklist.

5 / 5

Progressive Disclosure

The body is an overview/router pointing to one-level-deep references (all verified present), organized via routing tables and _INDEX.md, with detailed material appropriately split into references/ — clear navigation, no deep nesting.

5 / 5

Total

18

/

20

Passed

Description

100%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 a strong, comprehensive routing description: it names concrete capabilities, supplies an extensive natural-language trigger list, and explicitly states both what the skill does and when to use it. It is distinctly scoped to frontend/visual work with minimal overlap risk.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'building, styling, redesigning pages/components, React setup, performance audits, visual QA' — with comprehensive coverage of the frontend domain, matching the anchor for several specific actions without minor gaps.

5 / 5

Completeness

Clearly answers what ('building, styling, redesigning… Routes four rulesets') and when ('MUST USE for frontend/web UI/UX/visual work' plus concrete trigger phrases), satisfying the anchor for explicit what-and-when.

5 / 5

Trigger Term Quality

An explicit 'Triggers:' list provides comprehensive natural terms users would say ('make it feel alive', 'looks generic', 'make it pretty', 'like X brand', 'Awwwards') plus synonyms and technical markers (WCAG, Core Web Vitals, DESIGN.md).

5 / 5

Distinctiveness Conflict Risk

Carves a clear frontend-implementation niche with distinctive triggers (lazyweb, Awwwards, Lighthouse, DESIGN.md) and explicit non-targets, keeping conflict risk minimal even though 'design'/'mockup' are broad terms.

5 / 5

Total

20

/

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 12 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.