Tastegate

Tastegate combines three things for any UI build. First, taste decides what the page should be before any code is written. Second, a craft floor holds the mechanics every page must meet. Third, a gate renders the page in a real browser at phone and desktop width and refuses to call the work done while any hard finding is open. The reasoning is simple: whoever wrote the CSS cannot see that the hero overlaps the nav at 390px, but the browser can.

The workflow has four steps, applied in order. Step 1 is to read the room before building: write one line naming the page kind, the audience, the vibe, a type pairing, a palette family and one signature detail. Three dials from 1 to 10 are set from that read: variance, motion and density. A default landing page uses 7, 6 and 4, while a trust-first or regulated page uses 3, 2 and 5. Step 2 builds on the craft floor: a real display face paired with a readable text face, body text of 16px or more, one neutral family with one accent, no purple-to-blue glow gradients or gradient text, a hero that fits the first screen with its call to action visible, real SVG icons instead of emoji, and no placeholder copy such as lorem ipsum or Acme. Every control gets hover, focus-visible, active, disabled, loading, empty and error states, motion is one authored moment that respects prefers-reduced-motion, and multi-column blocks declare what they become under 768px with tap targets of at least 44px. Step 3 runs the gate, which renders the page in headless Chromium at 390x844 and 1440x900, prints each finding with its rule, viewport and element, saves full-page screenshots, and exits 1 while any fail finding is open. Step 4 is to open both screenshots yourself and ask whether a designer at a good studio would ship the result.

Use it for any UI build: a landing page, marketing site, dashboard, app screen or component. Use it for a redesign, a polish pass, or a "make it look better" request, when a page needs to stop looking generic, and before calling any frontend work done, as the proof step.

Do not use it as a substitute for human judgment. The gate checks mechanics and cannot tell you a page is boring, off-brand or wrong for the audience, which is why step 4 is not optional. It does not replace accessibility auditing by a human or real user testing. If the brief pins fonts, colors or an era, the brief overrides the craft floor.

The input is a path to an index.html file or a reachable URL such as a local server, plus an output directory. The gate is run like this:

python3 skills/tastegate/scripts/gate.py <path/to/index.html or http://localhost:3000> --out .tastegate

Run it from the repo root, or use the path to wherever the skill is installed. Output is a list of findings, each with a rule, viewport and element, plus screenshots saved as .tastegate/desktop.png and .tastegate/mobile.png. Fail findings should be fixed in one batch and the gate rerun, while warnings are judgment calls to fix unless the brief asked for that thing. The report back should include the gate's last line and the screenshot paths. The gate is read-only against your project: it renders, measures and writes into the output directory without editing source files.

The gate needs Playwright and headless Chromium. On the first run only, install them with pip install playwright and python3 -m playwright install chromium. The skill ships a scripts/gate.py browser gate, a references/direction.md file with the full step 1 rules, and a references/craft-floor.md file to read right before the first UI edit. Point the gate only at your own page or a local server in an authorized test environment, since it fetches whatever that page fetches.

Frontend developers and designers who build pages with an agent and want proof instead of a glance at the markup, and anyone who wants pages chosen for their audience rather than for a default font, palette or three-card grid. Typical catches include a hero heading overlapping the nav at 390px, 3.1:1 contrast on secondary text, and sideways scroll from an un-wrapped feature row. The skill is adapted from the MIT-licensed tastegate project, with direction rules from taste-skill and a craft floor from impeccable.