# Course Infographics

> >

- **Type:** Skill
- **Install:** `agentstack add skill-nulightjens-jensai-skills-course-infographics`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [NulightJens](https://agentstack.voostack.com/s/nulightjens)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [NulightJens](https://github.com/NulightJens)
- **Source:** https://github.com/NulightJens/jensai-skills/tree/main/course-infographics

## Install

```sh
agentstack add skill-nulightjens-jensai-skills-course-infographics
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Course Infographics Generator

Generate publication-ready infographics and short motion graphics for course lessons and
classroom content, on any platform that accepts images and GIFs.

**IMPORTANT**: Read `references/design-tokens.md` for the color system and the accent
parameter. Read `references/layout-modes.md` for the Editorial layout and its variants.
Read `references/content-routing.md` for content-to-variant mapping. Read
`references/motion-specs.md` for animation timing.

Read the `remotion-best-practices` skill, if it is installed, before writing any Remotion
code. If the host project defines a `DESIGN-RULES.md` at its root, read that too for
project-scoped constraints that override the defaults here.

## Prerequisites

1. A Remotion project to host the compositions. Set `REMOTION_PROJECT` to its path:

   ```bash
   export REMOTION_PROJECT=/path/to/your/remotion-project
   ```

   Run `npm install` inside it if dependencies are not yet installed.
2. Source content available (lesson markdown, module directory, or free text).

## Configuration

| Parameter | Default | Description |
|-----------|---------|-------------|
| Accent color | `#0d8aff` | The single 10% accent. Set per project via `--accent`, an `ACCENT_COLOR` env var, or a project design config. Every reference to "accent" in this skill resolves to this value. |
| Theme | `dark` | `dark` or `light` |
| Resolution | `1920x1080` | Canvas size for both tiers |

The accent is a parameter, not a fixed value. Swap it for the course's own color and the
whole system follows, since nothing else in the palette is chromatic.

## Two Tiers

| Tier | Format | Duration | Use |
|------|--------|----------|-----|
| **Still** | PNG 1920x1080 | n/a | Vocab, overviews, definitions, checklists, term lists |
| **Motion** | GIF 1920x1080 | 3-8s loop | Concept visualizations, process flows, comparisons |

**One idea per frame.** Split heavy lessons across multiple graphics rather than cramming
everything into one.

## Workflow

### 1. Analyze Content

Read the input content. Determine:
- What is the key concept or takeaway?
- Is this a still (reference/showcase) or motion (concept visualization)?
- Which right-column variant fits? (See `references/content-routing.md`)

### 2. Select Right-Column Variant

All compositions use the Editorial wrapper. The left column is always: label, serif
headline, accent line, body text. The right column varies:

**Still variants:**

| Variant | Right Column | Use Case |
|---------|-------------|----------|
| Term List | Term + definition rows with hairline dividers | Vocabulary, command references |
| Pull Quote + Stat | Italic serif quote top, big stat number bottom | Concept explainers, takeaways |
| Numbered List | Ordered rows with monospace numbers | Module overviews, sequences |
| Checklist | Completion items with check/dash indicators | Module wrap-ups, summaries |
| Terminal Block | Code block with subtle border, monospace text | Install steps, CLI demos |

**Motion variants:**

| Variant | Right Column | Use Case |
|---------|-------------|----------|
| Schematic Flow | Icons + arrows animating a process | Git push, build pipeline |
| Schematic Comparison | Before/after or this-vs-that with transition | Terminal vs editor |

### 3. Build Props

Construct the props object for the selected composition. Each composition has its own props
type in its file.

### 4. Write Composition (if custom)

If none of the existing templates fit, create a new composition in
`src/infographics/compositions/` following existing patterns. Use the shared tokens, fonts,
layout components, and animation primitives.

### 5. Render

```bash
cd "$REMOTION_PROJECT"

# Still image
npx remotion still src/infographics/Root.tsx  \
  --output=out/.png \
  --props=''

# Motion graphic (GIF)
npx remotion render src/infographics/Root.tsx  \
  --output=out/.gif \
  --props='' \
  --image-format=png
```

Pass props as JSON via the `--props` flag, including the accent color when it differs from
the default.

### 6. Verify

Check rendered output against the rules in `references/design-tokens.md` (and the project's
`DESIGN-RULES.md` if one exists):

- Content fills 80%+ width, 70%+ height
- Nothing below 24px font size
- Accent on ONE meaningful element only, never on individual letters
- No content overflow or cut-off at the bottom
- Two-column editorial layout maintained
- For motion: smooth looping, no jarring cuts

## Flags

| Flag | Default | Description |
|------|---------|-------------|
| `--type` | `still` | Output type: `still` or `motion` |
| `--theme` | `dark` | Color theme: `dark` or `light` |
| `--duration` | `5s` | Animation duration for motion (3-8s) |
| `--resolution` | `1920x1080` | Output resolution |
| `--accent` | `#0d8aff` | Accent color for the 10% band |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [NulightJens](https://github.com/NulightJens)
- **Source:** [NulightJens/jensai-skills](https://github.com/NulightJens/jensai-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nulightjens-jensai-skills-course-infographics
- Seller: https://agentstack.voostack.com/s/nulightjens
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.