npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.0 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (490) hide show

package/skills/design-templates/html-ppt/templates/theme-showcase.html ADDED Viewed

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><title>Theme Showcase — html-ppt v2</title>
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<link rel="stylesheet" href="../assets/animations/animations.css">
+<style>
+  /* NOTE: theme isolation via <iframe srcdoc> per slide. Each slide loads base.css
+     + its OWN theme.css, so pressing → actually shows a different look. */
+  html,body{background:#0b0c10;color:#e8ebf4}
+  .deck{background:#0b0c10}
+  .slide{padding:0;background:transparent}
+  .theme-frame{
+    position:absolute;inset:0;width:100%;height:100%;
+    border:0;background:#fff;
+  }
+  .theme-chrome{
+    position:absolute;top:22px;left:40px;right:40px;display:flex;justify-content:space-between;
+    font-family:'JetBrains Mono',monospace;font-size:12px;color:#aab0c0;letter-spacing:.12em;
+    text-transform:uppercase;z-index:20;pointer-events:none;mix-blend-mode:difference;
+  }
+  .theme-chrome .name{color:#fff;font-weight:700}
+</style>
+</head>
+<body>
+<div class="deck"></div>
+<script>
+/* 36 themes total (24 v1 + 12 v2). Each rendered in its OWN iframe so CSS is isolated. */
+const THEMES = [
+  ['minimal-white',      '极简白 · clean restraint'],
+  ['editorial-serif',    '杂志衬线 · high editorial'],
+  ['soft-pastel',        '马卡龙 · soft pastel'],
+  ['sharp-mono',         '黑白高对比 · sharp mono'],
+  ['arctic-cool',        '冷色调 · arctic'],
+  ['sunset-warm',        '暖色调 · sunset'],
+  ['catppuccin-latte',   'Catppuccin Latte'],
+  ['catppuccin-mocha',   'Catppuccin Mocha'],
+  ['dracula',            'Dracula'],
+  ['tokyo-night',        'Tokyo Night'],
+  ['nord',               'Nord · nordic cool'],
+  ['solarized-light',    'Solarized Light'],
+  ['gruvbox-dark',       'Gruvbox Dark'],
+  ['rose-pine',          'Rose Pine'],
+  ['neo-brutalism',      'Neo-Brutalism'],
+  ['glassmorphism',      'Glassmorphism'],
+  ['bauhaus',            'Bauhaus 几何原色'],
+  ['swiss-grid',         'Swiss Grid'],
+  ['terminal-green',     'Terminal Green'],
+  ['xiaohongshu-white',  '小红书白底'],
+  ['rainbow-gradient',   'Rainbow Gradient'],
+  ['aurora',             'Aurora 极光'],
+  ['blueprint',          'Blueprint 蓝图'],
+  ['memphis-pop',        'Memphis Pop'],
+  /* v2 additions */
+  ['cyberpunk-neon',     'Cyberpunk Neon 霓虹'],
+  ['y2k-chrome',         'Y2K Chrome 镜面'],
+  ['retro-tv',           'Retro TV CRT 扫描线'],
+  ['japanese-minimal',   '和风极简 · 朱红'],
+  ['vaporwave',          'Vaporwave 蒸汽波'],
+  ['midcentury',         'Mid-Century Modern'],
+  ['corporate-clean',    'Corporate Clean 商务'],
+  ['academic-paper',     '学术白皮书'],
+  ['news-broadcast',     'News Broadcast 新闻'],
+  ['pitch-deck-vc',      'Pitch Deck VC / YC'],
+  ['magazine-bold',      'Magazine Bold 大字杂志'],
+  ['engineering-whiteprint','Engineering Whiteprint']
+];
+/* The demo content that each iframe will render. Uses tokens only, so it picks up
+   whatever theme the iframe loads. Self-contained — no external references. */
+function demoHTML(themeName, label){
+  return `<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<link rel="stylesheet" href="../assets/themes/${themeName}.css">
+<link rel="stylesheet" href="../assets/animations/animations.css">
+<style>
+  html,body{height:100%}
+  .wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
+       padding:72px 96px;box-sizing:border-box;background:var(--bg);color:var(--text-1);
+       font-family:var(--font-sans)}
+  .swatch{display:flex;gap:10px;margin-top:18px}
+  .swatch div{width:44px;height:44px;border-radius:10px;border:1px solid var(--border)}
+  .kpi{font-size:54px;font-weight:800;letter-spacing:-.02em}
+  .mini-code{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);
+    padding:10px 12px;border-radius:8px;margin:6px 0 0;white-space:pre;color:var(--text-1);
+    border:1px solid var(--border)}
+</style>
+</head><body><div class="wrap">
+  <p class="kicker">Theme · ${themeName}</p>
+  <h1 class="h1">${label}</h1>
+  <p class="lede">Same demo slide, different tokens. Background, type, accent, radius, shadow all come from <code>assets/themes/${themeName}.css</code>.</p>
+  <div class="grid g3 mt-l">
+    <div class="card">
+      <h4>Palette · 调色盘</h4>
+      <p class="dim">accent / accent-2 / accent-3 / text / surface-2</p>
+      <div class="swatch">
+        <div style="background:var(--accent)"></div>
+        <div style="background:var(--accent-2)"></div>
+        <div style="background:var(--accent-3)"></div>
+        <div style="background:var(--text-1)"></div>
+        <div style="background:var(--surface-2)"></div>
+      </div>
+    </div>
+    <div class="card">
+      <h4>KPI</h4>
+      <div class="kpi gradient-text">2.4K</div>
+      <p class="dim">上周月活 · weekly active</p>
+    </div>
+    <div class="card">
+      <h4>Code · 令牌</h4>
+      <pre class="mini-code">:root {
+  --accent: /* theme */;
+  --radius: /* theme */;
+}</pre>
+    </div>
+  </div>
+  <div class="row mt-m" style="gap:10px;flex-wrap:wrap">
+    <span class="pill">#tokens</span>
+    <span class="pill pill-accent">primary</span>
+    <span class="pill">#radius</span>
+    <span class="pill">#shadow</span>
+    <span class="pill">#type</span>
+  </div>
+</div></body></html>`;
+}
+(function(){
+  const deck = document.querySelector('.deck');
+  THEMES.forEach((t,i)=>{
+    const s = document.createElement('section');
+    s.className = 'slide';
+    s.setAttribute('data-title', t[0]);
+    const chrome = `<div class="theme-chrome"><span class="name">${String(i+1).padStart(2,'0')} · ${t[0]}</span><span>${i+1}/${THEMES.length}</span></div>`;
+    const iframe = document.createElement('iframe');
+    iframe.className = 'theme-frame';
+    iframe.setAttribute('loading','eager');
+    // Use src via data URL for the inline demo HTML so relative paths still resolve from the templates/ dir.
+    // Easier: use srcdoc but set <base href> to the templates dir so relative ../assets paths work.
+    const base = `<base href="${location.href}">`;
+    iframe.srcdoc = demoHTML(t[0], t[1]).replace('<head>','<head>'+base);
+    s.innerHTML = chrome;
+    s.appendChild(iframe);
+    deck.appendChild(s);
+  });
+})();
+</script>
+<script src="../assets/runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt-course-module/SKILL.md ADDED Viewed

@@ -0,0 +1,78 @@
+---
+name: html-ppt-course-module
+description: Online-course / workshop module deck — warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.
+triggers:
+  - "course module"
+  - "course slides"
+  - "workshop"
+  - "training deck"
+  - "lesson"
+  - "教学"
+  - "课件"
+od:
+  mode: deck
+  scenario: education
+  upstream: "https://github.com/lewislulu/html-ppt-skill"
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  speaker_notes: true
+  animations: true
+  example_prompt: "Use the html-ppt-course-module template to build a 7-slide module deck. Confirm: module title, 3-5 learning objectives (these stick on the left rail), and the MCQ self-check question. Then assemble the deck with serif headings on warm paper."
+---
+# HTML PPT · Course Module
+A focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`course-module`** full-deck template.
+## When this card is picked
+The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of `course-module` (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).
+## How to author the deck
+1. **Read the master skill first.** All authoring rules live in
+   [`skills/html-ppt/SKILL.md`](../html-ppt/SKILL.md) — content/audience checklist,
+   token rules, layout reuse, presenter mode, the keyboard runtime, and the
+   "never put presenter-only text on the slide" rule.
+2. **Start from the matching template folder:**
+   `skills/html-ppt/templates/full-decks/course-module/` — copy `index.html` and
+   `style.css` into the project, keep the `.tpl-course-module` body class.
+3. **Bring the shared runtime with the template.** The upstream
+   `index.html` links the shared CSS/JS via `../../../assets/...` because it
+   sits three folders deep inside `skills/html-ppt/templates/full-decks/`.
+   Once you copy `index.html` into the project, those parent-relative URLs
+   no longer resolve and `base.css`, `animations.css`, and `runtime.js`
+   will 404 — meaning the deck never activates and slide navigation is
+   dead. Pick one of these two recipes per project:
+   - **Recipe A — copy + rewrite (preferred):** copy
+     `skills/html-ppt/assets/fonts.css`, `skills/html-ppt/assets/base.css`,
+     `skills/html-ppt/assets/animations/animations.css`, and
+     `skills/html-ppt/assets/runtime.js` into a project-local
+     `assets/` (with `assets/animations/animations.css`), then rewrite the
+     four `<link>`/`<script>` tags in `index.html` from
+     `../../../assets/...` to the matching project-local paths
+     (`assets/fonts.css`, `assets/base.css`,
+     `assets/animations/animations.css`, `assets/runtime.js`).
+   - **Recipe B — inline:** read the same four files and replace each
+     `<link rel="stylesheet" href="../../../assets/...">` with a
+     `<style>...</style>` containing the file's contents, and the
+     `<script src="../../../assets/runtime.js">` with a
+     `<script>...</script>` containing `runtime.js`. Yields a single
+     self-contained `index.html`.
+   Either way, do not ship the upstream `../../../assets/...` URLs
+   verbatim into a project artifact — they only work in-tree.
+4. **Pick a theme.** Default tokens look fine; if the user wants a different
+   feel, swap in any of the 36 themes from `skills/html-ppt/assets/themes/*.css`
+   via `<link id="theme-link">` and let `T` cycle.
+5. **Replace demo content, not classes.** The `.tpl-course-module` scoped CSS only
+   recognises the structural classes shipped in the template — keep them.
+6. **Speaker notes go inside `<aside class="notes">` or `<div class="notes">`** — never as visible text on the slide.
+## Attribution
+Visual system, layouts, themes and the runtime keyboard model come from
+the upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill). The
+LICENSE file ships at `skills/html-ppt/LICENSE`; please keep it in place when
+redistributing.