CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

60

Quality

76%

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

Fix and improve this skill with Tessl

tessl review fix ./plugins/community/agent-skill-principal-ui-ux-architect-motion-choreographer-awwwards-tier-mqu4mbbj/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

82%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 content is a dense, highly actionable instruction skill: exact Tailwind recipes, concrete banned patterns, a clear execution protocol, and an explicit pre-output checklist. Its only notable gaps are the absence of a fix-and-retry loop around the final checklist, slight stylistic padding, and an unused references/ bundle that the body never points to.

DimensionReasoningScore

Conciseness

The body is dense and prescriptive with almost no explanation of concepts Claude already knows — it assumes Tailwind/React competence and goes straight to exact values and class recipes. Minor trimmable padding remains (persona framing like "You engineer $150k+ agency-level digital experiences", the "Provenance" section, and Section 2 anti-patterns restated in the Section 8 checklist), which keeps it at anchor 4 rather than 5.

4 / 5

Actionability

Guidance is copy-paste-ready at the class level throughout: exact values like `rounded-[2rem]` with the concentric-radius formula `rounded-[calc(2rem-0.375rem)]`, `px-6 py-3` pill buttons, `py-24`–`py-40` section padding, `ease-[cubic-bezier(0.32,0.72,0,1)]`, the full eyebrow-tag class string, and named implementation choices (IntersectionObserver / Framer Motion `whileInView`). This is an instruction-only skill where the guidance is fully executable, matching anchor 5.

5 / 5

Workflow Clarity

Section 7 gives a clear 5-step execution sequence (roll variance engine → scaffold → architect → choreograph → output) and Section 8 provides an explicit pre-delivery validation matrix covering every prior section. It is not 5 because the checklist has no feedback/recovery loop (no "if a check fails, revise and re-check" step), and it is clearly above 3 because checkpoints are explicit rather than implicit and the operation is generative, not destructive or batch.

4 / 5

Progressive Disclosure

The ~100-line body is well-sectioned (anti-patterns, variance engine, component patterns, motion, performance, protocol, checklist) and easy to navigate with no nested or buried references. It is not 5 because the skill exceeds the simple-skill threshold and the existing `references/` bundle files are never signaled or used from the body, and parts of the archetype catalog or checklist could arguably live in reference files; it is well above 3 since structure is strong and nothing is misfiled.

4 / 5

Total

17

/

20

Passed

Description

58%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 has a clear, concrete "what" with a distinctive anti-cheap design positioning, but it entirely lacks a "Use when..." trigger clause and has thin natural-language trigger vocabulary. Its main practical weakness is that a user or model would have to infer when to invoke it from the domain alone.

Suggestions

Add an explicit trigger clause, e.g., "Use when generating or restyling websites, landing pages, or web UI where a premium, high-end look is wanted — or when the user asks for designs that look expensive, polished, agency-grade, or not generic."

Broaden natural trigger terms to include the phrases users actually say: "UI design", "landing page", "redesign", "make it look premium/polished", "Awwwards-style", "high-end website".

State the scope boundaries (web UI design vs. general graphic or chart design) to reduce overlap with other design-related skills.

DimensionReasoningScore

Specificity

The description lists several concrete deliverables — "Defines the exact fonts, spacing, shadows, card structures, and animations" — plus a second concrete function, "Blocks all the common defaults that make AI designs look cheap or generic." It sits below anchor 5 because the actions are stated as categories of definition/blocking rather than a fully comprehensive enumeration of what the skill does, and above anchor 3 because it goes well beyond naming the domain with 1-2 actions.

4 / 5

Completeness

The "what" is clear and concrete (defines exact fonts/spacing/shadows/card structures/animations and blocks cheap-looking defaults), but there is no "Use when..." clause or equivalent trigger guidance anywhere in the description, which caps completeness at 3 per the judging guidelines. It is not a 4 because the "when" is entirely absent rather than merely implicit.

3 / 5

Trigger Term Quality

Relevant keywords exist ("design", "high-end agency", "website", "expensive", "cheap or generic", "fonts", "animations") and some are natural phrases a user might say ("make a website feel expensive", "look cheap"), but common variations users actually say — "UI", "landing page", "make it look premium", "polish", "redesign" — are missing. This matches anchor 3 (some relevant keywords, missing common variations/synonyms) rather than 4, since the natural trigger vocabulary is thin.

3 / 5

Distinctiveness Conflict Risk

The niche — high-end, expensive-looking web visual design with anti-generic guardrails — is mostly distinct, anchored by distinctive phrases like "design like a high-end agency" and "make a website feel expensive". It is not a 5 because the trigger surface is broad design territory that could overlap with adjacent skills (brand styling, general UI/design systems, chart design) given the missing "use when" scoping; it is well above 3 because the expensive/anti-cheap framing is unmistakable.

4 / 5

Total

14

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

nexu-io/open-design

Path

plugins/community/agent-skill-principal-ui-ux-architect-motion-choreographer-awwwards-tier-mqu4mbbj/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.