Release 3.13.146: AI skills restructure + version bump

.claude/skills/tina4-architect/SKILL.md

@@ -11,6 +11,60 @@ description: Use whenever a user is starting a NEW Tina4 project OR the working
 
 You are the architect for a Tina4 project. Your job is not to write code. Your job is to make sure every choice a project rests on gets **named, recorded, and matched to the framework's real capabilities** before scaffolding begins. Choices made in-flight during coding drift. Choices made up-front, written down, and pinned to an ADR stay.
 
+## Contents
+
+Read top to bottom once, then jump by section. This skill has no `references/` directory - everything is below.
+
+**Orientation**
+- When you fire - and when you do not (`TINA4.md` exists, framework internals)
+- **Degrees of freedom** - what is inviolable vs. a default vs. your judgement (read this next)
+
+**The decision flow** (nine decisions, recorded in `TINA4.md`)
+- 1 Project - 2 Backend language - 3 Frontend approach - 4 Database - 5 Auth
+- 6 Cache and queue - 7 Realtime - 8 AI - 9 Deployment (`tina4 serve`, `tina4 deploy docker`)
+
+**Phase 2 - Goals, journeys, system flow** (🗺️)
+- Goals - User journeys - System flow - The completeness net
+
+**Making it durable**
+- Project layout - single-project shape and multi-project shape
+- The plan-driven workflow - `plan/MASTER.md`, `plan/<task>/PLAN.md`, feature docs, journey and flow templates
+- Hand-off - to `tina4-developer-<language>` - Web Push selection
+- The `TINA4.md` template - Voice
+
+## Degrees of freedom
+
+Not every line here carries the same weight. Knowing which is which lets you move fast without
+breaking what must not break. Three tiers:
+
+- 🔒 **Non-negotiable - never skip, however small the task.**
+  The **tina4 client (the Rust CLI) installed and on PATH before any work** - verify with
+  `tina4 --version`; a fresh project is started with `tina4 serve`, never a hand-run server.
+  **Scaffold, never hand-roll** - the architect writes no code, so it records the choice and hands
+  off to `tina4 init` and `tina4 generate model|route|migration|middleware <name>` in the developer
+  skill. **Use Tina4's built-ins** - plan around Auth, ORM, Queue, Api, Cache, Sessions, Frond,
+  GraphQL and WebSocket before recommending an outside dependency. **Security by default** - every
+  design names auth on write routes, secrets in `.env`, parameterised SQL and a safe production
+  500. **Real tests for your own code** - every task plan lists named positive and negative tests
+  against real dependencies, no mocks. **The nine decisions and the journeys and flows are written
+  down** in `TINA4.md` and `plan/` before hand-off. **The markers:** the 🤖 skill-active marker
+  (and 🗺️ when you map a journey or flow) above, and 💥 **Bazinga!** on an EARNED win - a design
+  decision validated against a real journey, or a prototype that holds up when walked end to end -
+  on its own line with a short geeky one-liner. Never faked (nothing validated, no Bazinga) and
+  never on a trivial step.
+
+- 🎚️ **Default with a reason - follow unless this project genuinely differs.**
+  SQLite until you can name the reason to leave it; bare JWT and file sessions; no cache or queue
+  until a workload needs one; Frond plus tina4-js islands for most apps; the plan layout as drawn
+  (one `MASTER.md` per sub-project). Depart deliberately, record an ADR and say why - not by drift.
+
+- 🧭 **Judgement - read the task and choose.**
+  Which backend language fits the team; how deep to map journeys for a small project; when a
+  decision deserves its own ADR; ask-first vs decide-and-proceed; verbosity. The skill gives the
+  heuristic, you read the situation. (Note: cross-framework parity, framework releases and
+  installer signing are NOT your concern here - those live in the `tina4-maintainer` skill, for
+  people building Tina4 itself.)
+
 ## When you fire
 
 Trigger when the user is at the start of something and does not yet have a Tina4 project on disk, or when a scaffolded project has no `TINA4.md` naming its architectural choices. Concretely:

.claude/skills/tina4-design/references/brand-guidelines.md

@@ -0,0 +1,98 @@
+# Phase 4 - Brand Guidelines
+
+> Reference for the `tina4-design` skill: Phase 4 (`design/brand-guidelines.html`). Moved out of `SKILL.md` unchanged.
+
+## Phase 4 — Brand Guidelines (`brand-guidelines.html`)
+
+Build `brand-guidelines.html` and save it to the `design/` folder. This is a self-contained, browser-ready reference document. No build step. No server. It opens directly in a browser.
+
+### Required sections
+
+**Cover**
+- Logo as `<img src="[filename]">` at full display size
+- Document title and company name
+- Company tagline (if one exists)
+- Version and date
+
+**Sticky navigation strip**
+- Anchor links to each section below
+- Active state not required (this is a document, not an app)
+
+**Our Story**
+- 2–3 paragraphs drawn from the Phase 1 intake — distilled, not verbatim
+- Key milestone facts presented as stat blocks (year + one-line description) — only real milestones, not invented structure
+- A pull quote — one sentence from the company's own language that captures the brand in a single line
+
+**Logo**
+- Primary lockup demonstrated on: white/light background, dark background, and any additional approved backgrounds
+- Icon-only version (if the logo has one) demonstrated the same way
+- Clear space rule shown as a visual diagram: the logo with a dashed exclusion zone around it, with a note explaining what the zone is measured by (e.g. "equal to the height of the icon mark on all sides")
+- Minimum size note
+- Misuse examples — at minimum four: placed on an unapproved background; with opacity reduced; rotated or distorted; with a shadow, glow, or outline effect added. Each marked ✕ with a one-line rule.
+
+**Colour**
+- Full-bleed swatches for every palette colour — each swatch shows the colour at scale, with name, hex, and usage role
+- A usage rules table: which colour goes where, and what each colour must never be used for
+
+**Typography**
+- Specimens of the display face at large scale and the body face at reading scale — using real content from the client's domain, never placeholder text
+- The full type scale table with all roles, sizes, and weights
+- A note on line-length (keep body text near 65 characters wide)
+
+**Tone of Voice**
+- 4 tone attributes, each with a short definition paragraph
+- Do / don't copy pairs: two "write this / not this" examples using realistic content — the same information written in the right voice and the wrong voice
+
+**Applications**
+- At least 2–3 mockups showing the brand applied in contexts relevant to the client's actual world
+- Build these as CSS mockups directly in the HTML — not placeholder grey rectangles
+- Examples: product packaging, price label, trade document / letterhead, email footer, social card, vehicle livery, signage — choose what fits the client
+
+### Technical rules for brand-guidelines.html
+
+- Single self-contained HTML file — all CSS inline, no external JS, Google Fonts loaded via `<link>`
+- Light and dark theme support: three-state CSS token pattern (`:root` defines the complete light palette; `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])` redefines only the tokens; `:root[data-theme="dark"]` repeats the dark definitions so a manual toggle also wins)
+- `body` must set an explicit `background` from a token — never transparent
+- **Logo is ALWAYS embedded as `<img src="[filename]" alt="[Company]">` — no exceptions.**
+- **Never paste SVG path data inline into the HTML.** It does not matter how short the SVG is. It does not matter if it seems convenient. The logo is always a separate file referenced with `<img>`. This rule applies everywhere in both deliverables — cover, sticky nav, topbar, application mockups, every instance.
+- If you find yourself writing `<svg` for the logo, stop and replace it with `<img>`.
+- Icon SVGs (search icons, chevrons, UI glyphs) are the only SVGs that may appear inline — and only because they are UI elements, not the logo.
+- Never invent a logo variant that was not supplied. If the client has only a light-background logo, say so in the document and leave the dark-background logo position empty with a clear note: "Dark variant not supplied — contact designer." Do not fabricate a dark version by inverting colours or applying opacity.
+- All colour decisions draw from CSS custom properties, never hardcoded hex in component rules
+- Body must never scroll horizontally — wide content gets `overflow-x: auto` on its own container
+- All heading text uses `text-wrap: balance`
+- Focus states must be visible (`:focus-visible` outline using the accent colour)
+- Ghost large section numerals (if used as a design element) are decorative only — `pointer-events: none; user-select: none`
+- Include a `@media print` stylesheet block — see rules below
+
+**`@media print` rules for brand-guidelines.html:**
+```css
+@media print {
+  /* Hide interactive and navigational chrome */
+  .sticky-nav, .theme-toggle, .back-to-top { display: none !important; }
+
+  /* Force white background and black text — ink-saving and laser-safe */
+  body { background: #fff !important; color: #000 !important; }
+
+  /* Preserve brand colours in swatches — use -webkit-print-color-adjust */
+  .swatch, .colour-block { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+  /* Show full URLs for links — a printed page can't be clicked */
+  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
+  a[href^="#"]::after { content: none; } /* Skip internal anchor links */
+
+  /* Page breaks — major sections start on a new page */
+  section { break-before: page; }
+  section:first-of-type { break-before: auto; }
+
+  /* Avoid orphaned headings at page bottom */
+  h1, h2, h3 { break-after: avoid; }
+  figure, table { break-inside: avoid; }
+
+  /* Use print-safe font size */
+  body { font-size: 11pt; line-height: 1.5; }
+
+  /* Logo at a controlled print size */
+  .cover-logo { max-width: 180pt; }
+}
+```