@rubytech/create-siteoffice-code 0.1.256

package/payload/platform/plugins/admin/skills/datetime/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: datetime
+description: >
+  Timezone queries (current time, conversion, UTC offset, DST) and
+  relative-date arithmetic (last Tuesday, two weeks ago, Q3 last year).
+  Trigger phrases: "what time is it in", "convert time", "timezone",
+  "time difference", "DST", "last X", "N days/weeks/months ago",
+  "this/next/previous X", "Qn YYYY", "Qn last year".
+---
+
+# Datetime & Timezone Queries
+
+Answer timezone-related questions and relative-date arithmetic using Node.js — never freelance the math. Relative dates and quarter forms must go through the deterministic one-liner in this skill; the same algorithm runs server-side in the memory plugin's `relative-date.ts`, so chat answers stay consistent with timeline rows the operator sees in the graph.
+
+## When to Activate
+
+- User asks for the current time in a named city or timezone
+- User asks to convert a time between timezones
+- User asks about UTC offset, time difference, or DST status for a location
+- User asks "what time is it?" with a location qualifier
+- User uses a relative date: "last Tuesday", "two weeks ago", "yesterday", "this Christmas", "Q3 last year", "Q1 2025"
+
+For simple "what time is it?" without a location, answer directly from the `<datetime>` block in the system prompt — no tool use needed.
+
+## Behaviour
+
+Use Bash to run a Node.js one-liner with `Intl.DateTimeFormat`. The IANA timezone database is built into Node.js — no external packages are required.
+
+### Current time in a timezone
+
+```bash
+node -e "console.log(new Intl.DateTimeFormat('en-GB', { weekday:'long', year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit', second:'2-digit', timeZone:'IANA_TZ', timeZoneName:'longOffset' }).format(new Date()))"
+```
+
+Replace `IANA_TZ` with the target timezone identifier (e.g., `America/New_York`, `Asia/Tokyo`, `Europe/Berlin`).
+
+### Time conversion
+
+To convert a specific time from one zone to another, construct a `Date` object for the source time and format it in the target zone:
+
+```bash
+node -e "
+const d = new Date('ISO_DATETIME');
+const fmt = (tz) => new Intl.DateTimeFormat('en-GB', { weekday:'long', year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit', timeZone:tz, timeZoneName:'short' }).format(d);
+console.log(fmt('SOURCE_TZ'));
+console.log(fmt('TARGET_TZ'));
+"
+```
+
+### DST and offset info
+
+```bash
+node -e "
+const now = new Date();
+const opts = { timeZone:'IANA_TZ', timeZoneName:'longOffset' };
+const parts = new Intl.DateTimeFormat('en-GB', opts).formatToParts(now);
+const offset = parts.find(p => p.type === 'timeZoneName')?.value ?? 'unknown';
+// Check DST by comparing Jan and Jul offsets
+const jan = new Date(now.getFullYear(), 0, 1);
+const jul = new Date(now.getFullYear(), 6, 1);
+const janOff = new Intl.DateTimeFormat('en-GB', opts).formatToParts(jan).find(p => p.type === 'timeZoneName')?.value;
+const julOff = new Intl.DateTimeFormat('en-GB', opts).formatToParts(jul).find(p => p.type === 'timeZoneName')?.value;
+const dstActive = janOff !== julOff;
+const inDst = dstActive && offset !== janOff;
+console.log('Current offset:', offset);
+console.log('DST observed:', dstActive);
+console.log('Currently in DST:', inDst);
+"
+```
+
+## Common City-to-Timezone Mapping
+
+When the user names a city, map it to the IANA identifier:
+- London → `Europe/London`
+- New York → `America/New_York`
+- Los Angeles → `America/Los_Angeles`
+- Tokyo → `Asia/Tokyo`
+- Sydney → `Australia/Sydney`
+- Dubai → `Asia/Dubai`
+- Mumbai / Delhi → `Asia/Kolkata`
+- Berlin / Paris → `Europe/Berlin` / `Europe/Paris`
+- Singapore → `Asia/Singapore`
+- Hong Kong → `Asia/Hong_Kong`
+
+For less common cities, use Bash to search the IANA database:
+```bash
+node -e "console.log(Intl.supportedValuesOf('timeZone').filter(z => z.toLowerCase().includes('SEARCH_TERM'.toLowerCase())).join('\n'))"
+```
+
+## Relative date arithmetic
+
+When the operator references a relative date — "last Tuesday", "two weeks ago", "yesterday", "this Christmas", "Q3 2024", "Q1 last year" — never compute the result by hand. The agent loses track of weekday offsets, leap-day arithmetic, and quarter-start months. Use this deterministic one-liner. The reference timestamp defaults to now; pass an ISO string as the second argument to anchor against an earlier moment (e.g. when the operator's message timestamp matters).
+
+```bash
+node -e "
+const REF = process.argv[2] ? new Date(process.argv[2]) : new Date();
+const TXT = process.argv[1];
+const WEEKDAYS = {sun:0,sunday:0,mon:1,monday:1,tue:2,tues:2,tuesday:2,wed:3,weds:3,wednesday:3,thu:4,thur:4,thurs:4,thursday:4,fri:5,friday:5,sat:6,saturday:6};
+const NUMS = {one:1,two:2,three:3,four:4,five:5,six:6,seven:7,eight:8,nine:9,ten:10,eleven:11,twelve:12};
+const sod = d => { const o=new Date(d); o.setUTCHours(0,0,0,0); return o; };
+const addD = (d,n) => { const o=new Date(d); o.setUTCDate(o.getUTCDate()+n); return o; };
+const addM = (d,n) => { const o=new Date(d); o.setUTCMonth(o.getUTCMonth()+n); return o; };
+const addY = (d,n) => { const o=new Date(d); o.setUTCFullYear(o.getUTCFullYear()+n); return o; };
+const base = sod(REF);
+let m;
+if (/\\bevery(\\s+other)?\\s+/i.test(TXT)) { console.log('null (recurring)'); process.exit(0); }
+if (m = TXT.match(/\\b(yesterday|today|tomorrow)\\b/i)) {
+  const w = m[1].toLowerCase();
+  console.log((w==='yesterday'?addD(base,-1):w==='tomorrow'?addD(base,1):base).toISOString());
+} else if (m = TXT.match(/\\b(last|next|this)\\s+([A-Za-z]+)\\b/i)) {
+  const q = m[1].toLowerCase(), t = WEEKDAYS[m[2].toLowerCase()];
+  if (t === undefined) { console.log('null'); process.exit(0); }
+  const dow = base.getUTCDay();
+  let delta;
+  if (q==='last') { delta = t-dow; if (delta>=0) delta-=7; }
+  else if (q==='next') { delta = t-dow; if (delta<=0) delta+=7; }
+  else { const id = dow===0?7:dow, it = t===0?7:t; delta = it-id; }
+  console.log(addD(base, delta).toISOString());
+} else if (m = TXT.match(/\\b(a|an|\\d+|one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)\\s+(day|week|month|year)s?\\s+ago\\b/i)) {
+  const w = m[1].toLowerCase();
+  const n = (w==='a'||w==='an')?1:(NUMS[w]??Number(w));
+  const u = m[2].toLowerCase();
+  const d = u==='day'?addD(base,-n):u==='week'?addD(base,-7*n):u==='month'?addM(base,-n):addY(base,-n);
+  console.log(d.toISOString());
+} else if (TXT.match(/\\b(?:this\\s+)?Christmas\\b/i)) {
+  console.log(new Date(Date.UTC(base.getUTCFullYear(),11,25)).toISOString());
+} else if (TXT.match(/\\b(?:this\\s+)?New\\s+Year(?:'s)?(?:\\s+Day)?\\b/i)) {
+  console.log(new Date(Date.UTC(base.getUTCFullYear(),0,1)).toISOString());
+} else if (m = TXT.match(/\\bQ([1-4])\\s+(\\d{2}|\\d{4})\\b/i)) {
+  let y = Number(m[2]); if (y<100) y+=2000;
+  console.log(new Date(Date.UTC(y,(Number(m[1])-1)*3,1)).toISOString());
+} else if (m = TXT.match(/\\bQ([1-4])\\s+(last|this|next)\\s+year\\b/i)) {
+  const refY = base.getUTCFullYear();
+  const y = m[2].toLowerCase()==='last'?refY-1:m[2].toLowerCase()==='next'?refY+1:refY;
+  console.log(new Date(Date.UTC(y,(Number(m[1])-1)*3,1)).toISOString());
+} else { console.log('null'); }
+" "PHRASE" "OPTIONAL_REF_ISO"
+```
+
+Replace `PHRASE` with the relative phrase ("last Tuesday", "Q3 2024") and optionally `OPTIONAL_REF_ISO` with the ISO reference timestamp.
+
+The algorithm mirrors `platform/plugins/memory/mcp/src/lib/relative-date.ts` — the server-side parser the timeline extractor uses. Recurring forms ("every other Friday") return `null` by design. Phrases that don't match return `null`.
+
+## Boundaries
+
+- Answers timezone questions and relative-date arithmetic only — not scheduling, reminders, or alarms.
+- Uses the server's system clock. If the server clock is wrong, answers will be wrong.
+- Historical timezone data (e.g., "what time was it in Tokyo on 15 March 1990?") depends on the Node.js ICU dataset and may be inaccurate for dates before 1970.
+- Relative-date parser handles single-date phrases only; multi-date ranges ("from March through May") are out of scope.

package/payload/platform/plugins/admin/skills/deck-pages/SKILL.md

@@ -0,0 +1,404 @@
+---
+name: deck-pages
+description: >
+  Constraints for producing presentation deck pages as HTML slide sequences that
+  download as pixel-perfect PDFs via client-side html2canvas + jsPDF rendering.
+  Use when creating or modifying any slide deck, pitch deck, presentation, or
+  multi-slide document intended for PDF download. Also use when the output is a
+  set of fixed-dimension landscape pages viewed on screen and exported as a PDF.
+  Trigger phrases: "deck", "pitch deck", "slides", "presentation", "slide deck",
+  "investor deck", "deck PDF", "download deck", or any request to create a
+  multi-page slide-based document with a PDF download button.
+---
+
+# Deck Pages — Slide-Based PDF Documents
+
+Constraints for producing HTML slide decks that render correctly on screen and export as pixel-perfect PDFs via client-side `html2canvas-pro` + `jsPDF`. Every rule exists because violating it caused a visible rendering problem in exported decks.
+
+## How this differs from A4 print documents
+
+A4 documents use the browser's native print pipeline (`@page` rules, the on-device `browser-pdf-save` tool). Deck pages bypass print entirely — each slide is rasterized to a canvas and composited into a PDF on the client. This means:
+
+- Glassmorphism and `backdrop-filter` render correctly (no PNG fallbacks needed).
+- Text in the PDF is raster, not vector — so the canvas `scale` factor matters for sharpness.
+- The browser's `@page` margin boxes, `counter(page)`, and `orphans`/`widows` have no effect on the exported PDF. Page structure is controlled entirely by the slide DOM.
+
+Print styles are still included as a fallback for users who Cmd+P, but they are not the primary export path.
+
+## Rendering path
+
+1. Build the HTML deck with fixed-dimension `.slide` containers.
+2. Add a client-side download button that uses `html2canvas-pro` + `jsPDF`.
+3. Verify each slide visually using `browser-screenshot` before declaring the deck complete.
+
+## Slide dimensions
+
+A4 landscape: `297mm` wide × `210mm` tall. Every slide uses identical dimensions.
+
+```css
+.slide {
+  width: 297mm;
+  height: 210mm;
+  margin: 20px auto;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+}
+```
+
+The `overflow: hidden` is load-bearing — content that overflows a slide will be silently clipped in the PDF. If content doesn't fit, reduce font sizes or restructure the layout. Never let a slide scroll.
+
+## Slide content container
+
+Every slide's content lives inside a `.slide-content` div that provides consistent padding and flex layout:
+
+```css
+.slide-content {
+  padding: 36px 48px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+```
+
+The outer `.slide` controls dimensions and background. The inner `.slide-content` controls content flow. Typical usage:
+
+```html
+<div class="slide bg-[#1a1c18]">
+  <div class="slide-content justify-between relative z-10">
+    <!-- slide content here -->
+  </div>
+</div>
+```
+
+Use `justify-between`, `justify-center`, or `gap-*` on `.slide-content` to distribute content vertically within the fixed height.
+
+## Deck wrapper
+
+The slides sit inside a wrapper that provides the grey background visible between slides on screen:
+
+```css
+.deck-wrapper {
+  background: #e8e5e0;
+  min-height: 100vh;
+  padding: 20px 0;
+}
+```
+
+## Client-side PDF generation
+
+The download function dynamically imports `html2canvas-pro` and `jspdf`, iterates over every `.slide` element, rasterizes each to a canvas, and assembles them into a multi-page PDF.
+
+```tsx
+async function downloadAsPdf() {
+  const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
+    import("html2canvas-pro"),
+    import("jspdf"),
+  ]);
+
+  const slides = document.querySelectorAll(".slide");
+  const pdf = new jsPDF({ orientation: "landscape", unit: "mm", format: "a4" });
+  const pageW = 297;
+  const pageH = 210;
+
+  for (let i = 0; i < slides.length; i++) {
+    const canvas = await html2canvas(slides[i] as HTMLElement, {
+      scale: 2,
+      useCORS: true,
+      backgroundColor: null,
+    });
+    const imgData = canvas.toDataURL("image/jpeg", 0.92);
+    if (i > 0) pdf.addPage();
+    pdf.addImage(imgData, "JPEG", 0, 0, pageW, pageH);
+  }
+
+  pdf.save("deck.pdf");
+}
+```
+
+**Critical settings:**
+
+- `scale: 2` — renders at 2x resolution for sharp text on retina displays. Lower values produce blurry text. Higher values increase file size with diminishing returns.
+- `useCORS: true` — required for any images loaded from external origins (Google Fonts icon sheets, CDN images). Without this, cross-origin images render as blank rectangles.
+- `backgroundColor: null` — preserves the slide's own background rather than injecting a white fill behind it. Essential for dark slides.
+- JPEG at `0.92` quality — balances file size against visual quality. PNG would be lossless but produces much larger PDFs.
+
+**Dependencies:** Add `html2canvas-pro` and `jspdf` to `package.json`:
+
+```json
+{
+  "dependencies": {
+    "html2canvas-pro": "^2.0.2",
+    "jspdf": "^4.2.1"
+  }
+}
+```
+
+Use `html2canvas-pro`, not `html2canvas` — the `-pro` fork has better support for modern CSS features (oklch colours, CSS variables, container queries).
+
+## Download button
+
+The download button sits in a fixed position overlay and shows a loading state during generation:
+
+```tsx
+const [generating, setGenerating] = useState(false);
+
+async function handleDownload() {
+  setGenerating(true);
+  try {
+    await downloadAsPdf();
+  } finally {
+    setGenerating(false);
+  }
+}
+```
+
+Place the button in a `fixed top-5 right-5 z-50` container. Mark it with `className="print-hidden"` so it doesn't appear in Cmd+P output. The button must be disabled during generation to prevent double-clicks queuing multiple exports.
+
+## Dark slides and background colours
+
+Dark slides (e.g. title slides, accent slides) use a dark `bg-*` on the `.slide` div. For the PDF export path (html2canvas), dark backgrounds render correctly with no special handling — `backgroundColor: null` preserves them.
+
+For the Cmd+P fallback path, dark backgrounds require explicit print colour preservation:
+
+```css
+@media print {
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+```
+
+## Glassmorphism on dark slides
+
+Unlike A4 print documents, deck pages do **not** need PNG fallbacks for glassmorphism. The html2canvas rendering path captures `backdrop-filter: blur()` as it appears on screen, because it rasterizes the composited result.
+
+Use glassmorphism freely on dark slides for stat cards, overlays, and frosted panels:
+
+```html
+<div class="bg-[rgba(250,250,248,0.06)] backdrop-blur-[16px]
+            border border-[rgba(250,250,248,0.12)] rounded-md px-5 py-4">
+  <!-- content -->
+</div>
+```
+
+## Background images and gradients
+
+For slides with background images (e.g. title slides), layer the image, gradient overlays, and content using absolute positioning:
+
+```html
+<div class="slide bg-[#1a1c18] relative overflow-hidden">
+  <!-- Background image -->
+  <div class="absolute inset-0 bg-center bg-cover bg-no-repeat"
+       style="backgroundImage: url('/hero-bg.png'), linear-gradient(...)" />
+  <!-- Gradient overlay for text readability -->
+  <div class="absolute inset-0"
+       style="background: linear-gradient(to right, rgba(26,28,24,0.92) 0%, ...)" />
+  <!-- Content on top -->
+  <div class="slide-content justify-between relative z-10">
+    ...
+  </div>
+</div>
+```
+
+The background image should have a CSS gradient fallback so the slide still looks correct if the image fails to load. `html2canvas` will capture the gradient fallback automatically.
+
+## Print styles (Cmd+P fallback)
+
+Include print styles as a fallback for users who use the browser's native print dialog instead of the download button. These styles are not used by the html2canvas export path.
+
+```css
+@page {
+  size: A4 landscape;
+  margin: 0;
+}
+
+@media print {
+  html { font-size: 16px; }
+  body { background: white !important; }
+
+  .deck-wrapper {
+    background: white;
+    padding: 0;
+  }
+
+  .print-hidden {
+    display: none !important;
+  }
+
+  .slide {
+    width: auto;
+    height: 100vh;
+    margin: 0;
+    box-shadow: none;
+    page-break-after: always;
+  }
+
+  .slide:last-child {
+    page-break-after: auto;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+}
+```
+
+**Key resets:** The screen CSS uses `width: 297mm; margin: 20px auto; box-shadow: ...` for the card-on-grey-background look. The print CSS resets these to `width: auto; margin: 0; box-shadow: none;` — screen layout properties leak into print if not explicitly overridden.
+
+## Slide structure patterns
+
+### Section label
+
+A horizontal rule + uppercase label to identify each slide's topic:
+
+```tsx
+function SlideLabel({ children, dark = false }) {
+  return (
+    <div className="flex items-center gap-3 mb-3">
+      <span className={`w-8 h-px ${dark ? "bg-accent" : "bg-primary"}`} />
+      <span className={`font-body text-[0.6rem] font-semibold tracking-[0.25em] uppercase
+        ${dark ? "text-accent" : "text-primary"}`}>
+        {children}
+      </span>
+    </div>
+  );
+}
+```
+
+### Standard content slide
+
+Light background, section label, heading, body text, and a card grid:
+
+```html
+<div class="slide bg-bg">
+  <div class="slide-content justify-center gap-8">
+    <div>
+      <SlideLabel>Section Title</SlideLabel>
+      <h2 class="font-display text-[2rem]">Heading</h2>
+      <p class="font-body text-[0.82rem] max-w-[80%]">Body text.</p>
+    </div>
+    <div class="grid grid-cols-2 gap-5">
+      <!-- cards -->
+    </div>
+    <p class="font-body text-[0.68rem] text-text-tertiary pt-3
+              border-t border-[rgba(124,140,114,0.12)]">
+      Footer note.
+    </p>
+  </div>
+</div>
+```
+
+### Title slide (dark, full-bleed)
+
+Dark background with image overlay, hero text, stat strip, and attribution footer. See the background images section above for the layering pattern.
+
+### Data table slide
+
+Use an HTML `<table>` with tight font sizes (`text-[0.72rem]` for cells, `text-[0.6rem]` for headers). Highlight the "our row" with a subtle background tint so the reader's eye lands on it immediately.
+
+## Typography scale for slides
+
+Slides use a compressed typography scale that fits content within the fixed 210mm height:
+
+| Element | Size | Weight |
+|---------|------|--------|
+| Hero title (h1) | `text-[3.8rem]` | normal |
+| Slide heading (h2) | `text-[2rem]` | normal |
+| Body paragraph | `text-[0.82rem]` | normal |
+| Card description | `text-[0.68rem]` | normal |
+| Section label | `text-[0.6rem]` | semibold, uppercase, tracked |
+| Footer / attribution | `text-[0.62rem]` – `text-[0.7rem]` | normal |
+| Stat number | `text-[1.5rem]` – `text-[1.8rem]` | semibold |
+| Button text | `text-[0.72rem]` | semibold, uppercase, tracked |
+
+These sizes are calibrated for 297mm × 210mm at `scale: 2` — they produce readable text in the exported PDF. Smaller sizes become illegible; larger sizes cause overflow.
+
+## Verifying slides with on-device screenshots
+
+Before declaring a deck complete, verify that every slide renders correctly by taking screenshots with `browser-screenshot`. This catches problems that are invisible in the dev server but appear in the PDF: clipped content, broken images, font loading failures, and layout overflow.
+
+### Verification process
+
+1. **Start a local server** — the deck must be served over HTTP. `file://` protocol blocks font loading and CORS resources. If Next.js, run `npm run dev` and wait for the ready signal before navigating.
+
+2. **Navigate to the deck page** with `browser-navigate` and wait for fonts and images to load. Use `browser-wait-for` or `browser-evaluate` with `document.fonts.ready` to ensure custom fonts are loaded — otherwise screenshots capture system-font fallbacks that look correct in dev but produce the wrong PDF.
+
+3. **Screenshot each slide individually** — call `browser-screenshot` with each `.slide` element's CSS selector, not a full-page screenshot. Full-page screenshots compress the entire deck into one image and hide per-slide problems. Read the slide selectors from `browser-snapshot` (or compute `.slide:nth-of-type(n)`), and capture each to its own `slide-<n>.png`.
+
+4. **Verify each screenshot against these checks:**
+   - Content fits within the slide bounds (no clipping at edges).
+   - Text is readable (custom fonts loaded, not falling back to system fonts).
+   - Background images and gradients render (no broken image icons).
+   - Dark slides have correct dark backgrounds (not white).
+   - Glassmorphism panels show the blur effect.
+   - No unexpected scrollbars or overflow indicators.
+   - Card grids and tables are evenly spaced.
+
+5. **Test the PDF download** — `browser-click` the download button, then open the generated PDF and confirm the page count matches the slide count and no pages are blank.
+
+### Common rendering failures caught by screenshots
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| White rectangle where image should be | CORS blocked, `useCORS: true` missing | Add `useCORS: true` to html2canvas options |
+| Blurry text in PDF | `scale` too low | Use `scale: 2` or higher |
+| Content clipped at slide bottom | Too much content for 210mm height | Reduce font sizes, remove content, or split across two slides |
+| System font instead of custom font | Font not loaded before screenshot | Wait for `document.fonts.ready` before capturing |
+| Dark slide renders white | `backgroundColor` not `null` in html2canvas | Set `backgroundColor: null` |
+| Download button visible in PDF | Button inside a `.slide` container | Keep button outside `.slide` divs, in a fixed overlay |
+| Glassmorphism appears flat | Using the print pipeline instead of html2canvas | Use the download button, not Cmd+P |
+| Text re-flows between screen and PDF | Relative font units inside fixed-size container | Use explicit `text-[Xrem]` sizes, not `text-lg` style shorthand |
+
+## Layout component structure (Next.js)
+
+The deck uses a dedicated layout that injects the wrapper and print styles:
+
+```tsx
+// app/deck/layout.tsx
+export default function DeckLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="deck-wrapper">
+      <style>{`
+        .deck-wrapper { background: #e8e5e0; min-height: 100vh; padding: 20px 0; }
+        .slide { width: 297mm; height: 210mm; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.12); }
+        .slide:first-of-type { margin-top: 20px; }
+        .slide-content { padding: 36px 48px; height: 100%; display: flex; flex-direction: column; }
+
+        @page { size: A4 landscape; margin: 0; }
+        @media print {
+          html { font-size: 16px; }
+          body { background: white !important; }
+          .deck-wrapper { background: white; padding: 0; }
+          .print-hidden { display: none !important; }
+          .slide { width: auto; height: 100vh; margin: 0; box-shadow: none; page-break-after: always; }
+          .slide:last-child { page-break-after: auto; }
+          * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+        }
+      `}</style>
+      {children}
+    </div>
+  );
+}
+```
+
+The page component (`app/deck/page.tsx`) is a `"use client"` component containing the slides, the download function, and the download button. Keep the layout as a server component for metadata; the "use client" directive belongs on the page, not the layout.
+
+## Reference implementation
+
+A complete working deck lives at `/Users/neo/capacity-derivatives/app/deck/` — read `layout.tsx` and `page.tsx` there when building a new deck. The reference shows eight slides covering title, problem, market, solution, differentiation, roadmap, competitive landscape, and team/ask — the standard pitch-deck arc.
+
+## Checklist before shipping
+
+- [ ] Every slide is exactly `297mm × 210mm` with `overflow: hidden`.
+- [ ] Content fits within each slide — no clipping at bottom or right edges.
+- [ ] `html2canvas-pro` and `jspdf` are in `package.json` dependencies.
+- [ ] Download button uses loading state and is disabled during generation.
+- [ ] Download button is outside `.slide` containers (in a fixed overlay).
+- [ ] Dark slides use `backgroundColor: null` in html2canvas config.
+- [ ] Print fallback styles included (`@page`, `@media print`).
+- [ ] `browser-screenshot` taken of every slide — content verified.
+- [ ] PDF download tested — correct number of pages, no blank pages.
+- [ ] Fonts loaded before any screenshot or export (check `document.fonts.ready`).

package/payload/platform/plugins/admin/skills/file-presentation/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: file-presentation
+description: "Deliver a file or document to the owner inside chat for review and download. Triggers when the owner asks to see, attach, or download a file, when content is generated that the owner needs to review (summary, report, draft), or when a downloadable artefact is the right output."
+---
+
+# File presentation
+
+This skill covers presenting editable content for inline review before it is persisted, and delivering a finished file to the owner. Deliver by inventory, not by recipe: if you have a file-sending tool, use it — on a turn that arrived over a channel such as WhatsApp the platform relays that delivery to the channel for you. If you do not (for example you are a specialist running as a subagent), write the file under `output/` and state its full path in your result; the main session relays it to the owner.
+
+## The trigger
+
+The owner asks to view, review, attach, or download a file or a document, or the current turn produces a document the owner needs to see. Example phrasings:
+
+- "show me the file"
+- "attach the report"
+- "let me download that"
+- "preview the document"
+- "send me the brochure"
+- "save that as a markdown file"
+
+## How to deliver markdown text content
+
+For a synthesised document (a summary, a report, a draft, a knowledge-base article), present the content as a single fenced markdown block in chat:
+
+````
+```markdown
+<the file content as markdown>
+```
+````
+
+The operator reads the block inline, copy-edits in their next message if changes are needed, and approves before any persistence step. Do not call `memory-write`, `memory-ingest`, or other writers before the operator has approved the content; those tools have different purposes and skipping the review step takes control away from the owner.
+
+When the operator approves and the document should land on disk or in the graph, use the appropriate writer (`store-skill` for skill files under the active account, the relevant graph writer for `:KnowledgeDocument` nodes). Always state the destination before writing.
+
+## For static-site delivery
+
+When the owner has uploaded a `.zip` containing HTML and assets and wants it hosted, this skill is not the right path. Delegate to `content-producer` on turn one; the specialist owns the `unzip-attachment` then `publish-site` chain.
+
+## Failure modes
+
+- **Content is too large for one chat block** (typically over 50,000 characters of markdown). Surface the size and offer to split into sections, or save it as a `.md` file under `output/` and deliver that instead of pasting it.
+- **The file write fails** (permission, disk, bad path). Surface the error literally and the path you tried. Do not claim a file was delivered when the write did not succeed.
+- **Do not** paste binary contents or a base64 dump into chat as a "delivery" fallback; the owner asked for a file, not a wall of bytes. Deliver the file itself.
+
+## What this skill does not do
+
+It does not write content to the graph or to disk on its own. The fenced-block path is a review surface; persistence is a separate, named tool call that follows operator approval.

package/payload/platform/plugins/admin/skills/insight/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: insight
+description: "Run an on-demand insight pass over the current session — derive technical learnings, operator-relationship updates, missing graph writes, and typed-edge extractions, and persist them to the graph and SOUL.md. Activate when the operator says '/insight', 'run an insight pass', 'review this session', 'capture what we learned', or 'do a retrospective on this conversation'. Runs and continues — it never resets, clears, or ends the session."
+---
+
+# Insight
+
+An on-demand review of the session so far. Invoked by name, it walks the live
+conversation in four passes and writes what it finds to the graph and to
+`SOUL.md`, then hands control straight back to the operator. There is no
+session-end trigger and no completion sentinel — the skill is the entire
+insight surface, and it is called only when the operator asks for it.
+
+Run the four passes now over the session so far, then keep going in this same session. Do NOT call `session-reset`, do NOT clear the context, do NOT end the session: the conversation continues afterward and the operator (or a parallel session) keeps working against the same live state. Use the tools you already have.
+
+Pass 1 — Technical learnings. Walk this session for operator corrections and self-detected mistakes. For each one, delegate one graph write to `database-operator` via the Task tool, persisting a Learning or Correction node per the schema. Count what you write.
+
+Pass 2 — Operator-relationship updates. Walk this session for tonal signals, rejected phrasings, and working-style preferences. For each one worth carrying forward, Write the observation into `SOUL.md` at the account-scoped path. Count what you write.
+
+Pass 3 — Graph completeness sweep. Walk this session for any node, edge, or commitment that was discussed but not written to the graph in-flight. For each missing write, delegate to `database-operator` via the Task tool. Count what you write.
+
+Pass 4 — Typed-edge auto-extraction. Delegate to `database-operator` via the Task tool with a prompt naming the typed-edge pass and the session-start timestamp. The specialist calls `memory-typed-edge-pass` with that timestamp and returns the counters. Capture `nodesProcessed` and the accepted count from its reply.
+
+Then reply with one short paragraph in your house voice summarising what you wrote — naming the five counts (learnings, preferences, graph-writes, typed-edges, nodesProcessed) — and carry on with the operator's work.