Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

manim-video — Claude Code skill: what it does, how to install

Builds technical explainers in Manim for graphs, system diagrams, and product walkthroughs. Use it when motion should clarify the idea instead of a talking-head script.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add affaan-m/ECC --skill manim-video -a claude-code
Open on GitHub

What manim-video does

manim-video helps plan and build short technical explainers with Manim. It starts with a one-sentence visual thesis, breaks the concept into 3 to 6 scenes, and defines what each scene should prove. The workflow then moves to a scene outline, a low-quality smoke-test render, and adjustments to typography, spacing, color, and pacing.

The default package includes a 16:9 MP4, one thumbnail or poster frame, a storyboard, and a scene plan. Rendering requires the manim CLI. Use ffmpeg when post-processing is needed. The result can move to video-editing for final assembly or remotion-video-creation for composited UI, captions, and extra motion layers.

Install it when the explanation depends on graphs, motion, or structured diagrams. It is a poor fit for a generic talking-head script.

What it helps with

  • build a technical explainer with animated scenes
  • show how a graph or metric changes over time
  • turn system architecture into a scene-by-scene outline
  • prepare a short product or launch explainer for X or a landing page

Example prompts for the agent

  • Build a Manim explainer for this service architecture and start with the storyboard.
  • Show the current network graph, then the optimized graph, highlighting warm-path nodes and target clusters.
  • Run a smoke test with `manim -ql assets/network_graph_scene.py NetworkGraphExplainer`, then suggest changes after the render.

How to install manim-video

1Skills CLI (Vercel)

npx skills add affaan-m/ECC --skill manim-video -a claude-code

2Manually: put the files in place

~/.claude/skills/manim-video/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/manim-video/

From the same set146

The whole set →
video-editing affaan-m AI-assisted workflow for editing, trimming, and enriching real footage. Connects raw recordings with FFmpeg cuts, Remotion overlays, and ElevenLabs voiceovers. Claude Code CX Codex Cursor +1 6,500installs docker-patterns affaan-m A skill with Dockerfile and Docker Compose patterns: local dev stacks, networking, volumes, container hardening. Claude Code CX Codex Cursor +1 6,300installs frontend-patterns affaan-m A skill for React and Next.js work: component patterns, state, data fetching, and render performance. Use it when building or reviewing UI. Claude Code CX Codex Cursor +1 5,900installs backend-patterns affaan-m A skill with backend patterns for Node.js, Express and Next.js API routes: layering, caching, transactions, error handling. Claude Code CX Codex Cursor +1 5,900installs coding-standards affaan-m Baseline cross-project coding conventions for naming, immutability, and clean code principles. Useful for code reviews and refactoring. Claude Code CX Codex Cursor +1 5,600installs api-design affaan-m Provides REST API design standards covering resource naming, status codes, pagination, and error payloads. Use it when creating or auditing API contracts. Claude Code CX Codex Cursor +1 5,500installs rust-testing affaan-m A skill for writing Rust tests: unit, integration, async, property-based, mocks and coverage. Useful when the project runs on TDD. Claude Code CX Codex Cursor +1 5,500installs laravel-security affaan-m This skill reviews Laravel authentication, Eloquent safety, CSRF, XSS, APIs, and production settings. Use it for security reviews or deployment checks. Claude Code CX Codex Cursor +1 5,400installs

Similar

brand-landingpage Travis D. Elliott This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs stitch::upload-to-stitch official google-labs-code Uploads local images, mockups, extracted HTML, and design markdown to a Stitch project over HTTP, bypassing MCP base64 token limits. Claude Code CX Codex Cursor +1 9,900installs stitch::extract-static-html official google-labs-code This skill saves a rendered app page as a standalone HTML file with CSS and images embedded. Use it to share a static view or prepare a page for Stitch. Claude Code CX Codex Cursor +1 9,900installs better-colors jakubkrehel Audits color systems, generates ramps, and maps semantic tokens to roles. Use it when hardcoded hex values pile up or text contrast needs verifiable measurement. Claude Code CX Codex Cursor +1 32,200installs ppt-generation bytedance Creates PPTX presentations by generating slide visuals and assembling them into PowerPoint decks. Useful when you need a consistent visual deck from a text prompt. Claude Code CX Codex Cursor +1 5,200installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about manim-video

How do I install manim-video in Claude Code?

Run npx skills add affaan-m/ECC --skill manim-video -a claude-code. The skill file will be placed at ~/.claude/skills/manim-video/SKILL.md.

What does manim-video do?

It plans and builds animated explainers for technical concepts, graphs, system diagrams, and product walkthroughs. Its output includes a visual thesis, storyboard, scene outline, and render plan.

What does manim-video require?

Rendering requires the manim CLI. Use ffmpeg for post-processing when needed; video-editing is available for final assembly.

Source text

SKILL.md · MIT 
---
name: manim-video
description: Build reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs, then hand off to the wider ECC video stack if needed. Use when the user wants a clean animated explainer rather than a generic talking-head script.
metadata:
  origin: ECC
---

# Manim Video

Use Manim for technical explainers where motion, structure, and clarity matter more than photorealism.

## When to Activate

- the user wants a technical explainer animation
- the concept is a graph, workflow, architecture, metric progression, or system diagram
- the user wants a short product or launch explainer for X or a landing page
- the visual should feel precise instead of generically cinematic

## Tool Requirements

- `manim` CLI for scene rendering
- `ffmpeg` for post-processing if needed
- `video-editing` for final assembly or polish
- `remotion-video-creation` when the final package needs composited UI, captions, or additional motion layers

## Default Output

- short 16:9 MP4
- one thumbnail or poster frame
- storyboard plus scene plan

## Workflow

1. Define the core visual thesis in one sentence.
2. Break the concept into 3 to 6 scenes.
3. Decide what each scene proves.
4. Write the scene outline before writing Manim code.
5. Render the smallest working version first.
6. Tighten typography, spacing, color, and pacing after the render works.
7. Hand off to the wider video stack only if it adds value.

## Scene Planning Rules

- each scene should prove one thing
- avoid overstuffed diagrams
- prefer progressive reveal over full-screen clutter
- use motion to explain state change, not just to keep the screen busy
- title cards should be short and loaded with meaning

## Network Graph Default

For social-graph and network-optimization explainers:

- show the current graph before showing the optimized graph
- distinguish low-signal follow clutter from high-signal bridges
- highlight warm-path nodes and target clusters
- if useful, add a final scene showing the self-improvement lineage that informed the skill

## Render Conventions

- default to 16:9 landscape unless the user asks for vertical
- start with a low-quality smoke test render
- only push to higher quality after composition and timing are stable
- export one clean thumbnail frame that reads at social size

## Reusable Starter

Use [assets/network_graph_scene.py](assets/network_graph_scene.py) as a starting point for network-graph explainers.

Example smoke test:

```bash
manim -ql assets/network_graph_scene.py NetworkGraphExplainer
```

## Output Format

Return:

- core visual thesis
- storyboard
- scene outline
- render plan
- any follow-on polish recommendations

## Related Skills

- `video-editing` for final polish
- `remotion-video-creation` for motion-heavy post-processing or compositing
- `content-engine` when the animation is part of a broader launch

© affaan-m · MIT · affaan-m/ECC

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor