CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-taste-frontend

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens people work in, with their own run and rules.

71

Quality

89%

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

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.

A well-engineered body: a strictly ordered ten-step workflow with real validation gates and feedback loops, copy-paste-ready commands with documented flags, and clean one-level-deep reference structure indexed by a Files table. Its two weaknesses are rhetorical padding that inflates token cost without adding instruction, and bundle references (scenes demo pages, the library directory) that do not exist in the shipped files.

Suggestions

Trim the narrative passages (the model-defaults intro, the 'One warning learned in testing' paragraph, parenthetical anecdotes, and the 'Why these, honestly' rationale section) to single-line notes; the rules and tables already carry the instruction, so the body could shed a substantial share of its tokens without losing guidance.

Fix the dangling bundle references: either ship 'library/' and 'assets/scenes/demo/<id>.html' (referenced by the Files table, step 6, and draw.mjs's printed sheet) or remove/qualify those pointers so readers aren't sent to files that don't exist.

Move the sector/role/tone flag vocabulary and the app-screen fragment rules out of inline prose and into the existing reference files (copy.md, app-screens.md), keeping the run steps to commands and decision rules only.

DimensionReasoningScore

Conciseness

The body is dense with genuinely skill-specific rules (house rules table, numeric laws, exact CLI invocations) and wastes little on concepts Claude already knows, but it carries noticeable rhetorical padding that could be tightened without loss: the opening 'Nothing in it is wrong and nothing in it was decided' framing, the 'One warning learned in testing' narrative, parenthetical anecdotes ('the oven lit at five, the ferry at seven'; 'A camera that prints poems delivered its copy as paper slips'), and the 'Why these, honestly' rationale section. This fits the anchor 'mostly efficient but includes some unnecessary explanation or could be tightened' better than the score-4 anchor, whose over-explanation is only minor — here the trimmable prose runs to dozens of lines across the document.

3 / 5

Actionability

Guidance is fully executable: copy-paste-ready commands with documented flags ('node <skill>/scripts/draw.mjs --sector <sector> --brief "..." --sections ... --options 3', '--redraw section:<role>=<id>', 'inspect.mjs <url> --out .taste-skill/before', 'assets.mjs --get <ref>', '--credits'), plus hard numeric thresholds (16px running text, 120–240px section gaps, ~32-character headlines, four-picture floor). The common cases — new page, app screen, redesign, no-network, no-Chrome — are each covered with specific instructions.

5 / 5

Workflow Clarity

The ten-step run is explicitly ordered ('Do these in order') with validation checkpoints and feedback loops throughout: step 7's gate ('Fix every FAIL... Re-run until there are no FAILs. Do not argue with the meter'), step 8's critique-fix-reinspect loop bounded at three rounds, and step 10's pre-report checklist ('Do not report until all of these are true'). This matches the top anchor: clear sequence, explicit validation, error-recovery loops, and a checklist.

5 / 5

Progressive Disclosure

Structure is strong: the body is an overview plus the core run, detail is pushed one level deep into eleven clearly named reference files, each signalled inline at its point of use ('Read that file whole before you start', 'references/motion.md has the tokens and tested recipes') and indexed in a Files table with a 'Read it when' column. However, scored against the actual bundle, two referenced paths are dangling: 'assets/scenes/demo/<id>.html' ('a working example of each') and the 'library/' directory the Files table and scripts both point to — neither exists in the bundle, so a reader following the sheet's pointers hits missing files. This fits 'good structure; references mostly clear; minor organization gaps' rather than the top anchor.

4 / 5

Total

17

/

20

Passed

Description

96%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.

An excellent description: third-person voice, concrete capabilities, explicit 'Use this whenever' triggers with natural synonyms, and app-screen scope called out separately. The only weakness is slight over-breadth in the trigger ('any public-facing web page, in any stack'), which raises minor conflict risk with general frontend skills.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — 'Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots' — with comprehensive coverage of the skill's capabilities. It matches the anchor for multiple specific concrete actions rather than the score-4 anchor, which expects minor gaps in coverage.

5 / 5

Completeness

Both questions are explicitly answered: the 'what' ('Art direction for websites... deals researched directions... enforces a strict no-slop house style... runs a look-and-fix loop') and an explicit 'Use this whenever...' trigger clause with concrete conditions, mirroring the top anchor's structure.

5 / 5

Trigger Term Quality

Natural trigger coverage is comprehensive: 'build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero', 'generic, templated, "AI-made", sloppy', 'premium, award-level', plus app-screen terms ('dashboards, admin and analytics views, settings, inboxes') and stack names (React, Next.js, Vue, Svelte, Astro, Tailwind). These are exactly the phrases a user would say when needing this skill, matching the synonym-inclusive top anchor.

5 / 5

Distinctiveness Conflict Risk

The niche (art-directed, anti-slop frontend design) is clear and distinct, but the very broad trigger 'whenever you build... any public-facing web page, in any stack' extends into general frontend-build territory, creating minor overlap risk with generic web-development skills. This fits 'mostly distinct; minor overlap risk' rather than the minimal-conflict top anchor.

4 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

referenced_paths_exist

Referenced path issues: 1 missing, 1 deeper-than-1-level

Warning

Total

14

/

16

Passed

Repository

Leonxlnx/taste-skill

Path

skills/taste-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.