From 104de5dc5ad2e01a2313205f735d19850b16f7d8 Mon Sep 17 00:00:00 2001 From: Andre van Zuydam Date: Mon, 19 Oct 2026 07:53:14 +0200 Subject: [PATCH] docs(skills): state mobile-first as a design-methodology default The tina4-design skill already builds mobile-first (ui-guide.md: base styles are the mobile styles, min-width enhancement, 44x44px touch targets, fluid clamp() type), but it was only a CSS comment, never a declared stance. Elevate it to a Degrees-of-freedom default so the design lead reaches for it by reflex: design the smallest screen first, enhance upward with min-width, never patch a desktop layout down with max-width. 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-design/SKILL.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/.claude/skills/tina4-design/SKILL.md b/.claude/skills/tina4-design/SKILL.md index 7f28c8f5..a73a3de9 100644 --- a/.claude/skills/tina4-design/SKILL.md +++ b/.claude/skills/tina4-design/SKILL.md @@ -81,10 +81,13 @@ breaking what must not break. Three tiers: one-liner. Never faked (nothing validated, no Bazinga) and never on a trivial step. - 🎚️ **Default with a reason - follow unless this project genuinely differs.** - The six-phase order; the deliverable set (`DESIGN.md`, `brand-guidelines.html`, `ui-guide.html` - in `design/`); fluid `clamp()` type, CSS-variable tokens and hue-tinted shadows; the avoid-list - of AI design defaults. Depart deliberately, name the client-specific reason and record it in the - rationale log - not by drift. + The six-phase order; **mobile-first layout** - design the smallest screen first and enhance + upward with `min-width` media queries, never patch a desktop layout down with `max-width`; the + base styles ARE the mobile styles, every interactive control is at least 44x44px, and the fluid + `clamp()` type needs no breakpoint to scale; the deliverable set (`DESIGN.md`, + `brand-guidelines.html`, `ui-guide.html` in `design/`); fluid `clamp()` type, CSS-variable tokens + and hue-tinted shadows; the avoid-list of AI design defaults. Depart deliberately, name the + client-specific reason and record it in the rationale log - not by drift. - 🧭 **Judgement - read the task and choose.** Which deliverables the scope needs; how much market research a small brief earns; when the