From 0252f3dbcf1fdea9ea18361d02e69274d31172f4 Mon Sep 17 00:00:00 2001 From: Andre van Zuydam Date: Mon, 19 Oct 2026 07:57:35 +0200 Subject: [PATCH] docs(skills): echo mobile-first into js, architect, developer-python Mobile-first is now a stated default in tina4-design (PR #240). Echo the same stance into the skills that actually lay out UI, so it holds whoever is building: - tina4-js: a Mobile-first layout section before HTML Templates. - tina4-developer-python: a Mobile-first layout note by the Frond template discipline. - tina4-architect: a completeness-net dimension so every journey is checked on a phone. Wording is consistent: smallest screen first, enhance up with min-width, never patch desktop down with max-width, 44x44px touch targets; the tina4-design skill owns the token + breakpoint detail. Co-Authored-By: Tina4 <82961293+tina4stack@users.noreply.github.com> Co-Authored-By: Claude Opus 4.8 Signed-off-by: Andre van Zuydam --- .claude/skills/tina4-architect/SKILL.md | 1 + .claude/skills/tina4-developer-python/SKILL.md | 7 +++++++ .claude/skills/tina4-js/SKILL.md | 7 +++++++ 3 files changed, 15 insertions(+) diff --git a/.claude/skills/tina4-architect/SKILL.md b/.claude/skills/tina4-architect/SKILL.md index 3763d0cc..b4263374 100644 --- a/.claude/skills/tina4-architect/SKILL.md +++ b/.claude/skills/tina4-architect/SKILL.md @@ -211,6 +211,7 @@ The happy path is the easy 20%. Walk this net for every journey and every featur - **Security** — secrets in `.env` not code; CORS closed by default; rate limits on public writes; form tokens on posts; no secrets in logs or URLs. - **Boundaries of scale** — never an unbounded list (paginate); eager-load to kill N+1; cache only where you measured a hit. - **The exit** — graceful shutdown drains in-flight work; migrations run on deploy; a backup exists. +- **Mobile-first & responsive** — design the smallest screen first and enhance up with `min-width`; every journey must work on a phone, touch targets at least 44x44px. The `tina4-design` skill owns the detail. Nothing on this net is allowed to stay un-addressed by silence. That is the whole point of writing it down. diff --git a/.claude/skills/tina4-developer-python/SKILL.md b/.claude/skills/tina4-developer-python/SKILL.md index 495886a4..8833820c 100644 --- a/.claude/skills/tina4-developer-python/SKILL.md +++ b/.claude/skills/tina4-developer-python/SKILL.md @@ -1277,6 +1277,13 @@ against assumptions about another engine's compatibility. and subscript access (`{{ items[loop.index0 % 3] }}`) work as documented. - If a documented Frond feature misbehaves, that's a **framework bug** — report it (see below). +### Mobile-first layout + +Build the smallest screen first, then enhance upward with `min-width` media queries - the base +styles ARE the mobile styles, never a desktop layout patched down with `max-width`. Keep every +interactive control at least 44x44px. Map tokens onto tina4-css; the `tina4-design` skill owns the +full token + breakpoint detail. This is the default stance for any view you write. + ### Web Push (Feature 140) Use `references/web-push.md` for the provider-neutral Web Push contract. Treat it as a standalone outbound integration, not WebSocket or Server-Sent Events. Keep it configuration-first, fail loudly on partial VAPID configuration, and install the optional `tina4-python[push]` capability only when the project enables it. diff --git a/.claude/skills/tina4-js/SKILL.md b/.claude/skills/tina4-js/SKILL.md index dad7b9ed..c9a408a1 100644 --- a/.claude/skills/tina4-js/SKILL.md +++ b/.claude/skills/tina4-js/SKILL.md @@ -729,6 +729,13 @@ batch(() => { }); ``` +## Mobile-first layout + +Build the smallest screen first, then enhance upward with `min-width` media queries - the base +styles ARE the mobile styles, never a desktop layout patched down with `max-width`. Keep every +interactive control at least 44x44px. Map tokens onto tina4-css; the `tina4-design` skill owns the +full token + breakpoint detail. This is the default stance for any component you build. + ## HTML Templates — DOM Creation Read `references/html-and-components.md` for the full API. Quick reference: