/taste-skill

name: design-taste-frontend
description: >-
  tasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level
  of figma.com and x.ai: plain copy in a voice of its own, one system, one section per screen,
  equal edges, real photographs and real product UI (licensed stand-in photographs when the client
  has none; a product render only when the brief asks for 3D), a hero entrance and one or two dealt
  moments on every page, shader effects and scenes only on tech, gaming and software pages, quiet
  micro-interactions, and a checker and finish gate that enforce it in a real browser. Use this
  whenever you build, design, redesign, restyle, polish or review a landing page, company,
  product, shop, cafe, hotel, studio, SaaS, AI, developer-tool or game site, as static HTML/CSS or
  inside an existing React, Next.js, Vue, Svelte, Astro or Tailwind project, or when the user says
  a page looks generic, templated or "AI-made".
hooks:
  Stop:
    - hooks:
        - type: command
          command: 'for f in ${CLAUDE_SKILL_DIR:+"$CLAUDE_SKILL_DIR/scripts/gate.mjs"} ${CLAUDE_PLUGIN_ROOT:+"$CLAUDE_PLUGIN_ROOT/scripts/gate.mjs" "$CLAUDE_PLUGIN_ROOT/skills/taste-skill/scripts/gate.mjs"} ${CLAUDE_PROJECT_DIR:+"$CLAUDE_PROJECT_DIR/.claude/skills/design-taste-frontend/scripts/gate.mjs" "$CLAUDE_PROJECT_DIR/.agents/skills/design-taste-frontend/scripts/gate.mjs"} ${HOME:+"$HOME/.claude/skills/design-taste-frontend/scripts/gate.mjs" "$HOME/.agents/skills/design-taste-frontend/scripts/gate.mjs"}; do if [ -f "$f" ]; then exec node "$f" --hook claude; fi; done; if [ -d .taste-skill ]; then printf "%s gate.mjs not found; CLAUDE_PLUGIN_ROOT=%s CLAUDE_PROJECT_DIR=%s HOME=%s\n" "$(date -u +%Y-%m-%dT%H:%M:%SZ)" "${CLAUDE_PLUGIN_ROOT-}" "${CLAUDE_PROJECT_DIR-}" "${HOME-}" > .taste-skill/gate-hook-missing.txt 2>/dev/null; fi; for d in .taste-skill */.taste-skill; do if [ -f "$d/build.json" ]; then echo "tasteskill gate: gate.mjs not found (CLAUDE_PLUGIN_ROOT=${CLAUDE_PLUGIN_ROOT-}); the build in $d is not checked" >&2; break; fi; done; exit 0'
          timeout: 600

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).

`<skill>` 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. 2. **Every visual renders, never an empty ground,** at 1440, 1024, 768 and 390. 3. **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. 4. **Equal left and right content edges.** 5. **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). 6. **More and better real photographs where they fit;** nicer backgrounds; better heroes, layouts and fonts. 7. **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). 8. **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. 9. **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 `<html data-type>` and `<meta name="page-type">` (the same value), and `<meta name="site-kind">`; a place adds `<meta name="page-kind" content="place">`. 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