Loading
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 (id
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add Leonxlnx/taste-skill --skill taste-skill -a cursor -y
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. Not for dashboards or app screens.
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. Not for dashboards or app screens.
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:
scripts/draw.mjs deals 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.scripts/inspect.mjs, so the
rules are checked rather than hoped for.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.
Do these in order. Steps 1–5 take a few minutes and decide whether the page is any good.
Find out what is real: the subject, the audience, the one thing the page must get someone to do, the
stack, any existing brand (colours, fonts, logo), and above all what imagery truly exists: the
project's own photographs or product shots, a real interface that can be shown, an image generation
tool you can call, or nothing. Do not plan around pictures you do not have. Nothing of its own is
rarely nothing at all: the subject's city, street, materials and history are in open archives and
museums, free to use with a credit (step 6, scripts/assets.mjs).
If the request is vague, decide and state your reading in one line instead of asking. Ask only when a missing fact blocks the work (for example, no product name).
Then inventory the subject in your notes: eight to twelve things that belong to this client and to no competitor. Look for its name and what the name means; its address, door number, street and neighbourhood, and what that place looks like (its tiles, signs, paint colours, typefaces on its shop fronts, its light, its weather); the numbers in the brief (seats, rooms, minutes to the sea, the price, the year); the constraint it lives with (only one batch a month, closed in winter, by appointment); its materials and colours; its rituals and hours (the oven lit at five, the ferry at seven); the printed things of its world (a timetable, a label, a ticket, a sign). This list is where the idea comes from in step 4. In blind tests, the page that won each brief was built from an item on such a list (the client's name and what it means, the street it stands in, the one constraint that makes it what it is), and the pages that lost had a good composition with a category idea. The list is also your picture search: each place, material and printed thing on it is a query for step 6.
Before any design, list the page as claims with their proof, one line per section, the way
references/copy.md §1 shows. The claims decide which sections exist and in what order. Delete any
section that has no claim. This is how you avoid the stock sequence of hero, logos, three features,
testimonial, pricing, call to action.
node <skill>/scripts/draw.mjs --sector <sector> --brief "<one line about the subject>" \
--sections <roles in the order of your argument> [--tone <tone>] [--have <assets>] [--keep palette,type] \
--options 3
This deals three directions and prints a short summary of each. Hold each one against your inventory: which way of composing can carry something only this client has? Choose that one, not the most familiar, and write one line in your notes on why. In testing, a single random direction that did not suit the subject was the commonest cause of a weak page. Then deal the full sheet:
node <skill>/scripts/draw.mjs <the same arguments, without --options> --direction <chosen id>
--sector: node <skill>/scripts/draw.mjs --list sectors. Pick the closest.--sections: roles from --list roles (features, showcase, how-it-works, testimonial, proof, stats,
pricing, faq, cta, footer, intro, about, work, gallery, list, contact). The hero is implied.--tone (optional): quiet, bold, warm, technical, playful, luxury, editorial. Only pass it when the
brief clearly asks for one.--have: assets that really exist, comma-separated: photography (the project's own photographs of
the place, people or work), product-photo (photographs of the specific product, or an image tool
that can make them), product-ui (real screenshots), illustration, video. Leave it out if you
have none: the draw then avoids compositions that depend on them and the sheet says how to fill
picture slots honestly (software shows its own interface built in HTML; a product with no photographs
is drawn and set among real pictures of its world, never a fake product shot). Pictures you will
find in the open collections are not the project's own; leave them out of --have.--keep palette,type: when the brand already fixes colours or typefaces. The draw then deals only
the composition, and you map the brand's values onto the roles.The command prints a direction sheet. It is the art direction for this build:
--redraw hero | type | palette | photos | section:<role> | direction) only for a
reason you can state: it contradicts a stated brand constraint, or needs an asset that does not
exist. Never redraw to get something more comfortable. Record every redraw in your report.--alternatives <role>, pick the one whose assumptions match the content, and take it with
--redraw section:<role>=<id>.node <skill>/scripts/draw.mjs --show. In a long session, re-read it before each
section you build.The direction is a way of composing. The idea is what makes the page belong to this subject and no other. Write this sentence in your notes and do not start building until both blanks are filled from the subject itself:
On this page, [something that belongs to the subject] becomes [the device the direction calls for].
Places to look for the first blank:
Fill the first blank from your inventory (step 1), not from the category. The competitor test: put the nearest real competitor in the sentence (the bakery two streets away, another oak furniture maker, another hut on the same mountain). If the sentence still works, the idea belongs to the category: a loaf of bread is every bakery; the seven doors of the street this one is named after are only this one. "Clean and modern" is not an idea. The sites the study's panel scored lowest were the ones whose idea was recorded as "none beyond the standard formula".
One live thing. Give the page one thing the visitor can do, or that is different for each visit, made from the idea: pick a wood and see the chair in it; type your name and see it cut in the foundry's letters; set the loan and read the real monthly figure; see whether the hut's stove is lit right now and how long until the last ferry; choose a size and see it against the room. In blind tests every winning page had one and the jurors named it first. Rules: it uses the subject's real content, it works on a phone with a thumb, it has a plain fallback without script, it never blocks reading, and it is one thing, not a playground. It is built in step 6 as part of the page, not added as motion in step 9.
Write the whole page as a copy deck (plain text) before markup, following references/copy.md:
Build the page with motion switched off in your head; a page that needs animation to look finished is not finished. Order of work:
Tokens. Colour and type roles from the sheet as CSS custom properties. Everything downstream
references tokens only. <skill>/assets/base.css is a neutral foundation you may start from (reset, token
names, fluid type steps, grid, focus and selection styles, the motion helpers); it has no look of
its own.
The hero, exactly as the blueprint describes it, at desktop and at phone width. Get the big thing big and the small things small before anything else exists.
Each section from its blueprint, with this project's content. Keep the geometry, change the subject. Neighbouring sections must not share a layout. Carry the idea into every section, pricing, FAQ and footer included: the commonest failure in the study, even among good sites, is a distinctive first screen followed by stock blocks.
Imagery, in this order of preference:
node <skill>/scripts/assets.mjs "<query>" (Openverse, Wikimedia
Commons, the Art Institute of Chicago and the Met; only licences that allow commercial use, by
default). Search the inventory, not the category: its street in old postcards, an old map of the
neighbourhood, its material up close, its trade in engravings, a museum object of its kind, a
botanical plate, a star chart. Use them large and with intent: one archival photograph as the
hero, an engraving enlarged into the page's motif, the real map of the street as the contact
section. Look at each before choosing; --get <ref> downloads it into assets/ and records
its source and licence, and --credits prints the credit line for the footer. A found picture
shows the world around the client and is never presented as the client's own product, room,
dish, person or team;The floor, which the inspector checks: at least four real pictures on the page, usually six to twelve (photographs, archival images, maps, engravings, footage, raster artwork; for software, its cropped interface fragments count too). SVG drawings do not count toward the floor: draw what no picture exists of, and still carry real pictures. Add one moving picture wherever an honest clip exists: search it with and use it as a muted loop with a poster frame. Models skip pictures and footage because finding them is work; the page fails without them.
Read references/type.md, references/colour.md and references/layout.md when you need the detail
behind a decision; the laws below are the short form.
node <skill>/scripts/lint.mjs <source files or folder>
node <skill>/scripts/inspect.mjs <url or path/to/index.html>
lint.mjs scans source for banned patterns and stock phrases. inspect.mjs opens the page in a real
browser at 1440, 768 and 390 pixels, measures it (headline line counts, type sizes, fonts actually
loaded, colours, rules, shadows, gradients, contrast, overflow) and saves screenshots to
.taste-skill/inspect/. Fix every FAIL. Treat each WARN as wrong unless you can defend it to a
designer in one sentence. Re-run until there are no FAILs. Do not argue with the meter and do not
hide things from it. The inspector serves local files over a throwaway local server; if the page must
also open straight from the file system, open index.html that way once before you finish.
Passing the gate means nothing banned was measured. It does not mean the page is good. Open the
screenshots the inspector lists (every viewport, with your image viewer or Read tool) and critique them
with references/critique.md: the fourteen passes, the Awwwards-weighted score, the caps. Write the critique
down in its format, fix the top three problems, run the inspector again, look again. Three rounds at
most.
Judge only the pictures. If a problem is visible in a screenshot, it is real, whatever the code says.
Now build the motion layer. It is required, and it is more than one fade: the inspector counts the elements that really move while the page loads and is scrolled, and fails a page under eight (it warns under sixteen). The layer has four parts:
Transform and opacity only; every move has a prefers-reduced-motion fallback that keeps the content
and drops the travel. A move that changes the colour or the layout of whole screens (colour by
chapter, a pinned story) is part of the composition, so build it in step 6 and let every look round see
it. references/motion.md has the tokens and tested recipes. Then run the inspector once more and check
every screenshot for content that failed to appear.
Tell the user, briefly: the direction dealt (name and seed) and any redraws with reasons; the idea
sentence and the live thing; the final scores from your last critique round and what still falls short;
every found picture and clip with its title, creator, licence and source page (assets.mjs --credits prints
the list) and where its credit sits on the page; which bundled photographs and which drawings stand in
for photography (so they can be replaced); and any sample content that must be swapped before launch.
Do not claim a check you did not run.
These hold on every build, whatever the direction. inspect.mjs measures them.
| Rule | Instead |
|---|---|
Headlines: two lines or fewer, at every width. Every h1–h6, and the main line of the first screen whatever its tag. | Cut words. Then widen the measure. Size last. |
Statements are paragraphs. An intro sentence or a quotation set large is marked up as <p> or <blockquote>, stays at statement size (36px or less on desktop, 24px on a phone) and runs to about 25 words, three lines. | Larger than that it is a headline and the two-line rule applies. In blind tests jurors read a 42px sentence over four lines as a four-line headline. |
| No eyebrows. No small label above a heading, no pill badge above the headline, no "New ·" chip. | Put the information in the heading or the first sentence, or drop it. |
| No monospace outside real code blocks. | The text face. Tabular figures where numbers align. |
| No index numbering. No 01 / 02 / 03, no (001), no "Step 2". | Order shown by position, size, or the words. A real <ol> if order matters. |
| No thin rules. No hairline dividers, no 1px outlined boxes, no grid lines, crosshairs or crop marks. | Space. A step in background tone. A change of scale. A filled shape. |
| No gradients. Not as backgrounds, not on buttons, not in text. | Flat colour, or a real photograph. A neutral scrim under text on a photo is the one exception. |
| No shadows on things at rest. No glows. | A tone step between surfaces. Shadows only on what truly floats: a menu, a dialog. |
| No assistant palette. No yellow-cream ground with terracotta or rust; no violet or indigo. | The dealt palette. |
| No tiny uppercase letter-spaced labels. | Sentence case at a readable size. |
| No icon-topped feature cards, no rows of identical cards. | The dealt section blueprint. |
| No glass. No backdrop blur panels, no floating pill navigation. | A plain bar: wordmark, a few links, one action. |
| No emoji, no gradient blobs, no decorative shapes, no fake dashboards of grey bars. | A real picture, a real interface fragment, or nothing. |
Three places keep their own conventions and are left alone by the inspector: real code in
<pre>/<code> (monospace is correct there), real tables and form fields (they may have lines), and
a real interface fragment whose root carries the attribute data-ui (the product's own borders and
menus; see references/imagery.md §7).
Why these, honestly. Some are what the study measured: among the 247 sites, those the panel scored
7.5 or higher used icon feature cards 1% of the time against 28% for sites under 6.5, pill badges 14%
against 34%, gradients 22% against 52%, shadows 24% against 48%, tiny tracked caps 16% against 57%.
Others are the owner's taste and go against current gallery fashion: monospace labels, index numbers
and hairline grids are actually more common on award sites than on weak ones, which is exactly why
generators imitate them and why they now read as costume. They are banned here without exception.
references/tells.md keeps the dated registry.
Removing ornament leaves space. Never fill it with another ornament. Fill it with scale (make the main thing larger), with the full content, with a picture made for this subject, or with a field of flat colour. Leave it empty on purpose once per page at most.
Short form. Numbers are from the study unless marked as house style.
Type
Space
Colour
Imagery
Components
An existing brand or design system. Pass --keep palette,type, map the brand's colours and faces
onto the roles, and take only composition from the draw. The house rules still apply; if the brand
itself requires a banned device (its logo sits in a gradient, its accent is violet), keep the brand
asset, say so in the report, and pass --allow <rule> to the inspector for that rule only.
Redesign or review of an existing page. Run lint.mjs and inspect.mjs on it first and report
what they find, then critique the screenshots with references/critique.md. For a redesign, draw a
direction and proceed from step 2, keeping the page's real content and working behaviour.
A component or a single section, not a page. Skip the draw unless there is no direction to follow. Match the surrounding design, apply the house rules and the laws, and still inspect the result.
No checkout, no form backend. The primary button goes to the real destination when the brief names
one. Otherwise it opens an email with a written subject and body (mailto: with the visitor's choices
filled in), or, for a shop, it points at #checkout and the report says it must be wired before
launch. Never fake a payment form.
No Chrome or Node 22. Run lint.mjs (Node 18+), take screenshots with whatever browser tool you
have, and critique those. Say in the report that the inspector could not run.
No network. If assets.mjs reaches no source, draw the pictures and say in the report that the
open collections could not be searched.
| File | Read it when |
|---|---|
references/copy.md | Writing the argument and the copy deck (steps 2 and 5). The two-line arithmetic. |
references/type.md | Setting type: scales, tracking, measure, loading fonts, pairing. |
references/colour.md | Applying the palette: roles, proportions, tone steps, dark pages, contrast. |
references/layout.md | Grid, margins, rhythm, section variety, navigation, footer, the phone composition. |
references/imagery.md | Choosing, finding, crediting, cropping and treating pictures; what to do with none. |
references/motion.md | Step 9. Budget, tokens, recipes, reduced motion. |
references/critique.md | Step 8. How to look, how to score, what to fix first. |
references/tells.md | The dated registry of generated-page tells and what each is replaced by. |
references/research.md | The study: method, numbers, what the best and worst sites do. Cite it, do not guess. |
scripts/draw.mjs | Deals and reprints the direction; --photos, --site <id> for more references. |
scripts/assets.mjs | Step 6: searches open collections for real pictures of the subject's world; --get downloads with the credit, --credits prints them. |
scripts/lint.mjs · scripts/inspect.mjs | The gate. |
assets/base.css · assets/base.js | An optional neutral foundation to build on. |
library/ | The data the draw reads: directions, heroes, sections, type systems, palettes, photographs, studied sites, motions. Do not read it whole; use the script. |
assets.mjs --video "<query>"references/imagery.md covers searching, licences and credits, video, drawing, crops and treatments.
The live thing from step 4, built into the section where it proves the claim (often the hero or the booking), with real content, a thumb-sized phone version and a plain fallback.
Fullness. Look at each desktop screen as a poster: one dominant thing and the content it carries. A screen that is mostly empty ground is an underbuilt section, not a rest; one deliberate rest per page is the limit, and the inspector fails a page with two or more near-empty screens. Running text is in the full ink at 16px or more; grey is for secondary notes.
States and semantics. Real links and buttons, visible focus, alt text, a phone layout that is its own composition.
| No styled accent word in a headline (italic, serif, coloured, underlined). | One face, one colour. The words carry the emphasis. |
| Two typefaces at most, usually one. | The dealt type system. |