Skip to main content
skill CX Codex

terminal-inserts — Claude Code skill for Remotion terminal inserts

A Remotion skill for terminal scenes: restrained CLI inserts with no neon or glow. It asks for format and background first.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Liamrjohnston/remotion-motion-graphics-skill --skill terminal-inserts -a claude-code
Open on GitHub

What terminal-inserts does

The skill sets the rules for any Remotion scene that shows a terminal: a package install, an agent run log, a command output. Before coding it runs an intake gate and asks you to confirm the format — a 4:3 half-screen Instagram insert or a 9:16 full-screen one — and the background: warm light, clean dark, light grid or dark grid. The terminal window stays charcoal on any surface, so a dark scene happens because you picked dark, not because a terminal is on screen.

Inside there is a hard visual ban: no neon, fluorescent green, electric cyan or purple, no glow, bloom, colored shadows or cyberpunk gradients. Surfaces are flat, borders neutral, and the accent is a single restrained color such as #4F8F6D instead of fluorescent #39FF88. Monospace type is allowed only inside the terminal, with SF Mono, JetBrains Mono, IBM Plex Mono and Berkeley Mono named as options. If glow shows up in a still, the render gets rejected.

Motion runs on useCurrentFrame(), spring() and interpolate(), not CSS animation. Commands type character by character, install rows are prefixed with ◇ and closed with ✓, and the scene ends on a 20–30 frame hold. The skill is meant to be used alongside remotion-best-practices, motion-graphics and cinematic-camera, and it tells you to inspect the approved examples in assets/examples/ before writing code.

What it helps with

  • build a skill-install insert for a repository demo
  • show an agent run log without faking code screenshots
  • make a 9:16 scene with a command readable on a phone
  • keep a terminal scene free of neon and glow
  • check a render for clipping and tiny text before delivery

Example prompts for the agent

  • Make a 9:16 terminal insert with a clean dark background, command codex skills load carousel-qa
  • Build a 4:3 skill install scene on a light grid surface
  • Do an agent run log: command, actions, ending with ✓ diff ready for review

How to install terminal-inserts

1Skills CLI (Vercel)

npx skills add Liamrjohnston/remotion-motion-graphics-skill --skill terminal-inserts -a claude-code

2Manually: put the files in place

~/.claude/skills/terminal-inserts/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/terminal-inserts/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about terminal-inserts

How do I install terminal-inserts in Claude?

Run npx skills add Liamrjohnston/remotion-motion-graphics-skill --skill terminal-inserts -a claude-code. The skill file then lands at ~/.claude/skills/terminal-inserts/SKILL.md.

What does terminal-inserts do?

It sets the rules for Remotion terminal scenes: format, background, typography, CLI row structure and motion. It also bans neon, glow and colored gradients.

What do I need to decide before using it?

The skill requires the intake gate first: confirm the format, 4:3 or 9:16, and the background — warm light, clean dark, light grid or dark grid.

Source text

SKILL.md · MIT
---
name: "terminal-inserts"
description: "Authentic, restrained Remotion terminal inserts with mandatory format/background intake and zero neon or glow."
---

# Terminal Inserts

Use with `remotion-best-practices`, `motion-graphics`, and `cinematic-camera` for Claude Code, Codex, MCP, agents, skills, repository workflows, automation demos, and authentic CLI inserts.

## Mandatory intake

Follow the `motion-graphics` intake gate before coding. If not already specified, ask:

> Which format do you want: 4:3 half-screen Instagram insert or 9:16 full-screen Instagram? And which background: warm light, clean dark, light grid, or dark grid?

The terminal window may remain charcoal on any chosen surface. A terminal object does not force the entire scene to be dark.

## Absolute visual ban

- Zero neon, fluorescent green, electric cyan, electric purple, or multicolor AI palettes.
- Zero glow, bloom, luminous edges, colored shadow, radial color wash, halo, aura, or light spill.
- No glassmorphism, shiny gradients, cyberpunk atmosphere, scanline spectacle, or “hacker movie” styling.
- No cyan-purple gradients or green glow around text, cursors, panels, or ASCII words.
- Use flat ink/charcoal surfaces, neutral borders, neutral shadows, and at most one restrained flat product or ANSI accent.

If any glow or neon appears in a still, reject the render and remove it before delivery.

## Goal and references

Make the idea obvious in under two seconds using an authentic terminal metaphor—not a random code screenshot, checklist UI, dashboard, or generic AI animation.

Inspect the actual approved examples before coding:

- `assets/examples/terminal-install.mp4` — command → large terminal word → authentic CLI lines → success state.
- `assets/examples/outreach-sequence-generator.mp4` — command → status → structured generated output.
- Repository example `examples/kickbacks-spinner-terminals.mp4` — multiple CLI sessions in one connected world.

Use contact sheets in `references/` when available. Continue their typography, density, spacing, and motion, while enforcing the zero-glow rule above.

## Surface and terminal specs

- Match the selected destination exactly.
- 4:3 insert: 1440×1080, 30fps unless the user specifies otherwise.
- 9:16 full-screen: 1080×1920, 30fps unless specified otherwise.
- Terminal: `#101214` / `#15181B`, charcoal title bar, 1px neutral border, neutral black shadow.
- Scene surface comes from the user’s selected warm light, clean dark, light grid, or dark grid option.
- Typography: monospace only inside the terminal. Prefer SF Mono, JetBrains Mono, IBM Plex Mono, or Berkeley Mono fallback.
- Text: warm white and muted gray.
- Accent: one restrained flat product color or subdued terminal green such as `#4F8F6D`; no fluorescent `#39FF88`.
- macOS traffic-light dots are allowed as small authentic chrome, not as a decorative palette.

## Critical authenticity rules

For install/log scenes, use terminal symbols and flowing CLI text—not UI checklist cards:

```txt
~ $ codex skills load carousel-qa

        QA CHECK LOADED

        ( + Welcome to Carousel QA )
┌ installing carousel-qa...
◇ skill added: brand-rules ✓
◇ skill added: slide-fit-checker ✓
◇ skill added: remotion-frame-guard ✓
◇ skill added: export-reviewer

✓ carousel QA skill ready
```

Required:

- Prompt starts with `~ $ ` or a project path plus `$`.
- Command types character-by-character.
- `┌` may open a section.
- `◇` prefixes install/progress rows.
- Completed rows use a trailing `✓`.
- Use plain flowing terminal text, not rounded checklist components.
- Use a blinking `▊` or pipe cursor at the active line.
- A large ASCII/terminal word may fade and scale in using flat text color only—never glow.

Avoid:

- Checkbox UI or separate oversized check icons.
- Emoji and sans-serif UI lists inside the terminal.
- Pills, status chips, dividers, dashboards, or nested card rows for terminal logs.
- Random fake code dumps.
- Dense illegible logs used as decorative texture.

## Perspective and motion

- Build the terminal in the same connected camera world as supporting objects.
- Enter with controlled perspective such as `perspective(...) rotateX(18deg–22deg)` and a slight directional `rotateY`.
- Keep it readable and mostly front-facing; the tilt must feel physical, not warped.
- Use subtle scale/fade and a restrained settle.
- End with a clean 20–30 frame hold.
- Drive motion with `useCurrentFrame()`, `spring()`, and `interpolate()`; no CSS animation.
- Type commands at roughly one frame per character where practical.
- Stagger CLI rows by 6–12 frames and reveal trailing checks after each line.
- Do not add glow pulses, color pulses, scanline flashes, or decorative light sweeps.

## Reusable patterns

### Authentic skill install

1. Terminal enters with controlled perspective.
2. A real-looking command types in.
3. A large flat ASCII/terminal word appears: `LOADED`, `VERIFY`, or `DEPLOY`.
4. CLI rows reveal using `◇ ... ✓`.
5. One concise success line finishes the action.

### Command → generated output

1. Command types in.
2. A restrained flat status line appears.
3. Two or three output objects reveal.
4. Output objects may use cards only because generated structured output is the point; use neutral materials and one restrained accent.

### Agent run / verification log

1. Type a plausible command such as `codex run "fix checkout bug"`.
2. Reveal realistic actions: reading, reproducing, editing, testing.
3. End with `✓ diff ready for review` or another truthful state.

Never invent product capabilities or claim tests passed unless the supplied story requires that exact illustrative state.

## Mobile clarity

- One primary idea per insert.
- The main command, terminal word, or success state must remain readable at phone size.
- 4:3 inserts must be legible when occupying roughly half of a 9:16 frame.
- Tiny logs cannot carry the main message.
- Use no redundant narration text; real commands, filenames, UI strings, and verified output belong on screen.

## First-pass rejection gate

Do not deliver until every answer is “no”:

1. Was format or background left unconfirmed?
2. Is there any neon, glow, radial color wash, fluorescent green, or cyan-purple treatment?
3. Does the terminal look like a checklist, dashboard, glass card, or generic AI template?
4. Is the scene dark only because a terminal exists rather than because the user chose dark?
5. Is essential text unreadable at the destination size?
6. Are CLI structure, product identity, or output claims fake when authentic material exists?
7. Does the result miss the approved examples’ spacing, restraint, and motion quality?

Revise privately until the gate passes.

## QA and delivery

1. Typecheck/build or render the smallest meaningful validation.
2. Render stills for command entry, primary output, and end hold.
3. Compare against the approved terminal examples.
4. Inspect the MP4 for clipping, weak perspective, tiny text, generic filler, any glow/neon, and weak end frames.
5. Deliver the MP4 with dimensions, duration, exact render command, and editor placement note.

© Liamrjohnston · MIT · Liamrjohnston/remotion-motion-graphics-skill

Similar skills

Everything for Design →

From the same set3

Project sponsors

Companies that keep this analytics open
Gold sponsor

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