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.
56
47%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/soft-skill/SKILL.mdQuality
Discovery
17%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 uses subjective, marketing-style language ('feel expensive', 'look cheap') rather than concrete actions and natural trigger terms. It lacks an explicit 'Use when...' clause, making it difficult for Claude to know when to select this skill. The first-person teaching framing ('Teaches the AI') is also unusual and doesn't follow the recommended third-person action voice.
Suggestions
Add an explicit 'Use when...' clause with natural trigger terms like 'website design', 'UI styling', 'landing page', 'CSS', 'modern web design', or 'premium look'.
Replace subjective language like 'feel expensive' and 'look cheap' with concrete actions such as 'Applies premium typography, spacing systems, box shadows, card layouts, and micro-animations to web designs'.
Rewrite in third-person action voice (e.g., 'Applies high-end design patterns...') instead of 'Teaches the AI to design...'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (web design) and lists some specific areas like fonts, spacing, shadows, card structures, and animations, but these are categories rather than concrete actions. Phrases like 'feel expensive' and 'look cheap or generic' are subjective rather than specific. | 2 / 3 |
Completeness | Describes what it does in vague terms but has no explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is entirely missing, which per the rubric caps completeness at 2, and the 'what' is also weak, so this scores a 1. | 1 / 3 |
Trigger Term Quality | Lacks natural user trigger terms. Users would say things like 'website design', 'UI', 'landing page', 'CSS', 'styling', or 'modern design' — none of which appear. Terms like 'high-end agency' and 'feel expensive' are not how users naturally phrase requests. | 1 / 3 |
Distinctiveness Conflict Risk | The focus on premium/high-end web design aesthetics gives it some distinctiveness, but the broad mention of fonts, spacing, shadows, and animations could overlap with any general CSS/UI styling skill. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a highly actionable and well-structured design system skill with exceptional specificity in Tailwind classes, anti-patterns, and component architecture. Its main weaknesses are moderate verbosity from marketing-style language that doesn't serve Claude's needs, and a monolithic structure that could benefit from splitting detailed patterns into referenced files. The execution protocol and pre-output checklist provide strong workflow clarity with explicit validation.
Suggestions
Trim marketing language ('haptic depth', 'cinematic spatial rhythm', '$150k agency') and persona framing—Claude doesn't need motivational context, just the rules and patterns.
Consider splitting the detailed component patterns (Section 4) and motion choreography (Section 5) into separate referenced files to improve progressive disclosure and reduce the main file's token footprint.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~200+ lines) and includes some unnecessary flair language ('haptic depth', 'cinematic spatial rhythm', '$150k agency build') that doesn't add actionable value. However, most content is genuinely instructive with specific Tailwind classes and concrete patterns, so it's not purely verbose—just could be tightened significantly. | 2 / 3 |
Actionability | Extremely actionable with specific Tailwind utility classes (e.g., `rounded-[calc(2rem-0.375rem)]`, `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]`), exact CSS values, named font alternatives, concrete DOM structure patterns, and copy-paste-ready class combinations. The Double-Bezel technique, button architecture, and motion patterns are all specified with executable detail. | 3 / 3 |
Workflow Clarity | Section 7 provides a clear 5-step execution protocol with explicit sequencing, and Section 8 provides a comprehensive pre-output checklist that serves as a validation checkpoint. The workflow moves logically from silent selection through scaffolding, architecture, choreography, to output with a final quality gate. | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear numbered sections and subsections, making it navigable. However, it's entirely monolithic—all content lives in one file with no references to external files for detailed patterns, examples, or extended guidance. Given the length and complexity, splitting component patterns or archetype details into separate reference files would improve organization. | 2 / 3 |
Total | 10 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- Leonxlnx/taste-skill
- Commit
840b46b
- 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.