explainer-board-system

sirioberati/YouTube-AI-Motion-Graphics Frontend & design Data & analytics

explainer-board-system is a skill in sirioberati/YouTube-AI-Motion-Graphics, last changed 27 Oct 2026. It can name web addresses.

From the author

The look, layout and motion system for 16:9 YouTube explainer boards, in the "Clean minimal" starter theme (white paper, thin-bordered cards with one soft shadow, Inter / JetBrains Mono / Instrument Serif, one blue accent, footage tiles at true aspect, camera box bottom-right). Use whenever you design, build, review or animate an explainer board, slide, chart, diagram or end screen; when someone asks for the board colours, fonts, sizes, safe zones, camera keep-out, chart rules, motion, easings or word-sync rules; when choosing which board fits a line ("which board for a price breakdown?"); or when QA-checking boards before export. It owns how boards look and move; explainer-board-brief owns what goes on them.

What it can touch

Names web addresses

How much a skill can do, not whether it is risky.

Pattern check

Nothing flagged

That isn't proof the skill is harmless.

Commit 52b5b94 · 3 Nov 2026

How the check works

Pattern check: nothing flagged

That isn't proof the skill is harmless.

Install

Each tab says whether it installs commit 52b5b94, the one we checked, or the latest version.

OpenCode also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Goose also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Windsurf (Devin Desktop) also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Zed also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Roo Code also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Factory Droid also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Junie also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

Amp also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.

No install command here reaches Kiro. Copy the skill's folder into .kiro/skills/ in your project, or ~/.kiro/skills/ for all your projects. sirioberati/YouTube-AI-Motion-Graphics/skills/explainer-board-system (opens in a new tab)

Antigravity also looks in .agents/skills/, so the Any agent steps reach it with This project. For All projects, see where Antigravity looks.

Cline also looks in .claude/skills/, so the Claude Code steps reach it with This project. For All projects, see where Cline looks.

No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie and Amp. With This project, Any agent also reaches Antigravity and Claude Code reaches Cline. Kiro needs the folder copied by hand.

Pinned to commit 52b5b94, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .claude/skills &&mkdir .claude/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .claude/skills/explainer-board-system/ &&rm -rf "$tmp"

If Claude Code was already running and this created the skills folder, run /reload-skills.

Claude Code docs

Pinned to commit 52b5b94, the one we checked.

Skills in the Claude apps belong to your account rather than to a project.

Make explainer-board-system.zip, with the skill folder at the top level:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&out="$(mktemp -d)" &&cp -R "$tmp"/skills/explainer-board-system "$out"/explainer-board-system &&(cd "$out" && zip -qr - explainer-board-system) > explainer-board-system.zip &&rm -rf "$tmp" "$out"

In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose explainer-board-system.zip.

On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.

Claude apps docs

Pinned to commit 52b5b94, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .agents/skills &&mkdir .agents/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .agents/skills/explainer-board-system/ &&rm -rf "$tmp"

Codex picks up new skills on its own; restart it if this one does not appear.

Codex docs

Pinned to commit 52b5b94, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .cursor/skills &&mkdir .cursor/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .cursor/skills/explainer-board-system/ &&rm -rf "$tmp"

Cursor docs

Pinned to commit 52b5b94, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .github/skills &&mkdir .github/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .github/skills/explainer-board-system/ &&rm -rf "$tmp"

In a running Copilot CLI session, run /skills reload.

Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.

gh skill install sirioberati/YouTube-AI-Motion-Graphics skills/explainer-board-system/SKILL.md@52b5b94e063439adf083c2a935dc6f727dd7adc7 --agent github-copilot --scope project

Copilot & VS Code docs

Pinned to commit 52b5b94, the one we checked.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .gemini/skills &&mkdir .gemini/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .gemini/skills/explainer-board-system/ &&rm -rf "$tmp"

In a running session, run /skills reload.

Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.

gemini skills install https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git --path skills/explainer-board-system --scope workspace

Gemini CLI docs

Pinned to commit 52b5b94, the one we checked.

OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity read .agents/skills in a project.

From your project's root folder:

tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&git -C "$tmp" sparse-checkout set -- skills/explainer-board-system &&git -C "$tmp" checkout -q 52b5b94e063439adf083c2a935dc6f727dd7adc7 &&mkdir -p .agents/skills &&mkdir .agents/skills/explainer-board-system &&cp -R "$tmp"/skills/explainer-board-system/. .agents/skills/explainer-board-system/ &&rm -rf "$tmp"

Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.

npx skills@1.7.4 add sirioberati/YouTube-AI-Motion-Graphics --skill explainer-board-system

Agent Skills docs

Read SKILL.md first

MIT

Licence

138

Repo stars

Folder last changed

Publisher

Files

Checked

3 Nov 2026

What it can touch

From the files and frontmatter at commit 52b5b94. This is how much a skill can do, not whether it is risky.

Names web addresses
It mentions outside web addresses the agent may visit. We list them but don't follow them.
Outside links we did not follow

Pattern check

Pattern check: nothing flagged · commit 52b5b94 · 3 Nov 2026

We checked every text file in this skill, at commit 52b5b94 on 3 Nov 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.

How the check works Report an incorrect finding

Outside links we did not follow

https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&family=Instrument+Serif:ital@1&display=swap

Format check

Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.

Agent Skills specPasses
The open format from agentskills.io, held to the strictest version of each rule among the agents we check.
- Note
  The first sentence of the description is 278 characters. Agents shorten long descriptions, so lead with the main job. D8
  Fix: Start with one short sentence that names the job.
- Note
  There is no license field, so readers can't tell whether they may reuse the skill. O2
  Fix: Add license: with an SPDX name such as MIT or Apache-2.0, or the name of a bundled licence file.
- Note
  Reference files over 100 lines with no table of contents at the top: references/board-catalog.md (103 lines), references/charts.md (124 lines), references/components.md (197 lines) and references/motion.md (176 lines). B5
  Fix: Add a short list of the sections at the top of each.
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
  The first sentence of the description is 278 characters. Agents shorten long descriptions, so lead with the main job. D8
  Fix: Start with one short sentence that names the job.
- Note
  Reference files over 100 lines with no table of contents at the top: references/board-catalog.md (103 lines), references/charts.md (124 lines), references/components.md (197 lines) and references/motion.md (176 lines). B5
  Fix: Add a short list of the sections at the top of each.
Claude apps & API uploadPasses
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Note
  The description is 718 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
  Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Note
  Reference files over 100 lines with no table of contents at the top: references/board-catalog.md (103 lines), references/charts.md (124 lines), references/components.md (197 lines) and references/motion.md (176 lines). B5
  Fix: Add a short list of the sections at the top of each.
OpenAI (Codex & API)Passes
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Note
  The first sentence of the description is 278 characters. Agents shorten long descriptions, so lead with the main job. D8
  Fix: Start with one short sentence that names the job.
VS Code & CopilotPasses

SKILL.md

Read SKILL.md on GitHub

Files

10 files

Path	Size
SKILL.md (opens in a new tab)	4.2 KB
assets/brand.css (opens in a new tab)	15.6 KB
references/board-catalog.md (opens in a new tab)	13.9 KB
references/charts.md (opens in a new tab)	10.7 KB
references/components.md (opens in a new tab)	28.7 KB
references/do-dont.md (opens in a new tab)	3.6 KB
references/layout.md (opens in a new tab)	5.7 KB
references/motion.md (opens in a new tab)	26.2 KB
references/qa-handoff.md (opens in a new tab)	4.3 KB
references/tokens.md (opens in a new tab)	3.2 KB

More from sirioberati/YouTube-AI-Motion-Graphics

Skill	What it can touch	Pattern check	Licence	Updated
board-syncAnimate explainer boards to the presenter's voice. Takes the board HTMLs from Claude Design (04-boards), the final-cut WAV and its words.tsv, the marked script and the board brief; makes every element land on its spoken word; renders one clip per board and a full-length board-track.mp4; checks itself (qa-report.md with contact sheets); and writes the editor timeline for DaVinci Resolve (FCPXML) and Premiere (FCP7 XML) with the camera in the bottom-right zone. Step 5 of the explainer pipeline. Use when the editor says "animate the boards", "sync the boards to his voice", "board video", "render the boards", "build the editor timeline", re-runs one board after a fix, or asks why a board lands early, sits static or covers the camera zone. Runs end to end on Windows and Mac with one setup command (Python via uv, ffmpeg, the installed Edge or Chrome). Downloads software +4 more Pattern check: 2 items to reviewMITUpdated 27 Oct 2026	Downloads software Runs shell commands +3 more	Pattern check: 2 items to review	MIT	27 Oct 2026
explainer-board-briefDecide WHAT goes on the explainer boards (slides, cards, diagrams) for a YouTube video script, before anyone designs them. Reads a pasted script line by line, finds every line, word, number and paragraph a viewer would not understand from the voice alone, groups them into one-picture boards, and writes a complete, never-empty brief that a board designer (the youtube-explainer-boards skill, Claude Design, or a human) can build from without guessing. Use whenever someone pastes or attaches a script and asks for boards, slides, a deck, visuals, diagrams, an explainer board plan, "what should go on screen", "which lines need a visual", a brief for Claude Design, or a check of whether existing boards are clear, empty or too wordy. Content only: it never chooses colours, fonts or layout styling. Runs end to end in any Claude account from a pasted script. Instructions only Pattern check: Nothing flaggedMITUpdated 27 Oct 2026	Instructions only	Pattern check: Nothing flagged	MIT	27 Oct 2026

Other Frontend & design skills

Same category, most repo stars first.

Skill	What it can touch	Pattern check	Licence	Updated
reverse-engineer-anythingReverse engineer native, managed, Electron/JavaScript, packaged, firmware, and browser targets with REA, and build agent environments (AgentEnv bundles) of web applications from a live instance or a capture. Use shipped-artifact or requested runtime evidence to explain features, compare versions, decompile code, or guide a reconstruction. Skip REA for ordinary source-repository architecture analysis. morluto/rea Downloads software +3 more Pattern check: Nothing flaggedMITUpdated 2 Nov 2026	Downloads software Runs shell commands +2 more	Pattern check: Nothing flagged	MIT	2 Nov 2026
accessibilityDesign, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support. affaan-m/ECC Names web addresses Pattern check: Nothing flaggedMITUpdated 27 Sept 2026	Names web addresses	Pattern check: Nothing flagged	MIT	27 Sept 2026
android-clean-architectureClean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project. affaan-m/ECC Instructions only Pattern check: Nothing flaggedMITUpdated 11 Aug 2026	Instructions only	Pattern check: Nothing flagged	MIT	11 Aug 2026
algorithmic-artCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations. anthropics/skills Names web addresses +1 more Pattern check: Nothing flaggedApache 2.0Updated 20 Apr 2026	Names web addresses Bundles scripts	Pattern check: Nothing flagged	Apache 2.0	20 Apr 2026
brand-guidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. anthropics/skills Names web addresses Pattern check: Nothing flaggedApache 2.0Updated 20 Apr 2026	Names web addresses	Pattern check: Nothing flagged	Apache 2.0	20 Apr 2026
design-consultationDesign consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) garrytan/gstack Changes agent settings +4 more Pattern check: 1 item to reviewMITUpdated 2 Nov 2026	Changes agent settings Runs shell commands +3 more	Pattern check: 1 item to review	MIT	2 Nov 2026

At a glance

What it can touch

Pattern check

Install

Claude Code

Claude apps

Codex

Cursor

Copilot & VS Code

Gemini CLI

Any agent

What it can touch

Pattern check

Outside links we did not follow

Format check

SKILL.md

Files

More from sirioberati/YouTube-AI-Motion-Graphics

Other Frontend & design skills