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.
29
22%
Does it follow best practices?
Impact
—
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 conveys a general sense of purpose — enforcing premium web design standards — but relies on 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, and uses second/first person framing ('Teaches the AI') rather than third-person action descriptions.
Suggestions
Add an explicit 'Use when...' clause with natural trigger terms like 'website design', 'UI styling', 'landing page', 'CSS', 'web layout', or 'frontend design'.
Replace subjective language ('feel expensive', 'look cheap') with concrete actions like 'Applies premium typography scales, enforces consistent spacing tokens, configures box-shadow hierarchies, and structures card components with polished animations'.
Rewrite in third person voice describing what the skill does (e.g., 'Enforces high-end design standards for web projects') rather than '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 actionable. | 2 / 3 |
Completeness | The 'what' is partially addressed (defines design standards, blocks defaults) but the 'when' is entirely missing — there is no 'Use when...' clause or equivalent explicit trigger guidance, which per the rubric caps completeness at 2, and the weak 'what' brings it down further. | 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 provides some distinctiveness, but the broad scope covering fonts, spacing, shadows, animations, and card structures could overlap with general CSS/styling skills or UI component skills. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
27%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill contains genuinely useful and specific design guidance with concrete Tailwind classes and well-defined patterns, but it is severely undermined by excessive verbosity, marketing-style language, and monolithic structure. It reads more like an agency manifesto than a concise, actionable skill file. The lack of complete executable code examples and the absence of feedback loops in the workflow further limit its effectiveness.
Suggestions
Cut the content by at least 50% — remove all marketing language ('$150k agency build', 'haptic depth', 'cinematic spatial rhythm'), persona framing, and explanations of concepts Claude already knows (GPU repaints, IntersectionObserver vs scroll listeners).
Add 1-2 complete, copy-paste-ready React/Tailwind component examples (e.g., a full Double-Bezel card component, a complete floating nav with hamburger morph) instead of describing patterns in prose with scattered utility classes.
Split into multiple files: keep SKILL.md as a concise overview with the execution protocol and checklist, then reference separate files like ANTI-PATTERNS.md, COMPONENTS.md, MOTION.md, and VARIANCE-ENGINE.md.
Add validation feedback loops to the execution protocol — e.g., 'After step 3, verify all cards use Double-Bezel by checking for nested container structure; if not, refactor before proceeding to motion choreography.'
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~200+ lines with significant padding. Includes unnecessary persona framing ('$150k agency build'), marketing language, and over-explains concepts Claude already understands (what cubic-bezier is, how IntersectionObserver works, why GPU repaints are bad). The 'Variance Engine' section alone could be cut by 60%. | 1 / 3 |
Actionability | Provides concrete Tailwind utility classes and specific CSS patterns (Double-Bezel technique, button-in-button pattern) which are actionable. However, there are no complete executable code examples — everything is described in prose with inline class snippets rather than copy-paste-ready component code blocks. The guidance is specific but not fully executable. | 2 / 3 |
Workflow Clarity | Section 7 provides a clear 5-step execution protocol and Section 8 has a pre-output checklist, which is good. However, there are no validation checkpoints or feedback loops — no step says 'if the output fails this check, go back and fix X.' The checklist is a one-pass filter with no error recovery guidance. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with no external references or file splitting. All content — anti-patterns, variance engine, component patterns, motion choreography, performance rules, and checklists — is crammed into a single file. This would benefit enormously from splitting into separate reference files (e.g., ANTI-PATTERNS.md, COMPONENTS.md, MOTION.md). | 1 / 3 |
Total | 6 / 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.
3c7017d
Table of Contents
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.