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

@hiai-gg/hiai-opencode 0.2.1 → 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 (477) hide show

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

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="aurora">
+<head>
+<meta charset="utf-8"><title>Animation + FX Showcase — html-ppt</title>
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
+<link rel="stylesheet" href="../assets/animations/animations.css">
+<style>
+  .fx-stage{
+    position:relative;
+    margin:20px auto 0;
+    width:min(900px, 92%);
+    height:380px;
+    border-radius:var(--radius-lg, 16px);
+    background:rgba(10,12,22,0.55);
+    border:1px solid var(--border,#2a2a3a);
+    box-shadow:var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
+    overflow:hidden;
+  }
+  .fx-label{
+    position:absolute;top:14px;left:16px;z-index:5;
+    font-family:var(--font-mono, ui-monospace,Menlo,monospace);
+    font-size:11px;letter-spacing:.14em;color:var(--text-3,#a0a0b8);
+    text-transform:uppercase;
+    background:rgba(0,0,0,0.35);padding:4px 10px;border-radius:999px;
+    border:1px solid rgba(255,255,255,0.08);
+  }
+  .fx-replay{
+    position:absolute;top:12px;right:14px;z-index:5;
+    appearance:none;cursor:pointer;
+    padding:7px 14px;border-radius:999px;
+    background:linear-gradient(135deg, var(--accent,#7c5cff), var(--accent-2,#22d3ee));
+    color:#fff;font:600 12px system-ui,sans-serif;
+    border:0;letter-spacing:.05em;
+    box-shadow:0 4px 16px rgba(124,92,255,0.35);
+  }
+  .fx-replay:hover{ filter:brightness(1.1); transform:translateY(-1px); }
+  .fx-indicator{position:absolute;top:24px;right:40px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.1em}
+  .anim-box{margin:24px auto 0;width:640px;height:240px;border-radius:var(--radius-lg);background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--text-1);box-shadow:var(--shadow-lg);border:1px solid var(--border)}
+</style>
+</head>
+<body>
+<div class="deck"></div>
+<script>
+const FX = [
+  ['particle-burst',    'Particles explode from center, gravity + fade, re-bursts every ~2.5s.'],
+  ['confetti-cannon',   'Colored rotating rects arcing from both bottom corners.'],
+  ['firework',          'Rockets launch from the bottom and burst into colored sparks.'],
+  ['starfield',         '3D perspective starfield — infinite flythrough.'],
+  ['matrix-rain',       'Classic green katakana + hex columns raining down.'],
+  ['knowledge-graph',   'Force-directed graph, 28 labeled nodes, live physics + springs.'],
+  ['neural-net',        '4-6-6-3 feedforward net with pulses traveling along edges.'],
+  ['constellation',     'Drifting points connect when close — ambient background.'],
+  ['orbit-ring',        '5 concentric rings with dots rotating at different speeds.'],
+  ['galaxy-swirl',      'Logarithmic spiral with ~800 particles.'],
+  ['word-cascade',      'Words fall from top and pile up at the bottom.'],
+  ['letter-explode',    'Letters fly in from random directions, loops.'],
+  ['chain-react',       'Row of 8 circles — a wave pulse dominoes across them.'],
+  ['magnetic-field',    'Particles follow sine curves leaving gradient trails.'],
+  ['data-stream',       'Rows of scrolling hex/binary text, cyberpunk feel.'],
+  ['gradient-blob',     '4 drifting blurred radial gradients (additive blending).'],
+  ['sparkle-trail',     'Sparkles emit at your cursor (auto-wiggles if idle).'],
+  ['shockwave',         'Expanding rings emanating from center, looping.'],
+  ['typewriter-multi',  'Three lines typing concurrently with blinking block cursors.'],
+  ['counter-explosion', 'Number counts 0 → 2400, bursts particles, resets.']
+];
+const CSS_ANIMS = [
+  ['fade-up','Translate from +32 px, fade.'],
+  ['fade-down','Translate from -32 px, fade.'],
+  ['fade-left','From left.'],
+  ['fade-right','From right.'],
+  ['rise-in','Rise + blur-off.'],
+  ['drop-in','Drop from above.'],
+  ['zoom-pop','Elastic scale pop.'],
+  ['blur-in','Blur clears.'],
+  ['glitch-in','Glitch jitter.'],
+  ['typewriter','Typewriter reveal.'],
+  ['neon-glow','Neon pulse.'],
+  ['shimmer-sweep','Sheen sweep.'],
+  ['gradient-flow','Gradient flow.'],
+  ['stagger-list','Staggered children.'],
+  ['counter-up','Number tick.'],
+  ['path-draw','SVG strokes draw.'],
+  ['parallax-tilt','3D hover tilt.'],
+  ['card-flip-3d','Y-axis flip.'],
+  ['cube-rotate-3d','Cube rotate.'],
+  ['page-turn-3d','Page turn.'],
+  ['perspective-zoom','Pull from -400 Z.'],
+  ['marquee-scroll','Infinite marquee.'],
+  ['kenburns','Ken Burns zoom.'],
+  ['confetti-burst','Pseudo confetti.'],
+  ['spotlight','Circular clip reveal.'],
+  ['morph-shape','SVG d morph.'],
+  ['ripple-reveal','Corner ripple.']
+];
+const deck = document.querySelector('.deck');
+const total = FX.length + CSS_ANIMS.length;
+// Build FX slides (1..20)
+FX.forEach((f, i) => {
+  const idx = i + 1;
+  const [name, desc] = f;
+  const sec = document.createElement('section');
+  sec.className = 'slide';
+  sec.setAttribute('data-title', 'fx / ' + name);
+  const extraAttrs = name === 'letter-explode'
+      ? 'data-fx-text-value="' + name.toUpperCase() + '"'
+    : name === 'counter-explosion'
+      ? 'data-fx-to="2400"'
+    : name === 'typewriter-multi'
+      ? 'data-fx-line1="> initializing knowledge graph..." data-fx-line2="> loading 28 concept nodes" data-fx-line3="> agent ready. awaiting prompt_"'
+    : '';
+  sec.innerHTML = `
+    <span class="fx-indicator">${idx}/${total}</span>
+    <p class="kicker">FX · canvas · ${String(idx).padStart(2,'0')}</p>
+    <h1 class="h1"><span class="gradient-text">${name}</span></h1>
+    <p class="lede">${desc}</p>
+    <div class="fx-stage">
+      <span class="fx-label">data-fx="${name}"</span>
+      <button class="fx-replay" type="button">Replay</button>
+      <div class="fx-host" style="position:absolute;inset:0;" data-fx="${name}" ${extraAttrs}></div>
+    </div>
+    <div class="deck-footer"><span class="dim2">Press → for next slide</span><span class="slide-number" data-current="${idx}" data-total="${total}"></span></div>
+  `;
+  deck.appendChild(sec);
+  // Wire Replay button
+  sec.querySelector('.fx-replay').addEventListener('click', () => {
+    const host = sec.querySelector('.fx-host');
+    const name2 = host.getAttribute('data-fx');
+    const attrs = {};
+    for (const a of host.attributes) attrs[a.name] = a.value;
+    const parent = host.parentNode;
+    // stop existing
+    if (window.__hpxActive && window.__hpxActive.has(host)){
+      try{ window.__hpxActive.get(host).stop(); }catch(e){}
+      window.__hpxActive.delete(host);
+    }
+    const fresh = document.createElement('div');
+    for (const k in attrs) fresh.setAttribute(k, attrs[k]);
+    fresh.style.cssText = host.style.cssText;
+    parent.replaceChild(fresh, host);
+    if (window.__hpxReinit) window.__hpxReinit(sec);
+  });
+});
+// Build CSS animation slides (legacy, kept for completeness)
+CSS_ANIMS.forEach((a, i) => {
+  const idx = FX.length + i + 1;
+  const sec = document.createElement('section');
+  sec.className = 'slide';
+  sec.setAttribute('data-title', a[0]);
+  sec.innerHTML = `
+    <span class="fx-indicator">${idx}/${total}</span>
+    <p class="kicker">CSS anim · ${String(idx).padStart(2,'0')}</p>
+    <h1 class="h1"><span class="gradient-text">${a[0]}</span></h1>
+    <p class="lede">${a[1]}</p>
+    <div class="anim-box anim-${a[0]}" data-anim="${a[0]}" data-anim-target>${a[0]}</div>
+    <div class="deck-footer"><span class="dim2">Press A to cycle</span><span class="slide-number" data-current="${idx}" data-total="${total}"></span></div>
+  `;
+  deck.appendChild(sec);
+});
+</script>
+<script src="../assets/runtime.js"></script>
+<script src="../assets/animations/fx-runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt/templates/deck.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="minimal-white">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>html-ppt · Deck</title>
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<link rel="stylesheet" id="theme-link" href="../assets/themes/minimal-white.css">
+<link rel="stylesheet" href="../assets/animations/animations.css">
+</head>
+<body data-themes="minimal-white,editorial-serif,soft-pastel,arctic-cool,sunset-warm,catppuccin-mocha,tokyo-night,aurora,xiaohongshu-white,neo-brutalism" data-theme-base="../assets/themes/">
+<div class="deck">
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <p class="kicker">html-ppt · 2026</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">用模板，<span class="gradient-text">换主题</span><br>讲任何事情</h1>
+    <p class="lede">24 themes · 30 layouts · 25 animations · zero build</p>
+    <div class="deck-footer"><span class="dim2">lewis</span><span class="slide-number" data-current="1" data-total="6"></span></div>
+    <div class="notes">这是一个最小可用的 deck。你可以复制这个文件作为新 deck 的起点。</div>
+  </section>
+  <!-- 2. TOC -->
+  <section class="slide" data-title="目录">
+    <p class="kicker">Agenda</p>
+    <h2 class="h2">我们会讲三件事</h2>
+    <div class="grid g3 mt-l anim-stagger-list" data-anim-target>
+      <div class="card"><h4>01 · Tokens</h4><p class="dim">把颜色/字体/圆角收进 CSS 变量。</p></div>
+      <div class="card"><h4>02 · Layouts</h4><p class="dim">30 种可复用单页。</p></div>
+      <div class="card"><h4>03 · Runtime</h4><p class="dim">键盘驱动、按 T 换主题。</p></div>
+    </div>
+  </section>
+  <!-- 3. Stat -->
+  <section class="slide center tc" data-title="Stat">
+    <div>
+      <p class="kicker">Result</p>
+      <div style="font-size:220px;font-weight:900;line-height:1"><span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span></div>
+      <h3>的准备时间被省下</h3>
+    </div>
+  </section>
+  <!-- 4. Two column -->
+  <section class="slide" data-title="Tokens">
+    <p class="kicker">Under the hood</p>
+    <h2 class="h2">换主题 = 换一组变量</h2>
+    <div class="grid g2 mt-l">
+      <div class="card"><h4>语义变量</h4><p class="dim">写 <code>var(--surface)</code>，不写具体色值。</p></div>
+      <div class="card"><h4>一键切换</h4><p class="dim">按 T 循环所有主题——所有 slide 同步更新。</p></div>
+    </div>
+  </section>
+  <!-- 5. CTA -->
+  <section class="slide center tc" data-title="CTA">
+    <div>
+      <p class="kicker">Your turn</p>
+      <h1 class="h1 anim-rise-in" data-anim="rise-in">开始做你的 deck</h1>
+      <p class="lede" style="margin:16px auto">按 ← → 翻页 · T 切主题 · A 切动效 · F 全屏 · O 概览 · S 备注</p>
+    </div>
+  </section>
+  <!-- 6. Thanks -->
+  <section class="slide center tc" data-title="Thanks">
+    <h1 class="h1" style="font-size:160px;line-height:1"><span class="gradient-text">Thanks</span></h1>
+    <p class="lede">lewis · sudolewis@gmail.com</p>
+  </section>
+</div>
+<script src="../assets/runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt/templates/full-decks/course-module/README.md ADDED Viewed

@@ -0,0 +1,8 @@
+# course-module · 教学模块
+7-slide teaching module: cover (title + meta), objectives, core concept, worked example, exercise, check-your-understanding (MCQ), summary.
+Academic but friendly look: warm off-white paper, Playfair Display display type, a green/terracotta accent pair. A persistent **left sidebar** on content slides lists the module's learning objectives and checks them off as you progress — students always know where they are.
+**Use when:** online course modules, lecture handouts, onboarding curricula, workshop units.
+**Feel:** a good textbook opened to a chapter — structured, quiet, encouraging.

package/skills/design-templates/html-ppt/templates/full-decks/course-module/index.html ADDED Viewed

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Module 04 · Recursion · CS101</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-course-module">
+<div class="deck">
+  <!-- 1. Cover -->
+  <section class="slide full" data-title="Cover">
+    <p class="kicker">CS 101 · MODULE 04</p>
+    <h1 class="h1 mt-s">Recursion: solving<br>problems by <em>calling yourself</em>.</h1>
+    <p class="lede mt-l" style="max-width:62ch">In this module you'll learn why a function that calls itself is not a trick, but the most natural way to describe problems that contain smaller copies of themselves.</p>
+    <div class="row mt-l" style="gap:16px">
+      <span class="pill-academic">~ 45 min read</span>
+      <span class="pill-academic">prereq · functions, if/else</span>
+      <span class="pill-academic">lang · Python</span>
+    </div>
+    <div class="deck-footer"><span>Dr. A. Rivera · Spring 2026</span><span class="slide-number" data-current="1" data-total="7"></span></div>
+  </section>
+  <!-- 2. Objectives -->
+  <section class="slide" data-title="Objectives">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="current">Define recursion</li>
+        <li>Identify a base case</li>
+        <li>Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Module progress</h5>
+      <p class="dim" style="font-size:13px">Page 2 of 7 · ~5 min in</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">OBJECTIVES</p>
+      <h2 class="h2 mt-s">By the end, you will be able to…</h2>
+      <div class="stack mt-l">
+        <div class="concept-box"><h4>① Explain recursion in one sentence.</h4><p class="dim">"A function that solves a problem by calling itself on a smaller version of that problem."</p></div>
+        <div class="concept-box"><h4>② Write a base case that always terminates.</h4><p class="dim">Every recursive function must have an exit door, or it runs forever.</p></div>
+        <div class="concept-box"><h4>③ Trace a call stack on paper.</h4><p class="dim">Given <code>fact(4)</code>, draw the stack frames top-to-bottom.</p></div>
+        <div class="concept-box"><h4>④ Convert a while-loop to a recursive equivalent.</h4><p class="dim">And explain when one is clearer than the other.</p></div>
+      </div>
+    </div>
+  </section>
+  <!-- 3. Concept -->
+  <section class="slide" data-title="Concept">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="current">Identify a base case</li>
+        <li>Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Key terms</h5>
+      <p class="dim" style="font-size:13px">base case · recursive case · call stack · tail call</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">CORE CONCEPT</p>
+      <h2 class="h2 mt-s">Two parts, always.</h2>
+      <p class="lede mt-m">A recursive function has exactly two things inside it: a <b>base case</b> (when to stop) and a <b>recursive case</b> (how to shrink the problem before calling yourself).</p>
+      <div class="callout">
+        <b>Rule of thumb.</b> If you can't name the base case out loud, don't write the recursion yet. Draw it on paper first.
+      </div>
+      <div class="grid g2 mt-l">
+        <div class="concept-box"><h4>Base case</h4><p class="dim">The smallest possible input — one the function answers directly, without calling itself.</p><p class="pill-academic">e.g. <b>n == 0</b></p></div>
+        <div class="concept-box"><h4>Recursive case</h4><p class="dim">Every other input — delegate to a smaller version of the same problem.</p><p class="pill-academic">e.g. <b>n × fact(n-1)</b></p></div>
+      </div>
+    </div>
+  </section>
+  <!-- 4. Example -->
+  <section class="slide" data-title="Example">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="current">Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Try it yourself</h5>
+      <p class="dim" style="font-size:13px">Open repl.it and run the code on the right. Then try <code>fact(10)</code>.</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">WORKED EXAMPLE</p>
+      <h2 class="h2 mt-s">Factorial, 7 lines.</h2>
+      <div class="code mt-m"><pre style="margin:0"><span class="cmt"># fact(n) = n × (n-1) × … × 1,  and fact(0) = 1</span>
+<span class="kw">def</span> fact(n):
+    <span class="kw">if</span> n == <span class="str">0</span>:          <span class="cmt"># base case</span>
+        <span class="kw">return</span> <span class="str">1</span>
+    <span class="kw">return</span> n * fact(n - <span class="str">1</span>)   <span class="cmt"># recursive case</span>
+<span class="kw">print</span>(fact(<span class="str">4</span>))   <span class="cmt"># → 24</span></pre></div>
+      <div class="callout">
+        <b>Trace fact(4).</b> 4 × fact(3) → 4 × (3 × fact(2)) → 4 × 3 × (2 × fact(1)) → 4 × 3 × 2 × 1 × fact(0) → 4 × 3 × 2 × 1 × 1 = <b>24</b>.
+      </div>
+    </div>
+  </section>
+  <!-- 5. Exercise -->
+  <section class="slide" data-title="Exercise">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="done">Trace a recursive call</li>
+        <li class="current">Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Time</h5>
+      <p class="dim" style="font-size:13px">~10 minutes · solo</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">EXERCISE 4.1</p>
+      <h2 class="h2 mt-s">Write <em>sum_to(n)</em>.</h2>
+      <p class="lede mt-m">Return <code>1 + 2 + … + n</code> using recursion — no loops allowed.</p>
+      <div class="exercise mt-l">
+        <p style="margin:0;font-size:18px;color:var(--text-1)"><b>Your task</b></p>
+        <ol style="color:var(--text-2);line-height:1.8;margin:10px 0 0">
+          <li>Write the base case. What does <code>sum_to(0)</code> return?</li>
+          <li>Write the recursive case in terms of <code>sum_to(n - 1)</code>.</li>
+          <li>Test it: <code>sum_to(5) == 15</code>, <code>sum_to(10) == 55</code>.</li>
+          <li>Bonus: what happens if you call <code>sum_to(-3)</code>? Fix it.</li>
+        </ol>
+      </div>
+      <p class="dim mt-m" style="font-size:14px">Stuck? Remember: a base case is the smallest input you already know the answer to.</p>
+    </div>
+  </section>
+  <!-- 6. Check understanding -->
+  <section class="slide" data-title="Check">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="done">Trace a recursive call</li>
+        <li class="done">Convert loop ↔ recursion</li>
+        <li class="current">Recognize when recursion helps</li>
+      </ul>
+      <h5>Self-assess</h5>
+      <p class="dim" style="font-size:13px">You should get 3/3.</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">CHECK YOUR UNDERSTANDING</p>
+      <h2 class="h2 mt-s">Which function will recurse forever?</h2>
+      <div class="mt-l">
+        <div class="mcq"><div class="letter">A</div><div><b>def f(n): return 1 if n == 0 else n * f(n - 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Base case <code>n == 0</code>, shrinks toward it. Terminates.</p></div></div>
+        <div class="mcq correct"><div class="letter">B</div><div><b>def f(n): return n + f(n + 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0"><b style="color:var(--accent)">✓ Correct.</b> No base case, and <code>n</code> grows — infinite recursion.</p></div></div>
+        <div class="mcq"><div class="letter">C</div><div><b>def f(n): return n if n &lt; 2 else f(n - 1) + f(n - 2)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Classic Fibonacci. Base case on <code>n &lt; 2</code>. Terminates.</p></div></div>
+      </div>
+    </div>
+  </section>
+  <!-- 7. Summary -->
+  <section class="slide full" data-title="Summary">
+    <p class="kicker">SUMMARY · MODULE 04</p>
+    <h1 class="h1 mt-s">You can now…</h1>
+    <div class="grid g2 mt-l">
+      <div class="concept-box"><h4>✓ Define recursion</h4><p class="dim">A function that calls itself on a smaller input.</p></div>
+      <div class="concept-box"><h4>✓ Write a safe base case</h4><p class="dim">Every recursion needs an exit door.</p></div>
+      <div class="concept-box"><h4>✓ Trace a call stack</h4><p class="dim">You can unwind <code>fact(4)</code> by hand.</p></div>
+      <div class="concept-box"><h4>✓ Judge when to use it</h4><p class="dim">Trees and self-similar problems → recursion. Flat iteration → loop.</p></div>
+    </div>
+    <div class="callout mt-l">
+      <b>Up next · Module 05.</b> Divide &amp; conquer: merge sort. We'll use everything you just learned — but on lists, not numbers.
+    </div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt/templates/full-decks/course-module/style.css ADDED Viewed

@@ -0,0 +1,46 @@
+/* course-module — academic but friendly */
+.tpl-course-module{
+  --bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;
+  --border:rgba(60,45,20,.12);--border-strong:rgba(60,45,20,.24);
+  --text-1:#2a2418;--text-2:#5a5140;--text-3:#8a7f68;
+  --accent:#2d7d6e;--accent-2:#d88a3a;--accent-3:#c4593f;
+  --grad:linear-gradient(135deg,#2d7d6e,#4ea893);
+  --radius:14px;--radius-lg:20px;
+  --shadow:0 12px 30px rgba(60,45,20,.07);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-course-module .slide{padding:64px 80px;background:var(--bg);display:grid;grid-template-columns:260px 1fr;gap:56px;align-content:start}
+.tpl-course-module .slide.full{grid-template-columns:1fr;display:flex;flex-direction:column;justify-content:center}
+.tpl-course-module .sidebar{border-right:1px solid var(--border);padding-right:32px;position:relative}
+.tpl-course-module .sidebar .brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--accent)}
+.tpl-course-module .sidebar .brand::before{content:"✦ ";color:var(--accent-2)}
+.tpl-course-module .sidebar h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin:32px 0 12px}
+.tpl-course-module .obj-list{list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-2);line-height:1.5}
+.tpl-course-module .obj-list li{padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed var(--border)}
+.tpl-course-module .obj-list li::before{content:"○";position:absolute;left:0;top:8px;color:var(--accent)}
+.tpl-course-module .obj-list li.done::before{content:"●";color:var(--accent)}
+.tpl-course-module .obj-list li.current{color:var(--text-1);font-weight:700}
+.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}
+.tpl-course-module .main{min-width:0}
+.tpl-course-module .h1{font-family:'Playfair Display',serif;font-size:72px;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:var(--text-1)}
+.tpl-course-module .h2{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.015em;color:var(--text-1)}
+.tpl-course-module h3,.tpl-course-module h4{color:var(--text-1)}
+.tpl-course-module .kicker{color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.14em}
+.tpl-course-module .lede{font-size:20px;color:var(--text-2);line-height:1.7}
+.tpl-course-module .callout{border-left:4px solid var(--accent-2);background:var(--surface-2);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin-top:24px}
+.tpl-course-module .callout b{color:var(--accent-2)}
+.tpl-course-module .concept-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
+.tpl-course-module .concept-box h4{margin-top:0;color:var(--accent)}
+.tpl-course-module .exercise{background:#fff8ed;border:1.5px dashed var(--accent-2);border-radius:var(--radius);padding:24px 28px}
+.tpl-course-module .exercise::before{content:"✎ Exercise";display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent-2);margin-bottom:10px;text-transform:uppercase}
+.tpl-course-module .code{background:#2a2418;color:#f4f1e8;border-radius:var(--radius);padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.7;overflow:auto}
+.tpl-course-module .code .cmt{color:#8a7f68;font-style:italic}
+.tpl-course-module .code .kw{color:#e8a770}
+.tpl-course-module .code .str{color:#8ec6b2}
+.tpl-course-module .mcq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;cursor:pointer}
+.tpl-course-module .mcq .letter{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--text-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text-2)}
+.tpl-course-module .mcq.correct{border-color:var(--accent);background:rgba(45,125,110,.06)}
+.tpl-course-module .mcq.correct .letter{border-color:var(--accent);background:var(--accent);color:#fff}
+.tpl-course-module .pill-academic{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--text-2);font-family:'JetBrains Mono',monospace}
+.tpl-course-module .slide.full .h1{font-size:88px}
+.tpl-course-module .deck-footer{color:var(--text-3)}

package/skills/design-templates/html-ppt/templates/full-decks/dir-key-nav-minimal/README.md ADDED Viewed

@@ -0,0 +1,11 @@
+# dir-key-nav-minimal
+8 张幻灯片，每张一个纯色/渐变 mono-background（indigo / cream / crimson / emerald / slate / violet / white / charcoal）。灵感直接来自 `20260405 演示幻灯片【方向键版】.html` —— 八个 `t-*` 主题类，每张幻灯一个背景，方向键切换，极简 editorial 气质。
+**Visual traits:** 每张独立背景色 + 单一 accent、巨大 160px 标题无副图、4px 短粗 accent line divider、arrow-prefixed mono list、左下 `← →` 键盘提示 + 右下 page label、全屏 breathing negative space、JetBrains Mono 做数字 / 代码 / 键盘 hint、每个背景有自己的 `.dk-accent` 色。
+**Use when:** 有话要说、没太多图、希望用排版节奏推进观众注意力；keynote 式的极简讲稿；每张幻灯只讲一件事；公开分享 / keynote / 演讲稿。
+**Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`.
+**Path:** `templates/full-decks/dir-key-nav-minimal/index.html`

package/skills/design-templates/html-ppt/templates/full-decks/dir-key-nav-minimal/index.html ADDED Viewed

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Dir-Key Nav Minimal</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-dir-key-nav-minimal">
+<div class="deck">
+  <!-- 1. COVER · indigo -->
+  <section class="slide t-indigo is-active">
+    <div class="dk-snum">01 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Karpathy LLM Wiki</div>
+      <h1 class="dk-h0">为什么笔记<br>治不了 <span class="dk-accent">LLM</span></h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">8 种背景、8 张幻灯，一个关于如何把 AI 变成「长期记忆外挂」的最短陈述。<strong>按 → 继续。</strong></p>
+    </div>
+    <div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
+    <div class="dk-page">cover</div>
+  </section>
+  <!-- 2. SECTION · cream -->
+  <section class="slide t-cream">
+    <div class="dk-snum">02 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Chapter 01</div>
+      <h1 class="dk-h0">The <span class="dk-accent">Problem</span>.</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Token 上限是一个物理事实。你每次和 LLM 说话，它都是一个失忆症患者。</p>
+    </div>
+    <div class="dk-keyhint">chapter · 01 / 04</div>
+    <div class="dk-page">section</div>
+  </section>
+  <!-- 3. CONTENT · crimson -->
+  <section class="slide t-crimson">
+    <div class="dk-snum">03 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Symptoms</div>
+      <h2 class="dk-h1">四种你已经<br>受够的<br><span class="dk-accent">遗忘</span>。</h2>
+      <ul class="dk-list">
+        <li>昨天聊过的项目，今天重新解释一遍</li>
+        <li>上下文窗口一到，它开始「编造记忆」</li>
+        <li>不同 session 之间毫无关联，就像第一次见</li>
+        <li>你的真正偏好从未被记住，每次都要 re-prompt</li>
+      </ul>
+    </div>
+    <div class="dk-keyhint">content · list</div>
+    <div class="dk-page">03</div>
+  </section>
+  <!-- 4. CONTENT · emerald -->
+  <section class="slide t-emerald">
+    <div class="dk-snum">04 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">The Fix</div>
+      <h2 class="dk-h1">答案不是<br><span class="dk-accent">更大</span> 的窗口。</h2>
+      <p class="dk-lede" style="margin-top:10px">而是：把你的知识、偏好、历史都<strong>写进文件系统</strong>。<br>让 LLM 每次对话前，先去读那个系统。</p>
+      <div class="dk-grid-2">
+        <div class="dk-col"><h3>× 窗口 stuffing</h3><p>把所有东西塞 prompt，贵、慢、最终溢出。</p></div>
+        <div class="dk-col"><h3>✓ 文件 + 检索</h3><p>按需加载，永远不溢出，结构化可 diff。</p></div>
+      </div>
+    </div>
+    <div class="dk-keyhint">content · compare</div>
+    <div class="dk-page">04</div>
+  </section>
+  <!-- 5. CODE · slate -->
+  <section class="slide t-slate">
+    <div class="dk-snum">05 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Minimal Setup</div>
+      <h2 class="dk-h2"><span class="dk-accent">4 行</span> YAML<br>就能开始。</h2>
+      <pre class="dk-code">memory:
+  root: ~/.llm-wiki
+  format: markdown
+  retrieval: hybrid  # embedding + bm25</pre>
+      <p class="dk-lede" style="margin-top:16px;font-size:20px">你现在拥有一个会随时间增长的 <strong>第二大脑</strong>。每次对话它都会被读、被更新。</p>
+    </div>
+    <div class="dk-keyhint">content · code</div>
+    <div class="dk-page">05</div>
+  </section>
+  <!-- 6. CHART · violet — big number with bar -->
+  <section class="slide t-violet">
+    <div class="dk-snum">06 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">30-day result</div>
+      <div class="dk-big dk-accent">87%</div>
+      <p class="dk-lede" style="margin-top:14px;font-size:26px">的 re-explain 被消除。平均每次对话节省 <strong>4.2 分钟</strong> 的 re-context。</p>
+      <svg viewBox="0 0 900 80" style="width:100%;max-width:900px;margin-top:30px">
+        <rect x="0" y="30" width="900" height="22" rx="11" fill="rgba(255,255,255,.12)"/>
+        <rect x="0" y="30" width="783" height="22" rx="11" fill="#c4b5fd"/>
+        <text x="792" y="47" font-family="JetBrains Mono" font-size="16" fill="#c4b5fd" font-weight="700">87%</text>
+      </svg>
+    </div>
+    <div class="dk-keyhint">chart · big-num</div>
+    <div class="dk-page">06</div>
+  </section>
+  <!-- 7. CTA · white -->
+  <section class="slide t-white">
+    <div class="dk-snum">07 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Start tonight</div>
+      <h2 class="dk-h1">开始<br>你的 <span class="dk-accent">wiki</span>。</h2>
+      <span class="dk-line"></span>
+      <p class="dk-lede">不是装又一个插件。是决定：从今晚起，<strong>你的所有 AI 对话都要有一个共同的 vault</strong>。</p>
+      <pre class="dk-code" style="font-size:18px">$ mkdir ~/llm-wiki && cd ~/llm-wiki
+$ git init
+$ echo "# my brain" > README.md</pre>
+    </div>
+    <div class="dk-keyhint">cta · three-commands</div>
+    <div class="dk-page">07</div>
+  </section>
+  <!-- 8. THANKS · charcoal -->
+  <section class="slide t-charcoal">
+    <div class="dk-snum">08 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">End · thanks for staying</div>
+      <h1 class="dk-h0"><span class="dk-accent">謝謝</span>。</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Karpathy 的原始 thread + 我的 vault 结构都在 <strong>github.com/lewis/llm-wiki</strong>。欢迎按 ← 再看一遍。</p>
+    </div>
+    <div class="dk-keyhint">press <kbd>←</kbd> to rewind · <kbd>F</kbd> for fullscreen</div>
+    <div class="dk-page">fin</div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>