@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

package/skills/design-templates/guizang-ppt/references/styles.md

@@ -0,0 +1,195 @@
+# 杂志风方向（Magazine Directions）
+
+5 个**预设方向**，每个方向都把"用哪套主题色 / 哪些 layout / 多少 slide / 怎么写 chrome 文案"打包好，避免你在 6 问澄清里给出 5 个不相关的选项。
+
+> 灵感来源：[alchaincyf/huashu-design](https://github.com/alchaincyf/huashu-design) 的 "20 design philosophies × 5 streams" — 我们把它压缩到 5 个 magazine-flavored 的方向，每个都对应到 `themes.md` 的某一套 + `layouts.md` 的某些组合。
+
+---
+
+## 何时用这份文档
+
+在 SKILL.md `Step 1 · 需求澄清` 的开头：**先让用户在这 5 个方向里挑一个**，再去问主题色 / 时长 / 受众 / 大纲。流程是：
+
+```
+1. 用户讲一句"想做个分享 PPT"
+2. 你（agent）介绍 5 个方向（拷贝下面的 1-line summary）
+3. 用户挑一个方向（或说"不知道, 你推荐"）
+4. 你按所选方向回答了"主题色"和"slide 数量"两个问题, 再问剩下的 4 个
+```
+
+**硬规则**：方向只能从下面 5 个里选,不能混搭。混搭 = 走 huashu-design 验证过的失败路径(品牌资产协议 v1)。如果用户对 5 个都不满意,委婉劝他选最接近的,然后允许在 `chrome` / `kicker` 里轻微定制语气,**绝不调色**。
+
+---
+
+## 1. Monocle Editorial · 国际杂志风 ✦ 默认推荐
+
+**关键词**：克制、知识感、跨国、有 *taste*
+
+| 配方 | 选择 |
+|---|---|
+| 主题色 | 🖋 墨水经典 |
+| 推荐 slide 数 | 18–24 页(60% non-hero / 40% hero) |
+| 主力 layouts | **1 封面 / 2 章节幕 / 4 左文右图 / 8 大引用 / 10 图文混排** |
+| Chrome 文案 | `Vol.04 · Spring 2026` / `Act II · 12 / 24` / `lukew.com · 2026.04` |
+| Kicker 风格 | 短英文 + 中点：`THE TWIST` / `BUT` / `DEC.` |
+| Foot 文案 | `Page 12 · 一种新的工作方式` |
+
+**适合**：商业发布、行业内部讲话、产品宣发、个人品牌沉淀分享。**默认就选这个**，跑不出大错。
+
+**反例**：技术深度报告（密度太低），表格数据很多的 ops 复盘（没有合适的 layout）。
+
+**视觉锚点**：*Monocle* / *Apricot Magazine* / *A Book Apart* / *Apartamento*。
+
+---
+
+## 2. WIRED Tech · 数据 + 工程
+
+**关键词**：硬数据、流水线、对比、未来感
+
+| 配方 | 选择 |
+|---|---|
+| 主题色 | 🌊 靛蓝瓷 |
+| 推荐 slide 数 | 14–18 页(轻巧、数据密) |
+| 主力 layouts | **1 封面 / 3 数据大字报 / 6 Pipeline / 7 问题页 / 9 Before/After** |
+| Chrome 文案 | `Q2 / 2026 · Field Report` / `Data · 03` / `Eng Notes` |
+| Kicker 风格 | 全大写 + 数字：`38× FASTER` / `RUNTIME 04` / `CASE 02` |
+| Foot 文案 | `Page 03 · benchmark` / `methodology footnote` |
+
+**适合**：技术发布会、研究分享、benchmark 报告、工程团队对内沟通、AI 产品 demo day。
+
+**反例**：人文类金句分享（太冷）、艺术品牌（不够温度）。
+
+**视觉锚点**：*WIRED* 长文版 / *MIT Technology Review* / *The Pudding* / *Stripe Press*。
+
+**特殊建议**：每个 stat-card 的 `stat-label` 用英文等宽（这是 WIRED 风的核心），数字别加千分位逗号（不够工程），用 `K` / `M` / `×` 简写。
+
+---
+
+## 3. Kinfolk Slow · 慢生活 / 人文
+
+**关键词**：留白、衬线、温度、私享会
+
+| 配方 | 选择 |
+|---|---|
+| 主题色 | 🍂 牛皮纸 |
+| 推荐 slide 数 | 9–12 页(慢、放空、低密度) |
+| 主力 layouts | **1 封面 / 4 左文右图 / 8 大引用 / 10 图文混排 / 2 章节幕** |
+| Chrome 文案 | `Vol.07 · Autumn` / `一封信 · 03` / `Notes from Kyoto` |
+| Kicker 风格 | 中文短语 + 标点："给一个朋友。" / "晚秋。" / "Letter Three" |
+| Foot 文案 | `Page 03 · Letter Three` / `2026 · Spring Issue` |
+
+**适合**：私享会、读书分享、人物访谈复盘、生活方式品牌、个人随笔。
+
+**反例**：产品发布（太慢）、技术分享（太软）、严肃数据（信息密度不够）。
+
+**视觉锚点**：*Kinfolk* / *The Gentlewoman* / *Cereal* / *Drift Magazine*。
+
+**特殊建议**：
+- **故意把 slide 数压到 10 页以下**——Kinfolk 的核心是"少即是多"，不要塞满
+- 大量使用 Layout 8（大引用）和 Layout 10（图文混排）
+- 不要用 Layout 3（数据大字报）——和气质冲突
+- `<title>` 文字、章节名、kicker 全部用衬线 + 中文短句
+
+---
+
+## 4. Domus Architectural · 建筑 / 空间感
+
+**关键词**：尺度、几何、不对称、克制的炫耀
+
+| 配方 | 选择 |
+|---|---|
+| 主题色 | 🌙 沙丘 |
+| 推荐 slide 数 | 12–18 页(中密度，强视觉) |
+| 主力 layouts | **1 封面 / 2 章节幕 / 5 图片网格 / 9 Before/After / 10 图文混排** |
+| Chrome 文案 | `Spazio 09 · Project File` / `Plan · 03` / `Fig.4` |
+| Kicker 风格 | 数字 + 类别：`PROJECT 04` / `SECTION B` / `FIGURE 12` |
+| Foot 文案 | `Page 09 · West Wing` / `1:200 scale` |
+
+**适合**：设计 / 建筑案例分享、产品设计 review、品牌视觉发布、画廊式 portfolio 展示。
+
+**反例**：金句分享（太硬）、技术 deep dive（不擅长流水线）。
+
+**视觉锚点**：*Domus* / *Apartamento* / *Mark Magazine* / *Pin-Up*。
+
+**特殊建议**：
+- **每个 hero 页都要"留 60% 空"** — 不要塞满，建筑感来自呼吸
+- 大量使用 Layout 5（图片网格）但**只放 4 张大图**，不要放 6 张小图
+- `chrome` 文案保持冷峻，全用英文 + 数字
+
+---
+
+## 5. Lab / Reference · 学术 + 工艺手册
+
+**关键词**：克制、有图有表、可复现、工程师爱看
+
+| 配方 | 选择 |
+|---|---|
+| 主题色 | 🌿 森林墨 |
+| 推荐 slide 数 | 16–24 页(密度高、有图表) |
+| 主力 layouts | **1 封面 / 2 章节幕 / 3 数据大字报 / 6 Pipeline / 9 Before/After** |
+| Chrome 文案 | `Field Notes · Vol.II` / `Section 3.2 · Method` / `Reference 04` |
+| Kicker 风格 | 编号：`§ 3.2` / `Ref. 04` / `Method 01` |
+| Foot 文案 | `Page 12 · 3.2 Calibration` / `appendix A` |
+
+**适合**：学术分享、内部研究复盘、可持续 / 自然主题、长期产品复盘、有方法论的工艺型分享（咖啡 / 香水 / 茶）。
+
+**反例**：商业发布（太冷静）、营销活动（不够 catchy）。
+
+**视觉锚点**：*National Geographic*（旧版）/ *Hand-Eye Magazine* / *Nautilus* / *MIT Press* book layouts。
+
+**特殊建议**：
+- 大量 `meta-row` 标注来源、方法、引用
+- 比其他方向**更频繁地用 `<figcaption class="img-cap">`** 给每张图标编号
+- `kicker` 用 § 章节编号，不用感叹句
+
+---
+
+## 推荐速查（如果用户描述了一个意图，你应该选哪个）
+
+| 用户说的话 | 推荐方向 |
+|---|---|
+| "通用分享" / "不知道选啥" | **1. Monocle** |
+| "一人公司 / AI 折叠 / 创业 demo day" | **1. Monocle**（默认）或 **2. WIRED**（如果偏技术） |
+| "AI / benchmark / 模型评测" | **2. WIRED** |
+| "产品发布会 / 工程团队分享" | **2. WIRED** |
+| "读书分享 / 人物访谈 / 一个人的故事" | **3. Kinfolk** |
+| "私享会 / 朋友间分享 / 周末闲聊式" | **3. Kinfolk** |
+| "设计案例 / 品牌发布 / portfolio 展示" | **4. Domus** |
+| "建筑 / 空间 / 装置" | **4. Domus** |
+| "学术 / 研究 / 方法论 / 教程" | **5. Lab** |
+| "可持续 / 环保 / 自然主题" | **5. Lab** |
+
+---
+
+## 决策记录（生成前必做）
+
+挑完方向后，**在项目目录下生成或更新 `项目记录.md`**（或 `大纲-v1.md`），第一行写清：
+
+```markdown
+# [演讲标题] · 项目记录
+
+- 方向（Direction）：**Monocle Editorial** （from `references/styles.md`）
+- 主题色（Theme）：🖋 墨水经典
+- 受众：内部团队（产品 + 设计）
+- 时长：25 min · 约 18 slides
+- Chrome 风格：Vol.04 / Act II / 12 of 18
+- Kicker 风格：短英文 + 中点
+```
+
+后续迭代每次调整方向都更新这一节。**不要中途换方向**——5 个方向之间的"语气"差异比想象的大，混着写就会撕裂。
+
+---
+
+## ❌ 不要做的事
+
+- ❌ 把 5 个方向的 layout 选择混着用（例如 Monocle 配 Layout 6 Pipeline 多页 + Kinfolk 风的 chrome）—— 杂乱
+- ❌ 自己造第 6 个方向（"我想做'科技 + 文艺'风"）—— 委婉劝他选最近的，告诉他混搭历史失败率超高
+- ❌ 中途换方向，例如做到第 8 页突然觉得"换 Kinfolk 更好"——前 7 页就废了，要么全推倒重来，要么坚持原方向到底
+- ❌ 在不属于该方向的 layout 上花时间（例如 Kinfolk 写 4 页 Layout 6 Pipeline）—— 信号是用错方向了
+
+## ✅ 应当做的事
+
+- ✅ 只在 5 个方向里挑，挑完用方向去回答其他 5 个澄清问题
+- ✅ 在 `项目记录.md` 第一行明确方向，全程不变
+- ✅ 让 chrome / kicker / foot 三个文字位为方向"代言"——它们承担了一半的方向辨识度
+- ✅ 如果不确定，**默认选 Monocle Editorial**——它是 5 个方向里失败概率最低的兜底

package/skills/design-templates/guizang-ppt/references/themes.md

@@ -0,0 +1,122 @@
+# 主题色预设（Themes）
+
+5 套精心调配的主题色板,保证"电子杂志 × 电子墨水"的美学不垮。**不允许用户自定义颜色——色彩搭配错了画面瞬间变丑**,只从以下预设中挑选。
+
+---
+
+## 使用方法
+
+1. 问用户选哪套(或基于内容推荐一套)
+2. 打开 `assets/template.html` 的 `<style>` 块
+3. 找到开头的 `:root{` 块
+4. **整体替换**标有"主题色"注释的那几行 `--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`
+5. 其他 CSS 都走 `var(--...)`,无需任何其他改动
+
+---
+
+## 🖋 墨水经典 (Monocle 默认)
+
+**适合**:通用分享、商业发布、科技产品、任何场景都安全的默认选择。
+**调性**:纯墨黑 + 暖米白,杂志感最强,Monocle / Apricot / A Book Apart 风。
+
+```css
+--ink:#0a0a0b;
+--ink-rgb:10,10,11;
+--paper:#f1efea;
+--paper-rgb:241,239,234;
+--paper-tint:#e8e5de;
+--ink-tint:#18181a;
+```
+
+---
+
+## 🌊 靛蓝瓷 (Indigo Porcelain)
+
+**适合**:科技/研究/数据分享、工程师文化、深度内容、技术发布会。
+**调性**:深靛蓝 + 瓷白,冷静、理性、有深度,像学术期刊或蓝印花瓷器。
+
+```css
+--ink:#0a1f3d;
+--ink-rgb:10,31,61;
+--paper:#f1f3f5;
+--paper-rgb:241,243,245;
+--paper-tint:#e4e8ec;
+--ink-tint:#152a4a;
+```
+
+---
+
+## 🌿 森林墨 (Forest Ink)
+
+**适合**:自然/可持续/文化/非虚构内容、户外品牌、环保主题。
+**调性**:深森林绿 + 象牙,沉稳、有呼吸感,像旧版《国家地理》。
+
+```css
+--ink:#1a2e1f;
+--ink-rgb:26,46,31;
+--paper:#f5f1e8;
+--paper-rgb:245,241,232;
+--paper-tint:#ece7da;
+--ink-tint:#253d2c;
+```
+
+---
+
+## 🍂 牛皮纸 (Kraft Paper)
+
+**适合**:怀旧/人文/阅读/历史/文学分享、独立杂志、手作品牌。
+**调性**:深棕 + 暖米,像牛皮信封或老笔记本,温暖、有年代感。
+
+```css
+--ink:#2a1e13;
+--ink-rgb:42,30,19;
+--paper:#eedfc7;
+--paper-rgb:238,223,199;
+--paper-tint:#e0d0b6;
+--ink-tint:#3a2a1d;
+```
+
+---
+
+## 🌙 沙丘 (Dune)
+
+**适合**:艺术/设计/创意/时尚分享、画廊手册、审美优先的私享会。
+**调性**:炭灰 + 沙色,克制、高级、中性,像沙漠黄昏或建筑设计图册。
+
+```css
+--ink:#1f1a14;
+--ink-rgb:31,26,20;
+--paper:#f0e6d2;
+--paper-rgb:240,230,210;
+--paper-tint:#e3d7bf;
+--ink-tint:#2d2620;
+```
+
+---
+
+## 推荐选择参考
+
+| 如果是... | 推荐主题 |
+|---|---|
+| 不知道选啥 / 第一次用 | 🖋 墨水经典 |
+| AI / 技术 / 产品发布 | 🌊 靛蓝瓷 |
+| 内容 / 行业观察 / 文化 | 🌿 森林墨 |
+| 书评 / 生活方式 / 人文 | 🍂 牛皮纸 |
+| 设计 / 艺术 / 品牌 | 🌙 沙丘 |
+
+---
+
+## 切换原则
+
+- **一份 deck 只用一套主题**,不要中途换色
+- WebGL shader 的默认主色(钛金色散 / 银色流动)适配所有 5 套(经测试可接受)
+- `currentColor` 驱动的 border / icon 会跟随 section 的 text color 自动适配,无需额外调整
+- 选定主题后,`<title>` 文字和 `chrome` 文案可以强化该主题的语义(例如牛皮纸配"Vol.03 · 秋"这种)
+
+## ❌ 不要做的事
+
+- ❌ **不允许混搭**(例如 ink 取墨水经典的,paper 取沙丘的)——会彻底违和
+- ❌ **不允许用户随便给一个 hex 值**——需委婉拒绝并展示 5 套预设让选
+- ❌ **不要直接修改 template.html 其他地方的颜色**——所有散落 rgba 都走 var,改 :root 一处即可
+
+选定主题后在 skill 对话中告诉用户:"用 🖋 墨水经典 / 🌊 靛蓝瓷 ..."并在 deck 项目记录里备注,方便后续迭代时保持一致。

package/skills/design-templates/hr-onboarding/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: hr-onboarding
+description: |
+  A new-hire onboarding plan as a single page — first week schedule,
+  buddy + manager intro, learning track, equipment checklist, and "you're
+  set when…" outcomes. Use when the brief mentions "onboarding",
+  "new hire", "first week plan", or "入职".
+triggers:
+  - "onboarding"
+  - "new hire"
+  - "first week"
+  - "入职"
+  - "新员工"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: hr
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [accessibility-baseline]
+  example_prompt: "Build a 30-day onboarding plan for a new product designer joining a 40-person startup."
+---
+
+# HR Onboarding Skill
+
+Produce a single-screen onboarding plan in HTML.
+
+## Workflow
+
+1. Read the active DESIGN.md.
+2. Identify the role + tenure expectations from the brief. Default to a
+   30/60/90-day shape if unspecified.
+3. Layout:
+   - Cover banner: name placeholder, role, start date, manager + buddy.
+   - "Day 1" panel with the literal schedule (kickoff time, lunch, 1:1 slot).
+   - First-week timeline (Mon → Fri, two activities per day).
+   - 30 / 60 / 90 day milestone cards with three concrete outcomes each.
+   - Resource list: handbook, Slack channels, key dashboards, payroll setup.
+   - "You're set when…" checklist — five outcomes with checkboxes.
+4. Single inline `<style>`, semantic HTML.
+
+## Output contract
+
+```
+<artifact identifier="onboarding-plan" type="text/html" title="Onboarding Plan">
+<!doctype html>...</artifact>
+```

package/skills/design-templates/hr-onboarding/example.html

@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Welcome to Northwind — Maya's Onboarding Plan</title>
+<style>
+  :root {
+    --bg: #fbf9f4;
+    --paper: #ffffff;
+    --ink: #14110e;
+    --muted: #6b6760;
+    --line: #ece6d8;
+    --accent: #c2521a;
+    --accent-soft: #fbe6d6;
+    --positive: #2c8a4f;
+    --display: 'Georgia', 'Times New Roman', serif;
+    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
+    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14.5px; line-height: 1.55; }
+  .wrap { max-width: 1080px; margin: 28px auto; padding: 0 32px 64px; }
+
+  /* Cover */
+  .cover { padding: 36px 40px; background: var(--ink); color: var(--paper); border-radius: 16px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
+  .cover .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); }
+  .cover h1 { font-family: var(--display); font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; margin: 8px 0 12px; }
+  .cover .meta { display: flex; gap: 28px; font-size: 13px; color: rgba(255,255,255,0.74); }
+  .cover .meta strong { color: var(--paper); display: block; font-weight: 600; font-size: 14px; }
+  .cover-art { width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ec8b5b); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 56px; color: var(--paper); }
+
+  section { margin-top: 44px; }
+  h2 { font-family: var(--display); font-size: 22px; margin: 0 0 6px; letter-spacing: -0.005em; }
+  .section-sub { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; }
+
+  /* Day 1 */
+  .day-one { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+  .schedule { display: grid; grid-template-columns: 110px 1fr; gap: 0; }
+  .schedule-row { display: contents; }
+  .schedule-row .time { padding: 12px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
+  .schedule-row .item { padding: 12px 0; border-top: 1px solid var(--line); }
+  .schedule-row:first-child .time, .schedule-row:first-child .item { border-top: none; }
+  .schedule-row .item strong { display: block; font-weight: 600; }
+  .schedule-row .item span { color: var(--muted); font-size: 13px; }
+
+  /* Week timeline */
+  .week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
+  .day { padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
+  .day-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .day-name { font-family: var(--display); font-size: 16px; font-weight: 700; }
+  .day-date { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+  .activity { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
+  .activity .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
+  .activity small { display: block; color: var(--muted); margin-top: 2px; font-size: 11.5px; }
+
+  /* 30/60/90 */
+  .milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+  .milestone { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+  .milestone .badge { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); letter-spacing: 0.06em; margin-bottom: 10px; }
+  .milestone h3 { font-family: var(--display); font-size: 18px; margin: 0 0 12px; }
+  .milestone ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
+  .milestone li::marker { color: var(--accent); }
+
+  /* Resources & checklist */
+  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .panel { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+  .panel h3 { font-family: var(--display); font-size: 17px; margin: 0 0 12px; }
+  .resource { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; font-size: 13.5px; }
+  .resource:first-of-type { border-top: none; padding-top: 0; }
+  .resource .icon { width: 28px; height: 28px; background: var(--accent-soft); border-radius: 7px; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
+  .resource .meta { color: var(--muted); font-family: var(--mono); font-size: 11px; }
+  .check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
+  .check:first-of-type { border-top: none; padding-top: 0; }
+  .check .box { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: transparent; }
+  .check.done .box { background: var(--positive); border-color: var(--positive); color: var(--paper); }
+  .check strong { display: block; font-weight: 600; }
+  .check span { color: var(--muted); font-size: 12.5px; }
+
+  footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
+
+  @media (max-width: 900px) {
+    .cover { grid-template-columns: 1fr; text-align: center; }
+    .cover-art { margin: 0 auto; }
+    .week { grid-template-columns: 1fr 1fr; }
+    .milestones { grid-template-columns: 1fr; }
+    .grid-2 { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="cover">
+    <div>
+      <div class="eyebrow">Onboarding plan · 30/60/90</div>
+      <h1>Welcome, Maya. Let's make your first 90 days feel deliberate.</h1>
+      <div class="meta">
+        <div><strong>Role</strong>Product Designer · Growth squad</div>
+        <div><strong>Start date</strong>Mon, 4 November 2025</div>
+        <div><strong>Manager</strong>Alvaro Méndez</div>
+        <div><strong>Onboarding buddy</strong>Sasha Lin</div>
+      </div>
+    </div>
+    <div class="cover-art">M</div>
+  </div>
+
+  <section>
+    <h2>Day 1 · Monday</h2>
+    <p class="section-sub">A grounded day. Coffee with the team, a working laptop, and one shipped commit on the docs site by 5pm.</p>
+    <div class="day-one">
+      <div class="schedule">
+        <div class="schedule-row"><div class="time">09:00</div><div class="item"><strong>Kickoff with Alvaro</strong><span>Welcome, week-one walkthrough, expectations chat. Office Room 3 (or Zoom).</span></div></div>
+        <div class="schedule-row"><div class="time">10:00</div><div class="item"><strong>IT setup with Devon</strong><span>Laptop, badge, SSO, Slack, Figma, Linear, GitHub. Bring two photo IDs.</span></div></div>
+        <div class="schedule-row"><div class="time">11:30</div><div class="item"><strong>Coffee with Sasha (buddy)</strong><span>The unwritten rules, who-to-ask map, where the good lunch spots are.</span></div></div>
+        <div class="schedule-row"><div class="time">12:30</div><div class="item"><strong>Team lunch · Northwind cafeteria</strong><span>Whole Growth squad joins. No agenda.</span></div></div>
+        <div class="schedule-row"><div class="time">14:00</div><div class="item"><strong>Read &amp; explore</strong><span>Handbook, last quarter's design crit recordings, Figma library.</span></div></div>
+        <div class="schedule-row"><div class="time">16:00</div><div class="item"><strong>Ship "I exist" PR</strong><span>Add yourself to the team page on the docs site. Counts as your first commit.</span></div></div>
+        <div class="schedule-row"><div class="time">17:00</div><div class="item"><strong>End-of-day check-in with Alvaro</strong><span>15 min. What was confusing, what wasn't. Repeat tomorrow if useful.</span></div></div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>First week timeline</h2>
+    <p class="section-sub">Two activities per day. Anything else is bonus.</p>
+    <div class="week">
+      <div class="day">
+        <div class="day-head"><div class="day-name">Mon</div><div class="day-date">Nov 4</div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Kickoff + setup</strong><small>Alvaro · 09:00</small></div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Ship team-page PR</strong><small>Sasha can review</small></div></div>
+      </div>
+      <div class="day">
+        <div class="day-head"><div class="day-name">Tue</div><div class="day-date">Nov 5</div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Design system tour</strong><small>Yuko · 10:00</small></div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Shadow user research call</strong><small>11:00 with Sam</small></div></div>
+      </div>
+      <div class="day">
+        <div class="day-head"><div class="day-name">Wed</div><div class="day-date">Nov 6</div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Squad weekly</strong><small>09:30</small></div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Pick a starter ticket</strong><small>From the "good first issues" lane</small></div></div>
+      </div>
+      <div class="day">
+        <div class="day-head"><div class="day-name">Thu</div><div class="day-date">Nov 7</div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Design crit attendance</strong><small>14:00. Just listen.</small></div></div>
+        <div class="activity"><span class="dot"></span><div><strong>1:1 with skip-level</strong><small>Avi · 16:00</small></div></div>
+      </div>
+      <div class="day">
+        <div class="day-head"><div class="day-name">Fri</div><div class="day-date">Nov 8</div></div>
+        <div class="activity"><span class="dot"></span><div><strong>End-of-week retro</strong><small>15-min note to Alvaro</small></div></div>
+        <div class="activity"><span class="dot"></span><div><strong>Optional: All-hands demo</strong><small>17:00 · drinks after</small></div></div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>30 · 60 · 90 day milestones</h2>
+    <p class="section-sub">Three outcomes per checkpoint. We'll review each at the matching 1:1 with Alvaro.</p>
+    <div class="milestones">
+      <div class="milestone">
+        <span class="badge">Day 30</span>
+        <h3>Find your footing</h3>
+        <ul>
+          <li>Shipped one small, end-to-end design change to production.</li>
+          <li>Mapped every recurring meeting and why it exists.</li>
+          <li>Met with each cross-functional partner (eng, PM, research, marketing).</li>
+        </ul>
+      </div>
+      <div class="milestone">
+        <span class="badge">Day 60</span>
+        <h3>Own a feature</h3>
+        <ul>
+          <li>Driving design on the new onboarding redesign — own the spec.</li>
+          <li>Ran your first design crit as the presenter.</li>
+          <li>Drafted one process improvement and posted it for the team.</li>
+        </ul>
+      </div>
+      <div class="milestone">
+        <span class="badge">Day 90</span>
+        <h3>Move the team forward</h3>
+        <ul>
+          <li>Shipped a feature you led from research → launch.</li>
+          <li>Mentored someone — even informally.</li>
+          <li>Shared one hot take in all-hands and lived to tell.</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Things to bookmark</h2>
+    <p class="section-sub">Open these, save them in your browser, then forget about this page.</p>
+    <div class="grid-2">
+      <div class="panel">
+        <h3>Resources</h3>
+        <div class="resource"><div class="icon">📘</div><div><strong>Northwind Handbook</strong></div><div class="meta">handbook.nw</div></div>
+        <div class="resource"><div class="icon">💬</div><div><strong>#growth-squad</strong></div><div class="meta">Slack</div></div>
+        <div class="resource"><div class="icon">🎨</div><div><strong>Design Library v3.4</strong></div><div class="meta">Figma</div></div>
+        <div class="resource"><div class="icon">📊</div><div><strong>Growth dashboard</strong></div><div class="meta">grafana.nw</div></div>
+        <div class="resource"><div class="icon">💸</div><div><strong>Payroll & benefits</strong></div><div class="meta">Rippling</div></div>
+        <div class="resource"><div class="icon">📅</div><div><strong>Onboarding calendar</strong></div><div class="meta">cal.nw/onboard</div></div>
+      </div>
+      <div class="panel">
+        <h3>You're set when…</h3>
+        <div class="check done"><div class="box">✓</div><div><strong>Laptop, SSO, and badge work end-to-end.</strong><span>Includes Slack, Figma, Linear, GitHub, 1Password.</span></div></div>
+        <div class="check done"><div class="box">✓</div><div><strong>You've met everyone on the squad.</strong><span>Coffee, walk, or 15-min Zoom — your call.</span></div></div>
+        <div class="check"><div class="box"></div><div><strong>You've shipped your first PR.</strong><span>Even tiny ones count. Sasha will help.</span></div></div>
+        <div class="check"><div class="box"></div><div><strong>You can find any meeting on the calendar.</strong><span>And know which ones you can decline.</span></div></div>
+        <div class="check"><div class="box"></div><div><strong>You feel comfortable asking dumb questions.</strong><span>This is the most important one. We mean it.</span></div></div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <span>Northwind People Ops · Onboarding plan template v3.1</span>
+    <span>Updated October 2025</span>
+  </footer>
+</div>
+</body>
+</html>

package/skills/design-templates/html-ppt/.clawscan-allow

@@ -0,0 +1,12 @@
+# Security scan allowlist for html-ppt-skill
+# These patterns are false positives from template content, not actual threats.
+
+# Path traversal: templates reference shared assets via relative paths
+# e.g. templates/full-decks/weekly-report/ → ../../../assets/
+# This is the correct relative path to the skill root assets directory.
+traversal:templates/full-decks/*/index.html
+
+# Destructive commands: testing-safety-alert template displays forbidden
+# commands as text examples in a security policy demo slide.
+# They are HTML content, not executable code.
+destructive:templates/full-decks/testing-safety-alert/index.html

package/skills/design-templates/html-ppt/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lewis <sudolewis@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.