CtrlK
BlogDocsLog inGet started
Tessl Logo

design-taste-frontend

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

45

Quality

47%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/taste-skill/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%

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

This is an extraordinarily comprehensive and deeply actionable frontend design skill with excellent workflow structure and real executable code. Its greatest weakness is extreme verbosity — the same rules are repeated across multiple sections (directives, AI tells, and pre-flight checklist), and substantial content could be trimmed or split into referenced files. The skill would benefit enormously from being decomposed into the block library structure it describes but doesn't implement.

Suggestions

Reduce redundancy by consolidating rules stated in Sections 4 and 9 — currently the same bans (em-dash, AI-purple, three-equal-cards, etc.) appear in both sections and again in the Section 14 checklist. State each rule once with a section reference.

Split the monolithic SKILL.md into referenced files: move Appendices A-C into separate files, move the pre-flight checklist into its own file, and move the detailed dial definitions (Section 7) and dark mode protocol (Section 8) into referenced docs — keeping only summaries inline.

Remove meta-explanations about why LLMs produce bad output ('Most LLM design output is bad because the model jumps to a default aesthetic', 'LLMs default to clichés') — Claude doesn't need to be told why it has biases, just what to do instead.

DimensionReasoningScore

Conciseness

This skill is extremely verbose at ~1800+ lines. While much of the content is novel anti-pattern guidance Claude wouldn't inherently know, there is massive redundancy: the same rules are stated in Sections 4/9 and then restated as checklist items in Section 14. The em-dash ban is explained at length in 9.G and then re-emphasized multiple times. The premium-consumer palette ban lists specific hex codes, then re-explains the override, then appears again in the pre-flight check. Many sections explain rationale Claude doesn't need ('LLMs default to clichés', 'Most LLM design output is bad because...'). The reference vocabulary (Section 10) lists ~50 pattern names with descriptions that are general knowledge for a capable model.

1 / 3

Actionability

The skill is highly actionable with executable code skeletons (GSAP sticky-stack, horizontal-pan, scroll-reveal stagger, liquid glass CSS), specific Tailwind classes, real npm install commands, concrete banned hex values, specific font names, exact WCAG thresholds, and copy-paste-ready component implementations. The dial system with numeric ranges mapped to specific CSS properties is immediately executable.

3 / 3

Workflow Clarity

The workflow is clearly sequenced: Section 0 (read brief) → Section 1 (set dials) → Section 2 (pick design system) → Sections 3-9 (apply rules) → Section 14 (pre-flight checklist). The pre-flight check is an exhaustive validation checkpoint with explicit pass/fail criteria. The redesign protocol (Section 11) has its own clear decision tree with audit-first validation. Feedback loops are present ('If errors: fix and re-validate').

3 / 3

Progressive Disclosure

The skill references a block library structure (Section 12) with a clear file organization scheme, but no bundle files are provided, so those references are aspirational. The SKILL.md itself is monolithic — all content is inline rather than split across referenced files. The appendices are useful but could be separate files. For a skill this large (~1800 lines), the lack of actual content splitting into referenced files is a significant organizational weakness.

2 / 3

Total

9

/

12

Passed

Description

32%

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 attempts to carve out a niche for high-quality frontend design work but relies heavily on subjective/buzzwordy language ('anti-slop', 'do not look templated') rather than concrete capabilities. It lacks an explicit 'Use when...' clause, which is critical for skill selection, and misses common trigger terms users would naturally use when requesting frontend work.

Suggestions

Add an explicit 'Use when...' clause listing trigger scenarios, e.g., 'Use when the user asks to build a landing page, redesign a website, create a portfolio site, or requests high-quality HTML/CSS/frontend work.'

Replace vague/buzzwordy phrases like 'anti-slop' and 'do not look templated' with concrete actions, e.g., 'Generates semantic HTML, custom CSS with design tokens, responsive layouts, and accessible markup.'

Include more natural trigger terms users would say: 'website', 'web page', 'UI design', 'HTML', 'CSS', 'homepage', 'web design', '.html'.

DimensionReasoningScore

Specificity

Names the domain (frontend/landing pages/portfolios/redesigns) and some actions (reads brief, infers design direction, ships interfaces, audit-first on redesigns, pre-flight check), but many terms are vague or buzzwordy ('anti-slop', 'do not look templated', 'real design systems when applicable') rather than concrete, enumerable actions.

2 / 3

Completeness

Describes what it does (frontend skill for landing pages, portfolios, redesigns) but has no explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is only vaguely implied. Per rubric guidelines, a missing 'Use when...' clause caps completeness at 2, and the 'what' itself is also somewhat vague, bringing this to 1.

1 / 3

Trigger Term Quality

Includes some useful trigger terms like 'landing pages', 'portfolios', 'redesigns', and 'design systems', but misses many natural user phrases like 'website', 'UI', 'homepage', 'web design', 'frontend development', 'HTML/CSS'. The term 'anti-slop' is jargon unlikely to appear in user requests.

2 / 3

Distinctiveness Conflict Risk

The combination of 'landing pages, portfolios, and redesigns' with 'anti-slop' and 'audit-first on redesigns' provides some distinctiveness, but 'frontend skill' is broad enough to overlap with general web development or UI skills. The niche is somewhat defined but not sharply delineated.

2 / 3

Total

7

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (1207 lines); consider splitting into references/ and linking

Warning

Total

10

/

11

Passed

Repository
Leonxlnx/taste-skill
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.