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 ./skills/soft-skill/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

81%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 dense, highly actionable design system: exact tokens, anti-patterns, mobile fallbacks, and a closing pre-output checklist that functions as a real validation gate. Main weaknesses are mild persona-framing verbosity and the absence of any complete copy-paste component example or reference split for the archetype catalog.

Suggestions

Add one complete, copy-paste reference implementation (e.g., a Double-Bezel card or the nav with staggered mask reveal) so the most intricate patterns — the concentric-radius calc and hamburger morph — are fully executable rather than assembled from prose.

Move the full archetype catalog (Sections 3A/3B) into a references file (e.g., references/archetypes.md) and keep a two-line selection summary inline, trimming SKILL.md toward the lean core.

Cut the persona/dollar-figure framing ('Vanguard_UI_Architect', '$150k+') and the repeated Variance Mandate statements (Sections 1, 3, and 7 all restate it) to remove the remaining token padding.

DimensionReasoningScore

Conciseness

Nearly every line carries decision-bearing specifics (exact classes, hex values, pixel breakpoints, cubic-beziers) rather than explanations of concepts Claude already knows. It is not a 5 because there is minor dramaturgical padding — the '$150k+', 'Vanguard_UI_Architect' persona framing and restatements like the Variance Mandate appearing in Sections 1, 3, and 7 — that could be trimmed without losing information.

4 / 5

Actionability

The guidance is highly concrete and directly executable: exact Tailwind utilities ('rounded-[calc(2rem-0.375rem)]', 'py-24 to py-40', 'ease-[cubic-bezier(0.32,0.72,0,1)]'), named libraries (IntersectionObserver, Framer Motion), and specific banned patterns. It stops short of 5 because there are no complete copy-paste component examples — e.g., a reference Double-Bezel card or the hamburger morph markup — leaving minor assembly gaps for the reader.

4 / 5

Workflow Clarity

Section 7 gives an explicit ordered execution sequence (SILENT THOUGHT → SCAFFOLD → ARCHITECT → CHOREOGRAPH → OUTPUT) and Section 8 closes with an 11-item validation checklist described as 'the last filter', matching the top anchor's 'clear sequence with explicit validation steps... checklists for complex processes'. The task is generative rather than destructive/batch, so no validation cap applies, and nothing significant is missing for a 5.

5 / 5

Progressive Disclosure

The single file is well-sectioned (anti-patterns, archetypes, components, motion, performance, execution, checklist) with no nested or buried references and no dangling paths. It is not a 5 because the ~45-line archetype catalog (Sections 3A/3B) is detail-heavy reference material that could live in a separate file, and the >50-line simple-skill exception doesn't apply; the inline bulk is a minor organization gap, not the inlined-API-reference problem of a 2.

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 answers 'what' clearly and with reasonably concrete design-domain actions, but it omits any 'when to use' trigger guidance, which both caps completeness and limits natural trigger-term coverage. Adding an explicit 'Use when...' clause referencing common user phrasings (UI, landing page, premium look) would resolve the two weakest dimensions at once.

Suggestions

Add an explicit trigger clause, e.g. 'Use when building or restyling websites, landing pages, or UI that the user wants to look premium, modern, high-end, or expensive' — this lifts completeness from 3 to 5 and directly addresses the missing-when cap.

Include natural user phrasings and synonyms users actually type — 'UI', 'landing page', 'redesign', 'make it look professional/polished' — to improve trigger-term coverage beyond the current agency-jargon vocabulary.

Mention the output medium (React/HTML/Tailwind code) in the description so the skill's deliverable is explicit and less likely to be confused with critique-only design skills.

DimensionReasoningScore

Specificity

The description lists several concrete capabilities — 'Defines the exact fonts, spacing, shadows, card structures, and animations' and 'Blocks all the common defaults' — which anchor the actions in specific design domains. It falls short of a 5 because coverage has gaps: layout archetypes, responsive behavior, and the fact that it outputs code are not mentioned, and it's not as comprehensive as the 5-anchor multi-action example.

4 / 5

Completeness

The 'what' is clearly answered (defines design tokens, blocks anti-patterns), but there is no 'Use when...' clause or any equivalent explicit trigger guidance — the judging guidelines cap completeness at 3 in that case. It is not a 2 because the 'what' is concrete and multi-part, not vague.

3 / 5

Trigger Term Quality

Some natural phrases users would say are present — 'design like a high-end agency', 'make a website feel expensive', 'look cheap or generic' — but common variations users actually type are missing: 'UI', 'landing page', 'premium/modern design', 'redesign', 'make it look good', and framework names like Tailwind/React. This matches 'Some relevant keywords but missing common variations or synonyms' rather than 4, which requires good coverage with only a few gaps.

3 / 5

Distinctiveness Conflict Risk

The niche is fairly distinct — 'high-end agency' design, blocking 'cheap or generic' defaults — with little overlap risk against document/data/CLI skills. Minor overlap remains with general frontend, styling, and chart-design skills, keeping it below the 'clear niche, minimal conflict risk' anchor of 5.

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

Leonxlnx/taste-skill

Path

skills/soft-skill/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.