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%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-architected routing skill: actionable CLI commands, a clearly sequenced workflow with explicit gates, and excellent progressive disclosure to real one-level-deep references. Its only weakness is conciseness — routing guidance is repeated across the Phase 0 and Quick routes tables, and a few rhetorical lines add length without information.

Suggestions

Collapse the overlap between the Phase 0 routing table and the Quick routes table so design+perfection-load-together and per-request file picks are stated once, cross-referencing instead of restating.

Trim rhetorical framing such as "The bar is not clean-and-correct — it is work a senior designer at Linear, Stripe, or Supabase would ship" to a shorter invariant so the body stays dense and directive.

Move the brand-name enumeration in the Layer B paragraph fully to _INDEX.md (keep one or two examples plus the pointer) to reduce inline list length.

DimensionReasoningScore

Conciseness

Mostly efficient and assumes competence, but the routing tables and the "Quick routes" table restate overlapping guidance (e.g., design+perfection-load-together is repeated) and rhetorical lines like "The bar is not clean-and-correct…" pad the text.

2 / 3

Actionability

Provides concrete, executable commands (the lighthouse-audit.py and ui-ux-db search.py invocations, both verified to exist), explicit gating conditions, and per-branch deliverables — copy-paste ready.

3 / 3

Workflow Clarity

Clear sequence (Phase 0 route → numbered design-system branches → rulesets → axioms) with explicit checkpoints: the Design System Gate, Primitive Showcase Gate, the "STOP and ask one focused question" branch, and the /visual-qa dual-oracle verification gate.

3 / 3

Progressive Disclosure

The body is a router pointing to well-signaled one-level-deep references (verified to exist on disk), with _INDEX.md cataloging the 83 files and per-table read-when guidance; content is appropriately split across rulesets rather than inlined.

3 / 3

Total

11

/

12

Passed

Description

100%

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 specific, trigger-rich, complete, and distinct: it names concrete frontend actions, lists natural trigger phrases a user would actually say, and is explicitly scoped away from backend/CLI work. Voice is third-person imperative, so no voice penalty applies.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish" — matching the multiple-specific-actions anchor.

3 / 3

Completeness

Explicitly answers both what it does (frontend/web UI/UX work plus routing four rulesets) and when to use it via an explicit "Triggers:" clause, matching the both-what-and-when anchor.

3 / 3

Trigger Term Quality

Strong coverage of natural user phrases such as "make it feel alive", "make it pretty", "looks generic", "like X brand", "premium", "brutalist", "Awwwards", and "Lighthouse", matching the good-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

A clear frontend/visual niche with distinct triggers and an explicit non-scope ("Not for backend, CLI, or pure-logic tasks"), making conflict with other skills unlikely.

3 / 3

Total

12

/

12

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.