From a2e654d89f108edc0917185f716229b4c01ed2c8 Mon Sep 17 00:00:00 2001 From: bastien Date: Sun, 27 Sep 2026 20:23:52 +0200 Subject: [PATCH] feat(rules): write-time UI reflexes in web-building.md, from ui-skills Fourteen lines of stack-agnostic micro-rules (dvh, safe-area, paste, tabular-nums, text-wrap, z-index scale, compositor-only motion, 44 px targets, focus-visible, status not by color alone, errors by the field, one accent per view). Case 3 of the 6-repo review: nothing installed. --- CHANGELOG.md | 8 ++++++++ rules/web-building.md | 15 +++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e9b01f..f8133c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ Format follows [Keep a Changelog](https://keepachangelog.com/). ## [Unreleased] ### Added +- **rules/web-building.md § Write-time reflexes** — stack-agnostic + micro-rules borrowed from ibelick/ui-skills (baseline-ui + playbook): dvh + and safe-area, paste never blocked, tabular-nums and text-wrap, one + z-index scale, compositor-only motion with reduced-motion and off-screen + pause, 44 px targets and focus-visible, status never by color alone, + errors next to the field, one accent per view. Case 3 of the 6-repo + review: nothing installed (CLI and MCP are a curl of raw SKILL.md, a + third router, and baseline-ui's stack mandates contradict Astro-first). - **`make test suite=`** runs one suite hermetically; the `GIT_CONFIG_GLOBAL=/dev/null` export lives in the Makefile so nobody types the denied env-prefix form by hand (the reason an executor wrote a wrapper diff --git a/rules/web-building.md b/rules/web-building.md index c60a473..61fbc0e 100644 --- a/rules/web-building.md +++ b/rules/web-building.md @@ -18,6 +18,21 @@ paths: ["**/*.html", "**/*.astro", "**/*.css", "**/*.scss", "**/*.tsx", "**/*.js - Inter, Geist or Space Grotesk as the default font: propose an alternative and justify it. Existing brand identities keep their fonts. +## Write-time reflexes (stack-agnostic, from ui-skills) +- Full height: `100dvh`, never `100vh`; fixed elements respect + `safe-area-inset`. Never block paste in inputs. +- Numbers: `tabular-nums`. Headings `text-wrap: balance`, body `pretty`. + Long labels: truncate or line-clamp, never overflow. +- One z-index scale from tokens, no arbitrary values. +- Motion: transform and opacity only; feedback under 200 ms, ease-out on + entrances, never from scale(0); `will-change` only during an active + animation; pause loops off-screen; honor `prefers-reduced-motion`. +- Touch targets 44 px minimum; visible `:focus-visible` ring; status never + by color alone, add text or an icon. +- Errors next to the field; empty state = one clear action; destructive + action confirmed first. +- One accent color per view; solid modal backdrop, no full-screen blur. + ## Before declaring a public site done Check: custom 404 · call to action in the first viewport · per-page title + description · share/OG image · favicons · robots.txt · sitemap ·