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.
This commit is contained in:
@@ -7,6 +7,14 @@ Format follows [Keep a Changelog](https://keepachangelog.com/).
|
|||||||
## [Unreleased]
|
## [Unreleased]
|
||||||
|
|
||||||
### Added
|
### 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=<file>`** runs one suite hermetically; the
|
- **`make test suite=<file>`** runs one suite hermetically; the
|
||||||
`GIT_CONFIG_GLOBAL=/dev/null` export lives in the Makefile so nobody types
|
`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
|
the denied env-prefix form by hand (the reason an executor wrote a wrapper
|
||||||
|
|||||||
@@ -18,6 +18,21 @@ paths: ["**/*.html", "**/*.astro", "**/*.css", "**/*.scss", "**/*.tsx", "**/*.js
|
|||||||
- Inter, Geist or Space Grotesk as the default font: propose an
|
- Inter, Geist or Space Grotesk as the default font: propose an
|
||||||
alternative and justify it. Existing brand identities keep their fonts.
|
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
|
## Before declaring a public site done
|
||||||
Check: custom 404 · call to action in the first viewport · per-page
|
Check: custom 404 · call to action in the first viewport · per-page
|
||||||
title + description · share/OG image · favicons · robots.txt · sitemap ·
|
title + description · share/OG image · favicons · robots.txt · sitemap ·
|
||||||
|
|||||||
Reference in New Issue
Block a user