@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/aicut-motion/references/style-research.md

@@ -0,0 +1,73 @@
+# Reading a style
+
+Once the person has picked, the style has to become decisions: what is drawn, in what order, in what material, and
+how each thing changes. Read it in four layers — cover, words, code, timing — and write down what you took from each.
+
+## 1. The cover
+
+Open `assets/atlas/styles/<folder>/poster.jpg` and look at it. Write down, in your own words: the palette (three to
+five real colours, not “warm”), the composition (where the eye lands, what is behind what), the type (is the title
+drawn, set, lettered, cut out?), the material (paper, glass, ink, pixels), the line (edge, weight, wobble), and the
+light (flat, raking, glowing). These are the style's invariants: the film keeps them whatever its subject.
+
+## 2. The words
+
+`style.json` says the style twice — `description` for the look, `motionNotes` for how it moves, `explainerNotes` for
+how it explains. Read all three. `explainerNotes` is the most useful: it names the moves that carry an argument in
+this style (a camera pull that turns examples into a galaxy, a wipe that is a planet crossing, a counter that counts).
+
+## 3. The code
+
+`code.js` is the reference animation: `registerStyle({ draw(ctx, W, H, t) })`, a pure function of time. Read it for
+mechanism, in this order:
+
+1. **What is drawn once and kept** — the background, the paper texture, the finishing pass (`putImageData`,
+   `globalCompositeOperation`, a grain overlay). That is the look's body.
+2. **What is a function of `t`** — positions, scales, opacities, `smoothstep(e0, e1, t)`, phases, `Math.sin(t * k)`.
+   Each of those is a beat, and the numbers are its start and end.
+3. **The objects** — how a shape is built (`deform`, `circlePts`, a grid, a path) and what its parameters mean. This
+   is what makes a watercolour wash different from a flat shape with a soft edge.
+4. **The helpers** — `lib/harness.js` (seeded `rng`, `makeNoise`, `ease`, canvas helpers) and `lib/sound.js`. They are
+   shared by all 86; read each once. Seeded randomness is why the same frame looks the same twice: keep that, it is
+   what lets a film be looked at and fixed.
+
+Long files: read in pieces. Never claim you read a file that a tool cut in half.
+
+Do **not** execute the archive's files. Read them. The one thing to port is the technique.
+
+## 4. Timing, from the code rather than a video
+
+No reference video is archived here; the time is in the code, which is the better record anyway. For the two or three
+moves that carry the explanation, write the beat as a line:
+
+```
+X: 0.0–1.2 s   washes flood in from the pencil outline, edges darken as they dry
+X: 1.2–2.6 s   the camera pans along one long sheet; the counter brushes itself in
+```
+
+If a move's timing cannot be told from the code, it cannot be claimed in the film either — decide it yourself, and say
+you did.
+
+## Then the style constraints
+
+Write five lines before any page is written:
+
+- **3–5 invariants** — the things whose absence makes it another style (paper edge darkening; claret-only highlight;
+  hairline grid; small-caps source line).
+- **2–3 motion rules** — how things enter and leave, what eases, what stays still (a newspaper page scrolls, it does
+  not zoom).
+- **Type** — the hierarchy and whether the letters are drawn, set or lettered; for Chinese, a face with real Chinese
+  glyphs, never a Latin-only face asked to fake them.
+- **What carries the argument** — the one mechanism that will explain the topic (a line drawing itself; a wash
+  flooding a shape; a counter).
+- **What not to bring** — the reference's subject. A watercolour cover of a lightbulb does not mean the film gets a
+  lightbulb; the person's topic decides every object.
+
+## Porting to an AICUT page
+
+- The page is `frame(t)`, the archive is `draw(ctx, W, H, t)`; the same clock, so beats move over unchanged.
+- AICUT pages draw with DOM, SVG, CSS and canvas as you prefer. Canvas work (noise, texture, granulation) ports most
+  directly; type is better set as DOM text so it stays crisp and editable.
+- The film's stage is fixed; the archive's `W, H` become the stage's size. Keep the composition's proportions.
+- Sound: the archive's `sound.js` is a kit, not a soundtrack. Make the film's sound from its own beats.
+- Keep the credit: the style came from the archive; say so once, in the film's own notes or the reply, not on screen.

package/skills/aicut-motion/references/style-selection.md

@@ -0,0 +1,71 @@
+# Three covers, one card
+
+The first turn is a decision about direction. Everything here is about making that decision easy to take: three
+pictures the person can actually see, three names, one click.
+
+## Choosing the three
+
+Read `references/style-index.json` — all 86 rows — before choosing, and open the poster and `style.json` of each
+candidate. Three that are near each other in family are three ways of saying the same thing; three that differ in
+**how they explain** are a real choice:
+
+- one whose mechanism is drawing (whiteboard, Manim, isotype, blueprint, transit map);
+- one whose mechanism is material or craft (watercolour, paper cut, clay, felt, cross-stitch, mosaic);
+- one whose mechanism is graphic or photographic (halftone, risograph, editorial chart, blueprint negative, neon).
+
+A topic about a process usually wants the first. A topic about a feeling or a person wants the second. A topic about
+numbers wants the third. Say why each fits *this* topic in one sentence — not what the style is, but what it would do
+for this film.
+
+## Getting the covers into the project
+
+The card draws pictures from the project's own folder, so copy the three covers in first. From the project folder:
+
+```sh
+node .pi/skills/aicut-motion/scripts/atlas.mjs --pick 32,26,2
+```
+
+It prints the three with the path each will be given as `picture` (`assets/style-pick/032-sumi-e-ink-wash.jpg` and so
+on). Ids may be numbers, folders (`032-sumi-e-ink-wash`) or a unique part of a name; a number that names nothing stops
+with an error rather than picking a neighbour. `--into pictures/picks` copies them elsewhere and prints those paths.
+
+If the project has no copy of this skill under `.pi/skills` — the skill was read from the app's own folder — run the
+same script by that path; what matters is where the covers land, not where the script is.
+
+## The ask
+
+One question, two to five options, the recommended one first, the three labels short enough to read on a card:
+
+```js
+ask({ questions: [{
+  question: '这次片子想用哪一种视觉风格？选定后我先做一段约 20 秒的样片。',
+  header: '视觉方向',
+  options: [
+    { label: 'A · 报刊数据图表 Editorial Chart', description: '为什么它适合这个选题', picture: 'assets/style-pick/026-editorial-chart.jpg' },
+    { label: 'B · 水墨晕染 Sumi-e Ink Wash', description: '…', picture: 'assets/style-pick/032-sumi-e-ink-wash.jpg' },
+    { label: 'C · 水彩晕染 Watercolor Wash', description: '…', picture: 'assets/style-pick/002-watercolor-wash.jpg' },
+  ],
+}]})
+```
+
+- Label, `description` and `picture` must describe **the same style** — a card whose picture and name disagree is
+  worse than no card.
+- `picture` is a path inside the project, forward slashes, no leading `/`, no `file://`, no CDN.
+- The card is the answer; do not also ask the same question in words in the same turn.
+
+Before the card, one or two lines are enough: what the person should understand by the end, and that the pictures are
+the styles' own covers — the subject in them is not their topic, and the sample will be.
+
+## After the card
+
+The answer comes back as the picked label (or the person's own words). Record the style id with it. Then go straight to
+the sample: no second card, no second shortlist, no generated images.
+
+If the person names a style that was not among the three — from an earlier message, or by name — take it. Match by
+`nameZh`, `name`, id or folder; when two match, ask which, in words.
+
+## Without the picture card
+
+Some hosts' question tools take text only. Then the three covers still have to be seen: give each option's real path
+in the reply (`assets/style-pick/026-editorial-chart.jpg`) beside its name, and ask in words. Never say “above” or
+“如图” about a picture the person cannot see, and never describe a cover you did not open.

package/skills/aicut-motion/scripts/atlas-viewer.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>86 archived styles — preview</title>
+<style>
+  :root{
+    --ink:#0d0d0f; --card:#16161a; --line:#2c2c33; --tx:#ecebe7; --tx2:#a5a39d; --tx3:#6e6c67; --hot:#e05a3d;
+    --sans:"Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
+    --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--sans);font-size:14px}
+  header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
+  h1{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em}
+  .sub{font-family:var(--mono);font-size:11px;color:var(--tx3);letter-spacing:.06em}
+  .grow{flex:1}
+  select,input[type=range],button{font-family:inherit}
+  select{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:3px;padding:7px 10px;font-size:13px;max-width:340px}
+  button{background:var(--card);color:var(--tx2);border:1px solid var(--line);border-radius:3px;padding:7px 11px;font-size:12px;cursor:pointer;line-height:1.2}
+  button:hover{color:var(--tx);border-color:var(--tx3)}
+  button:disabled{opacity:.4;cursor:default}
+  main{max-width:1180px;margin:0 auto;padding:20px}
+  canvas{width:100%;height:auto;display:block;background:#111;border:1px solid var(--line);border-radius:3px}
+  .transport{display:flex;align-items:center;gap:12px;margin-top:12px}
+  input[type=range]{flex:1;accent-color:var(--hot);height:18px}
+  .clock{font-family:var(--mono);font-size:11.5px;color:var(--tx3);min-width:96px;text-align:right}
+  .cols{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin-top:18px}
+  @media (max-width:860px){.cols{grid-template-columns:1fr}}
+  .cols p{margin:0 0 10px;font-size:13px;line-height:1.65;color:var(--tx2)}
+  .cols b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--hot);margin-bottom:3px;font-weight:500}
+  .note{font-size:12px;color:var(--tx3);line-height:1.6;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
+  code{font-family:var(--mono);font-size:11.5px;color:#cfcdc7;background:rgba(255,255,255,.055);padding:1px 5px;border-radius:2px}
+  .meta{font-family:var(--mono);font-size:10.5px;color:#4e4e57;word-break:break-all;margin-top:8px}
+</style>
+</head>
+<body>
+<header>
+  <h1>86 archived styles</h1>
+  <span class="sub">harness.js + code.js + a t</span>
+  <div class="grow"></div>
+  <button id="prev" title="上一种（←）">←</button>
+  <select id="pick"></select>
+  <button id="next" title="下一种（→）">→</button>
+  <button id="play" title="播放 / 暂停（空格）">暂停</button>
+</header>
+
+<main>
+  <canvas id="c" width="1920" height="1080"></canvas>
+  <div class="transport">
+    <input id="scrub" type="range" min="0" max="1000" value="0" aria-label="时间">
+    <span class="clock" id="clock">0.00 / 6.00 s</span>
+  </div>
+
+  <div class="cols">
+    <div>
+      <p><b>看</b><span id="desc">—</span></p>
+      <p><b>动</b><span id="motion">—</span></p>
+    </div>
+    <div>
+      <p><b>讲</b><span id="who">—</span></p>
+      <p class="note">这个页面只是档案的预览壳：它加载 <code>lib/harness.js</code> 和某一套的 <code>code.js</code>，然后把 <code>t</code> 递进去。
+      片子要的是这种时间结构，不是这个文件本身——把它移植成 AICUT 页面里的 <code>frame(t)</code>，而不是嵌进来。</p>
+      <div class="meta" id="meta"></div>
+    </div>
+  </div>
+</main>
+
+<script src="../assets/atlas/lib/harness.js"></script>
+<script type="application/json" id="fallback">[[1,"Flat-Vector Science","扁平矢量科普","Popular Explainer Looks","经典讲解","001-flat-vector-science"],[2,"Watercolor Wash","水彩晕染","Painterly","绘画质感","002-watercolor-wash"],[3,"Shadow Puppet Theatre","皮影剧场","Paper & Craft","纸艺与手工","003-shadow-puppet-theatre"],[4,"Whiteboard Explainer","白板讲解","Hand-Drawn","手绘","004-whiteboard-explainer"],[5,"Psychedelic Poster","迷幻海报","Cosmic & Psychedelic","宇宙与迷幻","005-psychedelic-poster"],[6,"Tech Glow Explainer","科技辉光讲解","Popular Explainer Looks","经典讲解","006-tech-glow-explainer"],[7,"Papercraft Models","纸艺模型","Popular Explainer Looks","经典讲解","007-papercraft-models"],[8,"1940s Film Noir","1940年代黑色电影","Light & Imaging","光影与成像","008-1940s-film-noir"],[9,"Manim-Style Math","Manim 数学动画","Popular Explainer Looks","经典讲解","009-manim-style-math"],[10,"Illuminated Manuscript","彩饰手抄本","Illustration","插画","010-illuminated-manuscript"],[11,"Editorial Essay Collage","社论拼贴","Popular Explainer Looks","经典讲解","011-editorial-essay-collage"],[12,"Bioluminescent Deep Sea","深海生物荧光","Light & Imaging","光影与成像","012-bioluminescent-deep-sea"],[13,"Product Launch Reveal","产品发布揭幕","Popular Explainer Looks","经典讲解","013-product-launch-reveal"],[14,"Halftone Pop Panel","半色调波普","Print","印刷质感","014-halftone-pop-panel"],[15,"Isometric Pastel","等距粉彩","Dimensional","立体空间","015-isometric-pastel"],[16,"Oscilloscope Vector Art","示波器矢量艺术","Retro Digital","复古数字","016-oscilloscope-vector-art"],[17,"Risograph Zine","孔版印刷小志","Print","印刷质感","017-risograph-zine"],[18,"Claymation Set","黏土定格布景","Paper & Craft","纸艺与手工","018-claymation-set"],[19,"Neon Sign at Night","夜色霓虹招牌","Light & Imaging","光影与成像","019-neon-sign-at-night"],[20,"Kawaii Anime","可爱动漫","Popular Explainer Looks","经典讲解","020-kawaii-anime"],[21,"Ukiyo-e Woodblock","浮世绘木版画","Art & Design Movements","艺术与设计流派","021-ukiyo-e-woodblock"],[22,"16-Bit Pixel Odyssey","16位像素奇旅","Retro Digital","复古数字","022-16-bit-pixel-odyssey"],[23,"Chalkboard Lesson","黑板课堂","Hand-Drawn","手绘","023-chalkboard-lesson"],[24,"Cut-Paper Diorama","剪纸立体景","Paper & Craft","纸艺与手工","024-cut-paper-diorama"],[25,"Cathedral Glass","教堂彩绘玻璃","Painterly","绘画质感","025-cathedral-glass"],[26,"Editorial Chart","报刊数据图表","Data & Information","数据与信息","026-editorial-chart"],[27,"Synthwave Outrun","合成波疾驰","Retro UI & Neon","复古界面与霓虹","027-synthwave-outrun"],[28,"Origami Studio","折纸工作室","Paper & Craft","纸艺与手工","028-origami-studio"],[29,"Linocut Relief Print","油毡浮雕版画","Print","印刷质感","029-linocut-relief-print"],[30,"Holographic Foil Card","全息箔卡片","Light & Imaging","光影与成像","030-holographic-foil-card"],[31,"Voxel Diorama","体素微缩景观","Dimensional","立体空间","031-voxel-diorama"],[32,"Sumi-e Ink Wash","水墨晕染","Painterly","绘画质感","032-sumi-e-ink-wash"],[33,"Etch A Sketch Toy","旋钮绘图玩具","Hand-Drawn","手绘","033-etch-a-sketch-toy"],[34,"Cosmic Star Chart","宇宙星图","Cosmic & Psychedelic","宇宙与迷幻","034-cosmic-star-chart"],[35,"Punk Zine Collage","朋克拼贴小志","Paper & Craft","纸艺与手工","035-punk-zine-collage"],[36,"Thermal Camera","热成像","Light & Imaging","光影与成像","036-thermal-camera"],[37,"Engineering Blueprint","工程蓝图","Hand-Drawn","手绘","037-engineering-blueprint"],[38,"Impasto Night","厚涂夜景","Painterly","绘画质感","038-impasto-night"],[39,"Win95 Desktop","Windows 95 桌面","Retro UI & Neon","复古界面与霓虹","039-win95-desktop"],[40,"Low-Poly Faceted","低多边形切面","Dimensional","立体空间","040-low-poly-faceted"],[41,"Manga Page","漫画分镜页","Illustration","插画","041-manga-page"],[42,"Wood Type Letterpress","木活字凸版印刷","Print","印刷质感","042-wood-type-letterpress"],[43,"Light Painting","光绘","Light & Imaging","光影与成像","043-light-painting"],[44,"Felt & Patchwork","毛毡与拼布","Paper & Craft","纸艺与手工","044-felt-patchwork"],[45,"Phosphor Terminal","荧光终端","Retro Digital","复古数字","045-phosphor-terminal"],[46,"Glassmorphism UI","毛玻璃界面","Dimensional","立体空间","046-glassmorphism-ui"],[47,"Tarot Card","塔罗牌","Illustration","插画","047-tarot-card"],[48,"Transit Map","公共交通线路图","Data & Information","数据与信息","048-transit-map"],[49,"Gouache Travel Poster","水粉旅行海报","Painterly","绘画质感","049-gouache-travel-poster"],[50,"Napkin Sketch","餐巾纸草图","Hand-Drawn","手绘","050-napkin-sketch"],[51,"Art Deco Foil","装饰艺术烫箔","Art & Design Movements","艺术与设计流派","051-art-deco-foil"],[52,"Radiograph on Lightbox","灯箱X光片","Light & Imaging","光影与成像","052-radiograph-on-lightbox"],[53,"Vaporwave","蒸汽波","Retro UI & Neon","复古界面与霓虹","053-vaporwave"],[54,"Ebru Paper Marbling","土耳其水拓画","Generative & Type","生成艺术与字体","054-ebru-paper-marbling"],[55,"ISOTYPE Pictograms","ISOTYPE 图形符号","Data & Information","数据与信息","055-isotype-pictograms"],[56,"Soft 3D Clay","柔软3D黏土","Dimensional","立体空间","056-soft-3d-clay"],[57,"Cross-Stitch Sampler","十字绣样本","Paper & Craft","纸艺与手工","057-cross-stitch-sampler"],[58,"Constructivist Propaganda","构成主义宣传画","Art & Design Movements","艺术与设计流派","058-constructivist-propaganda"],[59,"Pocket Monochrome","掌机单色像素","Retro Digital","复古数字","059-pocket-monochrome"],[60,"Botanical Plate","植物学图谱","Illustration","插画","060-botanical-plate"],[61,"Kinetic Type","动态字体","Generative & Type","生成艺术与字体","061-kinetic-type"],[62,"Byzantine Mosaic","拜占庭马赛克","Illustration","插画","062-byzantine-mosaic"],[63,"Y2K Liquid Chrome","Y2K 液态铬","Retro UI & Neon","复古界面与霓虹","063-y2k-liquid-chrome"],[64,"Sticky-Note Wall","便利贴墙","Illustration","插画","064-sticky-note-wall"],[65,"Vintage Newsprint","复古新闻纸","Print","印刷质感","065-vintage-newsprint"],[66,"Hidden-Line Wireframe","隐藏线框图","Dimensional","立体空间","066-hidden-line-wireframe"],[67,"Memphis Group","孟菲斯设计","Art & Design Movements","艺术与设计流派","067-memphis-group"],[68,"Ballpoint Notebook","圆珠笔笔记","Hand-Drawn","手绘","068-ballpoint-notebook"],[69,"Op Art Sphere","欧普艺术球体","Generative & Type","生成艺术与字体","069-op-art-sphere"],[70,"Topographic Survey","地形测绘","Data & Information","数据与信息","070-topographic-survey"],[71,"Pointillist Afternoon","点彩午后","Painterly","绘画质感","071-pointillist-afternoon"],[72,"Vector Arcade 1980","1980年代矢量街机","Retro Digital","复古数字","072-vector-arcade-1980"],[73,"Patent Drawing","专利图纸","Illustration","插画","073-patent-drawing"],[74,"Bauhaus Poster","包豪斯海报","Art & Design Movements","艺术与设计流派","074-bauhaus-poster"],[75,"Bitmap Paint Doodle","位图画板涂鸦","Retro UI & Neon","复古界面与霓虹","075-bitmap-paint-doodle"],[76,"Nail & Thread String Art","钉线绕线艺术","Generative & Type","生成艺术与字体","076-nail-thread-string-art"],[77,"Ridgeline","山脊线图","Data & Information","数据与信息","077-ridgeline"],[78,"Sketchbook Graphite","石墨素描本","Hand-Drawn","手绘","078-sketchbook-graphite"],[79,"Teletext Page","图文电视页","Retro UI & Neon","复古界面与霓虹","079-teletext-page"],[80,"Silkscreen Grid","丝网印刷网格","Print","印刷质感","080-silkscreen-grid"],[81,"Guilloché Security Print","玑镂防伪纹样","Generative & Type","生成艺术与字体","081-guilloch-security-print"],[82,"ASCII Demoscene","ASCII 字符演示艺术","Retro Digital","复古数字","082-ascii-demoscene"],[83,"International Typographic Style","国际主义字体设计","Art & Design Movements","艺术与设计流派","083-international-typographic-style"],[84,"Flow Field","流场","Data & Information","数据与信息","084-flow-field"],[85,"MacPaint 1984","MacPaint 1984 画板","Retro Digital","复古数字","085-macpaint-1984"],[86,"Multi-scale Truchet","多尺度特鲁歇拼砖","Generative & Type","生成艺术与字体","086-multi-scale-truchet"]]</script>
+<script>
+(function () {
+  var BASE = '../assets/atlas';
+  var FALLBACK = JSON.parse(document.getElementById('fallback').textContent).map(function (r) {
+    return { id: r[0], name: r[1], nameZh: r[2], family: r[3], familyZh: r[4], folder: r[5] };
+  });
+  var el = {
+    pick: document.getElementById('pick'), canvas: document.getElementById('c'),
+    play: document.getElementById('play'), scrub: document.getElementById('scrub'),
+    clock: document.getElementById('clock'), desc: document.getElementById('desc'),
+    motion: document.getElementById('motion'), who: document.getElementById('who'), meta: document.getElementById('meta')
+  };
+  var ctx = el.canvas.getContext('2d');
+  var styles = FALLBACK, style = null, raf = 0, playing = true, base = 0, tNow = 0, loading = false;
+
+  function boot(list) {
+    styles = list;
+    el.pick.innerHTML = '';
+    for (var i = 0; i < styles.length; i++) {
+      var s = styles[i];
+      var label = String(s.id).padStart(3, '0') + ' · ' + s.nameZh + ' · ' + s.name;
+      el.pick.add(new Option(label, String(s.id)));
+    }
+    var want = Number(new URLSearchParams(location.search).get('id') || 26);
+    var has = styles.some(function (s) { return s.id === want; });
+    el.pick.value = String(has ? want : 1);
+    show(has ? want : 1);
+  }
+
+  function show(id) {
+    var row = null;
+    for (var i = 0; i < styles.length; i++) if (styles[i].id === Number(id)) row = styles[i];
+    if (!row || loading) return;
+    loading = true;
+    cancelAnimationFrame(raf);
+    if (window.STYLES) window.STYLES.length = 0;
+    var old = document.querySelector('script[data-style]');
+    if (old) old.remove();
+    var tag = document.createElement('script');
+    tag.src = BASE + '/styles/' + row.folder + '/code.js';
+    tag.dataset.style = '1';
+    tag.onload = function () {
+      loading = false;
+      style = window.STYLES && window.STYLES[0];
+      if (!style || typeof style.draw !== 'function') {
+        el.desc.textContent = '这一套没有注册可绘制的风格（' + row.folder + '）';
+        return;
+      }
+      el.desc.textContent = style.description || row.nameZh;
+      el.motion.textContent = style.motion || '—';
+      el.who.textContent = row.nameZh + ' · ' + row.name + ' · ' + row.familyZh + ' / ' + row.family;
+      el.meta.textContent = 'duration ' + style.duration + 's · ' + BASE + '/styles/' + row.folder + '/code.js';
+      history.replaceState(null, '', '?id=' + row.id);
+      base = performance.now();
+      tNow = 0;
+      playing = true;
+      el.play.textContent = '暂停';
+      draw();
+    };
+    tag.onerror = function () { loading = false; el.desc.textContent = '加载失败：' + row.folder; };
+    document.body.appendChild(tag);
+  }
+
+  function draw() {
+    cancelAnimationFrame(raf);
+    var tick = function () {
+      raf = requestAnimationFrame(tick);
+      if (!style) return;
+      if (playing) tNow = ((performance.now() - base) / 1000) % style.duration;
+      paint(style, tNow);
+      el.scrub.value = String(Math.round((tNow / style.duration) * 1000));
+      el.clock.textContent = tNow.toFixed(2) + ' / ' + style.duration.toFixed(2) + ' s';
+    };
+    tick();
+  }
+
+  function paint(s, t) {
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, el.canvas.width, el.canvas.height);
+    try { s.draw(ctx, el.canvas.width, el.canvas.height, t); }
+    catch (err) { el.desc.textContent = 'draw 出错：' + err.message; playing = false; el.play.textContent = '播放'; }
+    ctx.restore();
+  }
+
+  function step(delta) {
+    var ids = styles.map(function (s) { return s.id; });
+    var at = ids.indexOf(Number(el.pick.value));
+    var next = (at + delta + ids.length) % ids.length;
+    el.pick.value = String(ids[next]);
+    show(ids[next]);
+  }
+
+  el.pick.addEventListener('change', function () { show(el.pick.value); });
+  el.play.addEventListener('click', function () {
+    playing = !playing;
+    el.play.textContent = playing ? '暂停' : '播放';
+    base = performance.now() - tNow * 1000;
+  });
+  el.scrub.addEventListener('input', function () {
+    if (!style) return;
+    playing = false;
+    el.play.textContent = '播放';
+    tNow = (Number(el.scrub.value) / 1000) * style.duration;
+    paint(style, tNow);
+    el.clock.textContent = tNow.toFixed(2) + ' / ' + style.duration.toFixed(2) + ' s';
+  });
+  document.getElementById('prev').addEventListener('click', function () { step(-1); });
+  document.getElementById('next').addEventListener('click', function () { step(1); });
+  document.addEventListener('keydown', function (e) {
+    if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT') return;
+    if (e.code === 'Space') { e.preventDefault(); el.play.click(); }
+    if (e.key === 'ArrowLeft') step(-1);
+    if (e.key === 'ArrowRight') step(1);
+  });
+
+  fetch('../references/style-index.json')
+    .then(function (r) { return r.ok ? r.json() : null; })
+    .then(function (list) { boot(list && list.length ? list : FALLBACK); })
+    .catch(function () { boot(FALLBACK); });
+})();
+</script>
+</body>
+</html>

package/skills/aicut-motion/scripts/atlas.mjs

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+/**
+ * The 86 styles, as commands — so a session does not read 86 folders by hand to find one.
+ *
+ *   node scripts/atlas.mjs --list                 every style, one line each
+ *   node scripts/atlas.mjs --list --family Painterly   one family only
+ *   node scripts/atlas.mjs --id 26                one style: its style.json, its code, its cover
+ *   node scripts/atlas.mjs --verify               that all 86 are whole (poster, style.json, code)
+ *   node scripts/atlas.mjs --pick 26,32,2         copy those covers into the project, for the pick card
+ *   node scripts/atlas.mjs --pick 26,32,2 --into assets/style-pick
+ *
+ * `--pick` writes into `<cwd>/assets/style-pick/` by default and prints, for each, the path to give the ask card as
+ * `picture` (a path inside the project). Nothing else here writes anything.
+ *
+ * To see one play instead of reading it: open `scripts/atlas-viewer.html` in a browser (`?id=26` picks one).
+ */
+import { copyFileSync, existsSync, mkdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
+
+const HERE = import.meta.dirname;
+const ATLAS = resolve(HERE, '..', 'assets', 'atlas', 'styles');
+const INDEX = resolve(HERE, '..', 'references', 'style-index.json');
+
+/** Every style, by folder, in id order. */
+function styles() {
+  const index = JSON.parse(readFileSync(INDEX, 'utf8'));
+  return index.map((one) => ({ ...one, at: join(ATLAS, one.folder) }));
+}
+
+const args = process.argv.slice(2);
+const flag = (name) => {
+  const at = args.indexOf(name);
+  return at >= 0 ? (args[at + 1] && !args[at + 1].startsWith('--') ? args[at + 1] : true) : null;
+};
+
+/** A style by what a person would say: 26, 026, "026-ink-wash", "ink-wash", or a unique part of either name. */
+function find(what) {
+  const list = styles();
+  const text = String(what).trim().toLowerCase();
+  const exact = list.find((one) => String(one.id) === text.replace(/^0+(?=\d)/, '') || one.folder.toLowerCase() === text);
+  if (exact) return exact;
+  const loose = list.filter((one) => one.folder.toLowerCase().includes(text) || one.name.toLowerCase().includes(text) || one.nameZh.includes(text));
+  return loose.length === 1 ? loose[0] : null;
+}
+
+const all = styles();
+
+if (flag('--list') || args.length === 0) {
+  const family = flag('--family');
+  const rows = family ? all.filter((one) => one.family === family || one.familyZh === family) : all;
+  console.log(`${rows.length} styles${family ? ` in ${family}` : ''}`);
+  for (const one of rows) console.log(`${String(one.id).padStart(3, '0')}  ${one.nameZh} · ${one.name}  [${one.familyZh}]  ${one.folder}`);
+  process.exit(0);
+}
+
+if (flag('--id')) {
+  const one = find(flag('--id'));
+  if (!one) {
+    console.error(`no such style: ${flag('--id')}`);
+    process.exit(1);
+  }
+  const style = JSON.parse(readFileSync(join(one.at, 'style.json'), 'utf8'));
+  console.log(JSON.stringify({
+    ...style,
+    folder: one.folder,
+    poster: `assets/atlas/styles/${one.folder}/poster.jpg`,
+    code: style.code ? `assets/atlas/styles/${one.folder}/${style.code}` : null,
+  }, null, 2));
+  process.exit(0);
+}
+
+if (flag('--verify')) {
+  const missing = [];
+  for (const one of all) {
+    const style = existsSync(join(one.at, 'style.json')) ? JSON.parse(readFileSync(join(one.at, 'style.json'), 'utf8')) : null;
+    if (!style) missing.push(`${one.folder}: no style.json`);
+    else if (!existsSync(join(one.at, 'poster.jpg'))) missing.push(`${one.folder}: no poster.jpg`);
+    else if (style.code && !existsSync(join(one.at, style.code))) missing.push(`${one.folder}: no ${style.code}`);
+  }
+  const bytes = (p) => statSync(p).size;
+  const posters = all.reduce((sum, one) => sum + (existsSync(join(one.at, 'poster.jpg')) ? bytes(join(one.at, 'poster.jpg')) : 0), 0);
+  console.log(`${all.length} styles · ${Math.round(posters / 1024)} kB of covers · ${missing.length ? `${missing.length} incomplete` : 'complete'}`);
+  for (const line of missing) console.log(`  ${line}`);
+  process.exit(missing.length ? 1 : 0);
+}
+
+if (flag('--pick')) {
+  const ids = String(flag('--pick')).split(',').map((one) => one.trim()).filter(Boolean);
+  const into = resolve(String(flag('--into') ?? 'assets/style-pick'));
+  const picked = [];
+  for (const id of ids) {
+    const one = find(id);
+    if (!one) {
+      console.error(`no such style: ${id}`);
+      process.exit(1);
+    }
+    mkdirSync(into, { recursive: true });
+    const name = `${one.folder}.jpg`;
+    const target = join(into, name);
+    copyFileSync(join(one.at, 'poster.jpg'), target);
+    /* the path the card takes is inside the project: the project's folder is where the chat loads pictures from */
+    picked.push({ id: one.id, name: one.name, nameZh: one.nameZh, family: one.family, folder: one.folder, picture: relative(process.cwd(), target).split('\\').join('/') });
+  }
+  console.log(JSON.stringify(picked, null, 2));
+  process.exit(0);
+}
+
+console.error('usage: atlas.mjs --list [--family X] | --id 26 | --verify | --pick 26,32,2 [--into dir]');
+process.exit(1);

package/studio/server/fetch-github.mjs

@@ -18,9 +18,13 @@ export const GITHUB_API = 'https://api.github.com';
 export const GITHUB_RAW = 'https://raw.githubusercontent.com';
 /* files downloading at once */
 const PARALLEL = 4;
-/* tries at each file, and the wait before the second (doubled for each after) */
-const TRIES = 5;
+/* tries at each file, and the wait before the second (doubled for each after). Three, not five: with a request limit
+   below, a host that cannot send is known in half a minute rather than in two. */
+const TRIES = 3;
 const RETRY_MS = 500;
+/* One request's own limit. A host that never answers — blocked by a network, or a mirror that is down — otherwise
+   holds the fetch for the system's connect timeout, tries over, before anything is known. */
+const REQUEST_MS = 12000;
 /* the starts of a folder's address tried as a branch's name (a branch may have slashes in its name) */
 const MAX_REF_PARTS = 6;
 
@@ -41,6 +45,13 @@ const pause = (ms, signal) => new Promise((done) => {
   signal?.addEventListener('abort', () => { clearTimeout(timer); done(undefined); }, { once: true });
 });
 
+/** A request's signal: the caller's, and this module's own limit, whichever stops it first. @param {AbortSignal} [signal] */
+export const within = (signal, ms = REQUEST_MS) => AbortSignal.any([...(signal ? [signal] : []), AbortSignal.timeout(ms)]);
+
+/** The address of one file at a commit, on the file host `raw` (the real one when it says nothing).
+ * @param {string} raw @param {{ owner: string, repo: string }} at @param {string} commit @param {string[]} parts */
+export const rawUrl = (raw, at, commit, parts) => `${raw || GITHUB_RAW}/${encodeURIComponent(at.owner)}/${encodeURIComponent(at.repo)}/${commit}/${encodePath(parts)}`;
+
 /**
  * Ask GitHub. A connection that fails is tried again, a little later each time; failing every time, it is said as a
  * network failure. @param {string} url
@@ -49,7 +60,7 @@ const pause = (ms, signal) => new Promise((done) => {
 async function request(url, { signal, accept }) {
   for (let tries = 1; ; tries++) {
     try {
-      return await fetch(url, { signal, headers: { accept: accept ?? 'application/vnd.github+json', 'user-agent': 'AICUT-Studio' } });
+      return await fetch(url, { signal: within(signal), headers: { accept: accept ?? 'application/vnd.github+json', 'user-agent': 'AICUT-Studio' } });
     } catch (e) {
       if (signal?.aborted) throw e;
       if (tries >= TRIES) throw new FetchError('Could not reach GitHub: check your internet connection.', 502, 'network');

package/studio/server/server.mjs

@@ -41,7 +41,8 @@ import { listSfx, sfxJob, startSfx } from './sfx.mjs';
 import { listExamples } from './examples.mjs';
 import { createFromTemplate, listTemplates } from './templates.mjs';
 import { templateCover } from './template-posters.mjs';
-import { addSkillsFromGitHub, installSkills, listSkills } from './skills.mjs';
+import { addSkillsFromGitHub, installSkills, listSkills, listSkillsFor, removeSkill } from './skills.mjs';
+import { addUserStyles, removeUserStyle, userStyles } from './styles-store.mjs';
 import { pickFiles, pickFolder } from './folder-picker.mjs';
 import { readPrefs, writePrefs } from './prefs.mjs';
 import { ensureProxies } from './proxies.mjs';
@@ -434,7 +435,7 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     /* the example films (examples.mjs): none when the index cannot be read */
     if (parts[0] === 'examples' && parts.length === 1 && req.method === 'GET') return json(res, 200, { examples: await listExamples() });
     /* the home page's starter templates (templates.mjs): what they are; their files stay on this side */
-    if (parts[0] === 'templates' && parts.length === 1 && req.method === 'GET') return json(res, 200, { templates: listTemplates() });
+    if (parts[0] === 'templates' && parts.length === 1 && req.method === 'GET') return json(res, 200, { templates: listTemplates(url.searchParams.get('lang') ?? undefined) });
     /* a template's cover: its own film drawn once, then cached (template-posters.mjs) */
     if (parts[0] === 'templates' && parts.length === 3 && parts[2] === 'cover' && req.method === 'GET') {
       const jpeg = await templateCover(parts[1], pages).catch((e) => {
@@ -447,7 +448,16 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
     /* the skills a new project may start with (skills.mjs): the ones this copy of AICUT brings, and the ones fetched
        from a repository before. POST `skills/github` { repo } fetches a repository's skills into AICUT's home, where the
        next GET lists them beside the app's own */
-    if (parts[0] === 'skills' && parts.length === 1 && req.method === 'GET') return json(res, 200, { skills: listSkills() });
+    if (parts[0] === 'skills' && parts.length === 1 && req.method === 'GET') return json(res, 200, { skills: listSkillsFor(url.searchParams.get('lang') ?? undefined) });
+    /* DELETE `skills/:id` takes a skill off the machine (skills.mjs): the folder goes from the library it came from, and
+       its style card goes with it — a tile that starts a project with a skill that is not there starts nothing. A project
+       that already carries a copy under `.pi/skills` keeps it. The app's own two are refused (409). */
+    if (parts[0] === 'skills' && parts.length === 2 && req.method === 'DELETE') {
+      const removed = removeSkill(parts[1]);
+      const card = userStyles().find((one) => one.skill === removed.id);
+      if (card) removeUserStyle(card.id);
+      return json(res, 200, { ...removed, card: card?.id ?? null });
+    }
     if (parts[0] === 'skills' && parts[1] === 'github' && parts.length === 2 && req.method === 'POST') {
       const { repo } = /** @type {{ repo?: string }} */ (await readJson(req));
       try {
@@ -458,6 +468,33 @@ export async function startStudio({ port = 4747, key, openBrowser = systemBrowse
       }
     }
 
+    /* the styles a person added from a repository (styles-store.mjs): POST `styles/github` { repo } fetches the
+       repository's skills (skills.mjs) and makes one style card of the Templates page per skill — the project it
+       starts carries that skill, and the card's picture is the starter film drawn for real. DELETE `styles/:id`
+       takes a card away; its skill stays in the library. */
+    if (parts[0] === 'styles' && parts[1] === 'github' && parts.length === 2 && req.method === 'POST') {
+      const { repo } = /** @type {{ repo?: string }} */ (await readJson(req));
+      try {
+        const { skills } = await addSkillsFromGitHub(String(repo ?? ''));
+        return json(res, 200, { styles: addUserStyles(skills) });
+      } catch (e) {
+        if (e instanceof FetchError) throw new HttpError(e.status, e.message);
+        throw e;
+      }
+    }
+    /* one skill made a style card of its own (the Skills page's switch): the skill is already in the library — the ones
+       AICUT brings and the ones fetched — so this only decides whether the Templates page offers a film in its name. */
+    if (parts[0] === 'styles' && parts.length === 1 && req.method === 'POST') {
+      const { skill } = /** @type {{ skill?: string }} */ (await readJson(req));
+      const asked = listSkills().find((one) => one.id === String(skill ?? ''));
+      if (!asked) throw new HttpError(404, 'no such skill');
+      addUserStyles([asked]);
+      return json(res, 200, { styles: userStyles() });
+    }
+    if (parts[0] === 'styles' && parts.length === 2 && req.method === 'DELETE') {
+      return json(res, 200, { removed: removeUserStyle(parts[1]) });
+    }
+
     /* the Projects window's recycle bin (recycle.mjs): where a deleted project waits 30 days before it is gone for good.
          GET    recycle                → { entries }, newest first, each with the days it has left
          POST   recycle/:id/restore    → { project }: its folder back where it was, and on the list again

package/studio/server/skill-summaries.mjs

@@ -0,0 +1,60 @@
+// @ts-check
+/**
+ * One line of each skill's own words, in a language a person reads — the Skills page and the style cards on the
+ * Templates page say this instead of the frontmatter's paragraph.
+ *
+ * A skill's `description` in its SKILL.md is written for the agent: the whole of what it covers, in the upstream
+ * project's own language, several hundred characters of it. That is what the agent needs and a person scanning a list
+ * does not. So each row says one line here (`zh-CN` written by hand, for the skills AICUT ships), and anything without a
+ * line of its own falls back to the first sentence of its description — never to nothing.
+ *
+ * A skill fetched from a repository later has no line: nobody has read it yet. `firstSentence` still gives it a short
+ * line, in its own words, which is the honest thing to show.
+ */
+
+/**
+ * Hand-written lines, by language, by skill id. Only the languages actually written appear: a language with no entry
+ * falls through to the description.
+ * @type {Record<string, Record<string, string>>}
+ */
+export const SKILL_SUMMARIES = {
+  'zh-CN': {
+    aicut: '做片、剪辑、检查、渲染，一条龙：写 film.html、逐段检查画面、导出成片，也能直接开 Studio。',
+    'aicut-motion': '给片子做美术指导：配色、字体、真转场、按节拍排布；选题只有一句话时，先从 86 套归档风格挑三种摆成卡让你选。',
+  },
+};
+
+/** The first sentence of a text, short enough for one line: the fallback for a skill with no line of its own.
+ * @param {string} [text] @param {number} [limit] @returns {string} */
+export function firstSentence(text, limit = 64) {
+  const one = String(text ?? '').replace(/\s+/g, ' ').trim();
+  if (!one) return '';
+  /* a sentence ends at a CJK full stop, or at a Western one that ends a word; `e.g.`, `i.e.` and `1.5` do not */
+  let at = -1;
+  const cjk = /[。！？]/.exec(one);
+  if (cjk) at = cjk.index;
+  const western = /[.!?](?=\s|$)/g;
+  let found;
+  while ((found = western.exec(one))) {
+    const tail = one.slice(Math.max(0, found.index - 3), found.index + 1);
+    if (/^[A-Za-z]\.[A-Za-z]\.$/.test(tail)) continue;
+    at = at < 0 ? found.index : Math.min(at, found.index);
+    break;
+  }
+  const cut = at >= 0 ? one.slice(0, at + 1) : one;
+  return cut.length > limit ? `${cut.slice(0, limit).trimEnd()}…` : cut;
+}
+
+/**
+ * What a skill says of itself, one line, in `lang` when a line was written: the hand-written one, else its own first
+ * sentence. @param {string} id @param {string} description @param {string} [lang] @returns {string}
+ */
+export function summaryFor(id, description, lang = '') {
+  return SKILL_SUMMARIES[lang]?.[id] ?? firstSentence(description);
+}
+
+/** Whether a hand-written line exists for this skill in this language (tests and the Skills page's hint use it).
+ * @param {string} id @param {string} lang @returns {boolean} */
+export function hasSummary(id, lang) {
+  return Boolean(SKILL_SUMMARIES[lang]?.[id]);
+}