Frontend Art Direction
Sets website art direction with a strict house style and a screenshot review loop.
Install
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend -g -a claude-code -y- Repository
- Leonxlnx/taste-skill108k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
tasteskill v2
A page built by a model usually looks like the average of every page the model has seen: a centred headline over three lines, a little label above it, a row of icon cards, a soft gradient, a few thin rules and a monospace caption. Nothing in it is wrong and nothing in it was decided.
This skill replaces those defaults with decisions, in four ways:
- A script deals the directions, you choose among them. Asked to invent a look, a model picks
the category default every time.
scripts/draw.mjsdeals three of twenty researched directions; you choose the one that carries the subject's idea, and the script then deals its type system, palette, hero and section compositions from a library distilled from 247 real sites. - The idea comes from the subject. In the study, what separated the best sites from the forgettable ones was a concept taken from the thing itself, not the styling.
- A house style with no ornaments, measured in a real browser by
scripts/inspect.mjs, so the rules are checked rather than hoped for. - You look at what you made. Screenshots at three widths, a juror's rubric, fix, look again.
One warning learned in testing. Taking the ornaments away is only half the job; a page that has lost its labels, rules and cards and gained nothing in their place reads as thin, and blind jurors rightly prefer a richer page with tells over an empty page without them. The other half is substance: type set larger, whole fields of colour, real pictures of this subject's world (found or drawn), and every section carrying its full content. The skill is built to give you that; do not trade it for restraint.
In the commands below <skill> is this skill's folder. Run them from the project's root, so the
working files land in .taste-skill/ there. The scripts need Node 22+ and an installed Chrome, Edge
or Chromium, and install nothing. assets.mjs also needs network access; it uses no API keys.
