メニュー
Specify teacher-mark overlays (Excalidraw-style hand-drawn ink) for a Remotion lesson scene. Wave 4 (parallel with composer). Marks are specified in CUE-RELATIVE frames, never master-timeline absolutes. Restraint is the rule.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/blueif16/animate-svg --skill sketch-explainer-layerコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | sketch-explainer-layer |
| description | Specify teacher-mark overlays (Excalidraw-style hand-drawn ink) for a Remotion lesson scene. Wave 4 (parallel with composer). Marks are specified in CUE-RELATIVE frames, never master-timeline absolutes. Restraint is the rule. |
Add hand-drawn teacher explanation cues without overwhelming the lesson.
lesson-data/<id>/brief.mdlesson-data/<id>/storyboard.md (sketch-overlay-need column per cue)lesson-data/<id>/visual-design.md (Visual Contract, zones — your marks must respect zone-marks rules from kids-eye §1.5)src/lessons/<camelId>LessonTimeline.ts (the RECONCILED cue boundaries — Wave 3.5; the single source of truth the composer also reads). The cue-relative offsets you author resolve against cues[cueId].startFrame from THIS module. (<X>Timing.ts is ASR-QA-only in v4 — never read it for cue timing.)kids-eye SKILL.mdvisual-discipline SKILL.mdEvery mark's timing is specified as cue-relative offsets, NEVER as absolute master-timeline frames:
✗ FORBIDDEN — absolute master-timeline frames
| mark-bundle-wrap-arc | wrap-arc | 891 | 24 | 1057 |
✓ REQUIRED — cue-relative
| mark-bundle-wrap-arc | wrap-arc | cue=bundle-action | drawOnRelativeStart=12 | drawOnDuration=24 | fadeOutRelativeStart=Math.min(cueLength-8, ...) |
Why: ASR realignment changes absolute frame numbers between runs. A mark at absolute 891 may render past the end of the video if the cue moved. A mark at "12 frames after bundle-action starts" stays correct regardless.
The composer translates { cueId, drawOnRelativeStart, ... } → real frames at scene-build time using .
cues[cueId].startFramekids-eye §2)A teacher mark must clarify or celebrate; otherwise it does not exist. Most cues should have ZERO marks. This skill owns the mark budget: total marks across the video ≤ floor(cueCount × 0.6) (a 9-cue video at 5 is already the high end; at 9 it is decoration) — there is no separate per-cue cap.
Before adding a mark, complete the sentence:
"This mark carries signal X, which is not yet carried by Y or Z."
If you can't complete it, drop the mark.
NOT in this vocabulary (don't invent): circles around groups (the bundle already groups), ticks under each item (the count badges already say it), sparkles (composer/visual-design owns those), exclamation glyphs.
kids-eye §1.5)zone-objects (e.g. a wrap-arc following the rope path) but never sit inside zone-labels (that creates a label-mark overlap).start anchor is in zone-labels; its end anchor is in zone-objects. Both ends are explicit (x, y).lesson-data/<id>/sketch-overlay.mdStructure:
textNavy), width, opacity, jitter amount.<TeacherMark> accepts an opt-in boil prop that re-perturbs the mark's control points every N frames so a long-held mark reads as a teacher's hand. Decorative-only — never on the teaching primitive. At most one or two boiled marks per video.
Reach for boil ONLY when the mark stays on screen ≥ 1.5s after draw-on AND the cue is calm enough that the extra micro-motion won't compete with the teaching object.
Full reach guide, magnitude ranges, anti-patterns: CAPABILITIES.md#sketch-boil.
<TeacherMark
kind="wrap-arc"
anchor={{ kind: "span", start, end }}
drawProgress={drawProgress}
boil={{ magnitude: 1, holdFrames: 4 }}
/>
<TeacherMark> accepts an opt-in settle prop that grows the mark from ~92% to 100% scale across the last 15% of draw-on so it lands like a teacher lifting their pen, not a CSS transition finishing. Climax-only — at most one settled mark per video, usually the wrap-arc or the punctuating underline. Don't settle short glance marks; the eye won't see it.
Full reach guide, magnitude ranges, anti-patterns: CAPABILITIES.md#sketch-settle.
<TeacherMark
kind="wrap-arc"
anchor={{ kind: "span", start, end }}
drawProgress={drawProgress}
settle={{ magnitude: 0.08 }}
/>
| cue id | mark? | mark type | anchor (zone-aware) | drawOnRelativeStart | drawOnDuration | fadeOutRelativeStart | purpose |
For cues with no mark, write n and a 1-line reason (avoid clutter / signal already carried).
The one mark that ties to the visual climax. Anchor + relative timing must align with the climax primitive (e.g. wrap-arc co-times with BundleWrap.wrapProgress).
Each mark spec becomes a <TeacherMark> instance in the scene. The composer reads { cueId, drawOnRelativeStart, ... } and resolves to real frames via:
const cue = cues[mark.cueId];
const drawStart = cue.startFrame + mark.drawOnRelativeStart;
const drawEnd = drawStart + mark.drawOnDuration;
const fadeStart = cue.startFrame + mark.fadeOutRelativeStart;
// clamp against cue.endFrame
<TeacherMark> MUST also be registered as a SceneElement in src/lessons/<camelLessonId>/manifest.ts (zone: "marks", bboxAt(frame) = the anchor span padded by stroke width and any boil magnitude, opacityAt(frame) = the same draw-on × fade-out math the scene uses).npm run lesson:check before render — without a manifest entry, the bbox check can't see the mark and the collision goes unflagged.If any check fails, redesign — do not ship a verbose mark table to compensate.