mcpField
E
explain-with-section-clips

explain-with-section-clips

github.com/kjetilhartveitDesign & UI282 installsUpdated 1w ago
Repository

About explain-with-section-clips

A skill for explaining changes through a page of grouped sections, each centered on a short looping animation clip. It specifies clip behavior, accessibility and layout, and uses `explainer-kit` with `EV.clip` to build the visual explanation.

Key features

  1. 01Organize explanations into 3–6 sections
  2. 02Show one idea in each 5–12 second clip
  3. 03Pause clips when they leave view
  4. 04Provide playback controls and progress
  5. 05Use end frames for reduced motion and thumbnails
  6. 06Build clips with `explainer-kit` and `EV.clip`

Use cases

  1. 01Visually explain a set of changes
  2. 02Show how a value flows through steps
  3. 03Illustrate a request being stopped
  4. 04Present code changes in grouped sections

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kjetilhartveit/kjetils-skills --skill explain-with-section-clips

After installing, type/explain-with-section-clipsin Claude Code to confirm it loaded.

Details

From the project README

Explain with Section Clips

A traditional page of grouped sections, where each section's visual is a short looping animation ("clip") in a small player frame. Each clip shows exactly one idea.

Use this skill when

  • The user asks for a visual explanation of changes with section clips.
  • Used by an orchestrator to explain changes visually with section clips.

Sections

  • 3–6 sections. Each: a one-sentence takeaway → one clip → 2–3 short lines → one ev-more toggle that names its contents (e.g. "The new code · Files touched").
  • Group related information inside the toggles: highlighted code, grouped items, status chips, compact tables.

Clips

  • 5–12 seconds, looping, showing one idea: something counting up, a value flowing through steps, a request being stopped, a change spreading to its consumers.
  • Play only while visible; pause when scrolled away. Play / pause / replay controls and a progress bar.
  • At rest (before playing, under reduced motion, in thumbnails) show the end frame, which must state the result on its own.
  • Text inside a clip must stay legible on phones (≥ 13 px at desktop size, scaled up for narrow frames).

Building it

  • Build it as a fragment with the explainer-kit skill and draw clips with EV.clip(el, {duration, setup, draw}), where draw(t) sets the whole frame from the time alone (makes seeking, looping and the poster frame free).
  • Give each section id + data-toc so it appears in the chapter list.

Comments

Markdown supported