Chapter 05 · Our Favourite Skills · Reading 01
Taste Skill, the anti-slop frontend pack
The rules that stopped this site from looking like every other AI-built page. Written by Leonxlnx, free and open source. What each skill in the pack does, and how to install it.
What it is
An "agent skill" is a plain Markdown file an AI coding agent reads before it works, so it stops making the same lazy choices: Inter on slate-900, three equal cards, purple gradients, everything centred. Taste Skill is a pack of those files aimed at frontend work. It was the first thing we installed when this site was still a flat black graph, and most of what changed on the home page came from following it.
Author: Leonxlnx, with the community at tasteskill.dev. MIT licensed.
Repository: github.com/Leonxlnx/taste-skill
The skills inside it
- design-taste-frontend. The default. Reads your brief, infers the design direction, then sets three dials (layout variance, motion intensity, visual density) before it writes a line of code. It also forces a design read to be stated out loud, so you can disagree with it early.
- high-end-visual-design. The one that makes things feel expensive. Bans the cheap defaults (thin generic borders, harsh black shadows, linear easing) and teaches the nested "double bezel" card, button-in-button CTAs, tinted shadows and spring curves. Our modal card and pill buttons follow it.
- redesign-existing-projects. Audit first, then fix, without rewriting the codebase. This is the checklist we ran on the old site before touching a pixel.
- imagegen-frontend-web. Rules for generating website reference images: one image per section, readable type, consistent palette. We used it to storyboard the journey before building it.
- image-to-code. The other half: turn those reference images into a page that matches them.
- brandkit. For brand boards: logo directions, palettes, type, identity applications.
- full-output-enforcement. Stops an agent shipping half a file with "rest of code here" comments.
- Also in the pack, which we did not need here: minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste, imagegen-frontend-mobile.
Install it
npx skills add https://github.com/Leonxlnx/taste-skillOr one skill at a time by its install name:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "high-end-visual-design"A skill only helps if the agent actually reads it. Ask for it by name ("use high-end-visual-design for this") the first few times, then check the output against the skill's own checklist.