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.

51

Quality

56%

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 skill with real executable code, concrete anti-patterns backed by production testing, and a rigorous pre-flight validation checklist. Its primary weakness is extreme verbosity — at ~1500+ lines in a single file, it consumes enormous context window budget, with significant redundancy between the rules sections (4, 9) and the pre-flight checklist (14). The content would benefit greatly from splitting into multiple files with the SKILL.md serving as a concise overview.

Suggestions

Split the monolithic SKILL.md into multiple files: move Sections 9 (AI Tells), 10 (Reference Vocabulary), 5.A-5.C (canonical skeletons), and Appendices A-C into separate referenced files, keeping SKILL.md as a concise overview with one-level-deep references.

Eliminate redundancy between Sections 4/9 (rules) and Section 14 (pre-flight checklist) — the checklist restates nearly every rule verbatim. Either make the checklist reference section numbers only, or consolidate rules into the checklist and remove the prose versions.

Remove explanations of concepts Claude already knows (e.g., what WCAG AA is, how CSS Grid works, what design systems are) and trust Claude's existing knowledge — focus only on the novel, project-specific constraints.

DimensionReasoningScore

Conciseness

This skill is extremely verbose at ~1500+ lines. While much of the content is genuinely novel (anti-pattern lists, production tells), there is massive redundancy: the same rules are stated in Sections 4, 9, and 14 (the pre-flight checklist restates nearly every rule from the body). The dial inference table appears twice (1.A and 1.B). Concepts Claude already knows (what a design system is, how CSS Grid works, what WCAG AA means) are explained. The sheer token cost is enormous and competes heavily with conversation context.

1 / 3

Actionability

The skill provides fully executable code skeletons (GSAP sticky-stack, horizontal-pan, scroll-reveal stagger, liquid glass CSS), real install commands for every design system, specific Tailwind class recommendations, concrete font names, specific hex values to ban, and copy-paste-ready component patterns. Guidance is extremely concrete throughout.

3 / 3

Workflow Clarity

The workflow is clearly sequenced: Brief Inference (Section 0) → Dial Setting (Section 1) → Design System Selection (Section 2) → Implementation (Sections 3-5) → Performance/A11y (Section 6) → Pre-Flight Check (Section 14). The pre-flight checklist is an explicit validation checkpoint with ~60 items. Redesign protocol (Section 11) has its own decision tree with explicit validation steps. Error recovery is addressed (e.g., 'If errors: fix and re-validate' in GSAP patterns).

3 / 3

Progressive Disclosure

The skill references a block library structure (Section 12) with a clear file hierarchy, but no bundle files are provided, so those references are unresolvable. The SKILL.md itself is monolithic — Sections 4, 5, 9, and 14 could each be separate files. The appendices (install commands, canonical sources, liquid glass skeleton) are inline rather than in separate reference files. However, the internal organization with numbered sections and clear headers provides reasonable navigability within the single file.

2 / 3

Total

9

/

12

Passed

Description

50%

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 communicates a clear domain (frontend design for specific project types) and a design philosophy (non-templated, audit-first), but relies on buzzwords like 'anti-slop' and lacks explicit trigger guidance. It would benefit from concrete action verbs, natural user keywords, and a 'Use when...' clause to improve selection accuracy.

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 frontend HTML/CSS work.'

Replace vague/jargon terms like 'anti-slop' and 'ships interfaces' with concrete actions such as 'generates responsive HTML/CSS layouts, builds component-based design systems, audits existing UI for improvements'.

Include common user-facing keywords like 'website', 'web page', 'UI design', 'HTML', 'CSS', 'responsive', 'homepage' to improve trigger term coverage.

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 the actions are somewhat vague and buzzword-heavy ('anti-slop', 'do not look templated') rather than listing concrete technical capabilities like 'generates HTML/CSS', 'creates responsive layouts', etc.

2 / 3

Completeness

The 'what' is partially addressed (frontend skill for landing pages, portfolios, redesigns with design systems and audits), but there is no explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is only implied by the project types mentioned.

2 / 3

Trigger Term Quality

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

2 / 3

Distinctiveness Conflict Risk

The focus on landing pages, portfolios, and redesigns with an emphasis on non-templated design provides some distinctiveness, but 'frontend skill' is broad enough to overlap with general web development or UI skills. The 'anti-slop' framing is distinctive but not a natural trigger term.

2 / 3

Total

8

/

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.