Design Taste Frontend

tasteskill 2.5

Build the website a good company would ship: it says plainly what is sold, shows the real thing on every screen, and looks made for this client, not from a template and not like an art piece. figma.com and x.ai are the bar (in words: layout-v4.md section 1).

`` is this folder. It needs Node 22+ and Chrome, Edge or Chromium (ffmpeg optional).

House rules

These nine win over everything else in this skill.

1. No caption or description under any image, render or visual. Licence credits go in one

footer line.

1. Every visual renders, never an empty ground, at 1440, 1024, 768 and 390.
2. One section per screen: the hero alone on the first screen, every section exactly one or

two screens tall at 1440x900, no second section heading peeking in. The one exception is a live photo-chapters section, three or four screens, set by the moment.

1. Equal left and right content edges.
2. Hover micro-animations: a linked card lifts 2px, a photo zooms 1.02-1.03 inside its frame,

buttons step on hover and press on click, underlines draw, card loops cycle in 2.5-4 s, repeat and restart on hover. The motion layer does it; never strip or override it. No tilt, carousels or timed tabs. Every hero enters once on load (data-enter), and every page carries one dealt moment, two on a long page (the gate holds both).

1. More and better real photographs where they fit; nicer backgrounds; better heroes, layouts

and fonts.

1. Real full-colour icons (a known product's real icon, never a drawn one); small diagram

visuals in cards (a hub with branches; one input, a main processor, three parallel lanes; pulses running along the lines).

1. The big award-site scenes and creative moments are part of the skill: every page deals its

moments (photo- and type-led off tech), but shader effects and scenes only where the trade has a technical subject (tech, AI, developer tools, gaming, fintech, hardware), never on a local cafe, bakery, guesthouse or shop: those get photographs.

1. Addresses: street and district only (no street given: the district), no house number, postcode or coordinates; no register

or VAT numbers; no phone in a real format; contacts on .example.

1. The kind of business decides everything

Write the kind on the plan's first line and declare it on the page: the page type on ` and (the same value), and ; a place adds . The dealers take the last column (start.mjs --page, moments.mjs --page), the hero dealer the page type; consistency.mjs` reads the metas.

Brief	page type	site-kind	kind
App, SaaS, AI, developer tool, fintech or banking app, a studio selling its own software	software	software	software
A game, a studio launching its game	software	gaming	gaming
Hardware or a tech device (a drone, a robot arm, a keyboard)	product	tech	tech
Any other physical product or brand (a chair, a bike, coffee beans sold online)	product	other	product
People are hired: clinic, law firm, agency, creative studio, trade	service	other	service
People come to it: cafe, bar, bakery, restaurant, guesthouse, small hotel, shop, florist, bike shop, gym, local studio	place	other	place

A maker that also opens its door or teaches (a ceramics studio, a bakery with a web shop) is a place; its web shop becomes the goods section. It is a product only when nothing happens at the door.

Tech below means site-kind software, gaming or tech; other is everything else. Effects, scenes, loops, counts, CSS grounds, dark pages and dark heroes are tech only. An other page is photographs, flat colour, type, real icons, the hero's entrance, its dealt moment (photo- or type-led, moments.md) and the hover layer.

2. The page plan by kind

The full plans, deal lists and section order: references/sections.md.

• Place (a cafe, bakery, guesthouse, shop). Photographs lead: 12 to 20 on the full page, 8 to

12 compact, under 8 frames the 3-screen short page, whatever the trade; no client photographs: the draft path and a live search (photos.md), then count; the palette dealt by trade. The hero a photograph whenever a frame fits (a remote place: its region's landscape), the visit block on screen two, the offer, the place, orders or booking. Variety without effects (sections.md section 4): the offer and the place deal different compositions, never two sections round one picture; one type moment (the address or name set large); one main action a screen; list text 16px. Flat grounds, square photographs, one button style, the phone bar, the dealt moments; no effect, ground, loop, fragment, diagram or tab.

• Product and service (site-kind other). Photographs lead: the product, the people, the rooms,

the work, two or more a screen on a product page. Real icons for the tools a studio uses; one still diagram at most; flat grounds and one brand band. No shader effect, print, grain, gradient, scene or loop (the dealt moments only); WebGL only for a product render the brief asks for. A physical product with no photographs is shown in photographs: stand-ins of the same kind of thing from photos.mjs search, each listed in the report, on the full product page; a render (assets/objects/product-render, stills) only when the brief asks for 3D or a render; never a drawing, mood stock or a set of props (sections.md, Product).

• Every product page (photographed, in stand-ins or rendered on a 3D ask, hardware too; the bar is Figure and 1X;

sections.md, Product): the product big where it stands whole (most of its frame, or on the ground at anchor scale), never mid-size in a grey rounded panel on a grey ground; a different picture each section, never one view twice; every headline promise pictured (a family bike shows the child bench); dealt compositions, no structure twice, one contrasting ground; the swatch changes the picture, every colour shown once; no fact twice; buttons step and press (rule 5).

• Tech (software, gaming, hardware). The client's own subject leads at true size. Software: its

own UI as live HTML showing what it works on (a code-review tool: a red and green diff with its Accept action) in one app-frame, never a generic dashboard or only fragments on panels; cards: fragments on lit panels, pulsing diagrams, real icons. Hardware: its photographs, else stand-in photographs of its kind (a render only when the brief asks for 3D), never a split hero of only an order form or a drawn SVG. A game: its name in the h1, a launch line, its world as full-bleed key art (else its name set large over stand-in photographs of its setting), an effect never in its place (sections.md, Gaming). 60 to 80 words a screen outside UI mocks (copy.md). By deal: one effect (a shader ground in the hero or the one [data-visual] frame, a WebGL part, an object or one big scene) and one or two moments in their own sections; four live WebGL contexts at most; no card moves with the scroll (effects-usage.md).

• One object never carries the page. The product or hero object whole leads the hero and **two more sections at

most**; another kind of visual the brief supports carries the rest (sections.md section 1, its table): a game's world and crew; hardware's use at the bench, its parts close up; a still diagram card, a type moment, a context photograph where the trade allows.

• The client's own assets get slots. A trailer, key art, screenshots, CAD renders or a motion

video the brief names each get a frame that reads finished now (a real ` with a stand-in poster, a play control only when there is a page or file to play, three to five stand-in photographs of the world, a CAD frame), named in a comment for the client's file, never empty (sections-library.md`, client-slots).

3. What serves which page

Open the reference of every asset family the page uses first. A dash means never.

Need	Asset	Software, gaming	Hardware	Product, service	Place	Reference
Heights, edges, heroes, type	system.css, assets/layout	dealt hero	dealt hero	dealt hero	place hero	layout-v4.md
Sections and recipes	starter.html	its plan	product plan	its plan	place plan	sections.md, sections-library.md
Tokens, grid, buttons, nav, footer, colour	system.css, system.js	yes	yes	yes	place tokens	system.md
Forms, keyboard, head and share tags	starter.html, system.css, system.js	yes	yes	yes	yes	system.md
Copy, contacts, credits	scripts/copy-lint.mjs	yes	yes	yes	yes	copy.md, copy-voice.md
Hero entrance, hover, press, focus, nav, tabs	assets/motion	yes	yes	yes	yes	motion.md
Card loops, a count	assets/motion, assets/ui	yes	yes	-	-	motion.md, cards.md
Photographs	scripts/photos.mjs	people, customers; a game's art, else stand-ins of its setting	lead	lead	lead, 12-20	photos.md
Real tool, app and file icons	scripts/icons.mjs	yes	yes	tools really used	-	icons.md
Feature cards, UI fragments	assets/ui	lead (gaming: none)	its app	an app the client runs	-	cards.md
Diagram cards (hub, lanes, pulses)	assets/diagrams	0-2, pulsing	0-2, pulsing	0-1, still	-	diagrams.md
CSS grounds	assets/backgrounds	0-2 dealt	0-2 dealt	flat tokens	flat tokens	backgrounds.md
Shader grounds	assets/effects	the one effect	the one effect	-	-	effects-usage.md
Creative parts (fx-*)	assets/components	yes	yes	fx-photo plain, fx-map still	fx-map still	effects-creative.md
Objects and prints	assets/objects	one, as the effect; a render when the brief asks for 3D	its render when the brief asks for 3D	its render when the brief asks for 3D	-	effects-objects.md
Award-site moments	assets/moments	1-2	1-2	1-2 (photo, type)	1-2 (photo, type)	moments.md
Big scenes	assets/scenes	0-1	0-1	-	-	scenes.md
Speed and weight	scripts/perf.mjs	yes	yes	yes	yes	perf.md

Read copy.md, copy-voice.md, system.md, layout-v4.md and sections.md in full before the first page.

4. The run

1. The stack. An empty folder builds a static page: copy /assets into assets and

start from assets/starter.html. An existing project builds in its own stack, its components taking the starter's markup and classes, with the kit copied into its public folder (public/assets) and loaded from there as plain files. A brief that asks for Next.js builds a static export (output: 'export'), checked on its built page (--root out).

1. Read the brief. Write down the kind (section 1), what is sold, who buys it, the one main

action (the transaction: Book a room, Order a cake, Start a free trial; a place with neither: Get directions) and the real material: logo, screens, photographs, prices, address, hours. Then arm the finish gate, before any page exists:

node /scripts/gate.mjs --start index.html --kind  --category "" --primary ""

A framework build names its dev server's URL (--start http://localhost:5173/) or its built page (--start dist/index.html --root dist; a Next.js export: out) in place of index.html, and rebuilds before every gate run.

1. Write all the copy first, with the copy layer (copy-voice.md: the fact sheet, the voice

card on the plan, the page's shape, the device budget; a register from copy-registers.md, the moves of copy-moves.md) within the rules of copy.md: the h1 names the category and the buyer or the place (a game: its name and genre), one hard fact on the first screen, a noun in every heading, buttons as a verb and an object. Nothing is invented but a coined brand name (searched first, the result kept in names.json beside the page) and, on a place, plausible hours and prices, each marked data-assumed (copy.md, What may be assumed). A draft kept in a .md file lints the same way as the page (the voice card and part labels are skipped).

1. Plan the page as screens. Line 1: the kind. Line 2: the deal (step 4), with one sentence on

why the palette fits the trade. Then one line per section: its id, its one idea, its picture and its kind (object, use, parts, world, slot, diagram, type; three object lines at most), its screens (1 or 2, from its content height, layout-v4.md section 2), which section holds a moment and why it moves (on tech also the effect or the scene). Pick the photographs now (photos.md); their count, stand-ins included, sets a place's length (section 2). Then read cards.md and the recipe of every id you use in sections-library.md.

1. Deal, never choose by taste. Each command keeps a history, so pages differ:

Command	What it does
node /assets/layout/deal.mjs --type --has --history .taste-skill/layout-history.json	the hero; a game adds --kind gaming, hardware --kind tech
node /scripts/start.mjs deal --page --trade --history .taste-skill/history.json	three palettes made for the trade, three pairings: take the first; add --axis after a word or editorial hero
node /scripts/start.mjs css --page --palette --type --radius soft --history .taste-skill/history.json
node /scripts/start.mjs brand --page place --bg "#.." --ink "#.." --accent "#.." [--surface "#.."] [--muted "#.."] --type --radius soft	the client's own colours (a logo, a painted shopfront), in place of css
node /scripts/moments.mjs pick --page --count 1|2 --fits section,statement --photo --history .taste-skill/history.json	every kind
node -e "for(const l of process.argv.slice(1)){const o=l.split('|');console.log(o[Math.floor(Math.random()*o.length)])}"

Run every command from the project folder (the deal arms the gate in the folder it runs in, or joins the build already open one or two folders up). The lists, in order nav, footer, close, rhythm, buttons, mark (sections.md sections 2 and 3):

• software: "nav-mega|nav-cards|nav-centre" "footer-dark|footer-statement|footer-columns" "close-type|close-word" "dark-band|surface-pairs|space" "solid|pill|tonal|arrow" "wordmark|initial|arc|ring|stack|dots"
• gaming: "nav-mega|nav-centre|nav-cards" "footer-dark|footer-statement" "close-word|close-type" "dark-band|media-band|space" "solid|pill|block" "wordmark|initial|arc|ring|stack|dots"
• product and hardware: "nav-cards|nav-split|nav-mega" "footer-columns|footer-dark" "close-photo|close-type|close-word" "dark-band|brand-band" "arrow|solid|block|pill" "wordmark|initial|arc|ring|stack|dots"
• service: "nav-mega|nav-split|nav-centre" "footer-visit|footer-dark|footer-columns" "close-type|close-photo" "surface-pairs|dark-band|space" "solid|tonal|block|arrow" "wordmark|initial|arc|ring|stack|dots"
• place: the whole line in sections.md section 4, Place (The deal), read in its order.

A product or hardware with no photographs deals with --has photo for its stand-ins; --has object only for a cut-out or a render the brief asks for (always the product hero, its widest view across the wrap, no box); a game without art files passes --has setting (the photo hero, its name over a stand-in of its setting; a game always passes --has). A product page is dealt only the product, photo and film heroes. A place's hero is printed, never dealt (--type place). A dealt part that needs a photograph the page lacks is dealt again (sections.md section 2). Take the first palette and the first pairing printed (the next only when the first clashes with the client's own logo or photographs, or the pairing fails hero-lines, said on plan line 2); the client's own colours go through start.mjs brand instead (sections.md section 4, Look); never violet: deal again. Keep the :root block as printed. Radius: sharp for fintech and developer tools, soft by default, round for consumer apps, square on a place. On tech only: the lit ground (`: sand|sky|sage through the one-liner), the CSS grounds (backgrounds.md) and the one effect (effects-usage.md). Write every result on plan line 2 and in the comment at the top of , and build exactly that (a short page drops what it has no section for: sections.md` section 4).

1. Build. In starter.html: set ``

(lang: the brief's language), the three metas, the head block (title, description, og, icon, theme-color: system.md, Head) and the nav class; keep the skip link and the m-enter head line; copy only the ` of assets/layout/hero-.html (never its nav, other sections, footer or credit line; every word and picture becomes the client's); move the dealt close and footer out of their s and delete the rest. Every section is main > section with one .wrap, its h2 first, --h: 1 or 2. Build each to its recipe with the system's classes and tokens; write page CSS only where a reference says page CSS (inside a visual, --p-h, .wall, .rail, .device). Paste UI from assets/ui//fragment.html and rewrite every name, number and logo to the client's (kit icons become data-icon, cards.md); a diagram card is data-diagram="" with the client's labels; run icons.mjs scan index.html --out assets/icons --colour last, so every icon the page names is a local file. Mount an effect, object, moment or scene exactly as its reference says, never from your own script. A moment's section is copied from assets/moments/_demo/in-page.html (place: photo-chapters, word-highlight) or in-page-service.html (pinned-chapters, picture-develops film); a moment's own demo.html shows it alone and is not a page model. A form is the starter's booking-form (system.md, Forms). Credits: the one footer line from photos.mjs credits, once the markup uses the photographs (it reads the page). Copy the hero's tile from shoot.mjs beside the page as share.jpg`.

1. Check and look. Only the skill's scripts, each running one headless Chrome with WebGL on the

CPU, closed by its own PID, one at a time in the foreground with a 10-minute timeout; never in the background, a windowed browser or a browser tool. Each serves the page file itself over http on 127.0.0.1 (never file://), so no server is needed; for a built page whose links start at the site root (/_astro/page.css), pass --root with the build folder (dist). --profile is the Chrome profile: a folder of its own in the OS temp folder or in the project's .taste-skill folder (.taste-skill/chrome-check), never outside the project (no ../); a relative one that leads out of it is replaced by .taste-skill/chrome-. Then:

node /scripts/copy-lint.mjs index.html --kind 
   node /scripts/consistency.mjs index.html --widths 1440,1024,820,768,390 --rhythm-widths 1440,820,768,390 --profile  --page  --category "" --primary ""
   node /assets/layout/check.mjs --url index.html --profile  --sizes 1440x900,1024x768,820x1180,768x1024,390x844 --shots shots/layout
   node /scripts/shoot.mjs --url index.html --w 1440 --out shots/1440.png --profile 
   node /scripts/perf.mjs index.html --profile

Shoot 1024, 820x1180, 768x1024 and 390 as well. Every check.mjs finding fails the page (no --no-stress). copy-lint opens no browser and takes under a second. Fix every FAIL (a copy-lint WARN too, or say why it stays) and read the copy aloud (copy-voice.md section 6); shoot again and read every screenshot against the checklist. In the fix rounds run consistency.mjs --quick --widths 1440,390. Then the