New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Modern Short Video

by Marve10s in Marve10s/Better-Fullstack

Create modern product launch/pitch videos using Remotion. An agent skill from Marve10s/Better-Fullstack.

MITAuto-check: notesMedia & Creative

Install Modern Short Video

skills CLI
$ npx skills add Marve10s/Better-Fullstack --skill modern-short-video -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Marve10s/Better-Fullstack modern-short-video --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Marve10s/Better-Fullstack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/modern-short-video .claude/skills/modern-short-video && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
modern-short-video
GitHub stars
756
Token cost
~1.8k tokens
SKILL.md length
573 words
Files
8
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Create modern product launch/pitch videos using Remotion. An agent skill from Marve10s/Better-Fullstack.

  • Works in 8 steps: Analyze Product & Select Rich… → Device, Theme & BGM Questions → Collect Screenshots → …
  • Creating app promo videos
  • SKILL.md covers Prerequisites (MANDATORY), Workflow, Scene Structure (8 Scenes) and Design Rules, plus 3 more sections
  • Calls pnpm and bun

What it does

Modern Short Video is an agent skill from Marve10s/Better-Fullstack. Create modern product launch/pitch videos using Remotion. Use when creating app promo videos, SaaS launch videos, product demos, or startup pitch videos.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files (for example `rules/animation-patterns.md`, `rules/bgm.md` and `rules/code-templates.md`).

It sits in Media & Creative, covering Video production and Product launch strategy. It works with Remotion and React. The repository describes itself as: Scaffold production-ready full-stack apps in TypeScript, Rust, Python, Go, and Java with a visual builder and CLI. Choose your frontend, backend, database, auth, AI, payments… The licence is MIT.

When your agent uses it

  • Creating app promo videos
  • SaaS launch videos
  • Startup pitch videos

Example prompts

  • “/modern-short-video”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep, Bash, WebFetch, AskUserQuestion

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Analyze Product & Select Rich Expressions (CRITICAL)
  2. Device, Theme & BGM Questions
  3. Collect Screenshots
  4. Collect Content
  5. Verify Assets
  6. Create Composition
  7. Register & Calculate Duration
  8. Test

What it can do on your machine

Read from SKILL.md and the folder at commit 17e622a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Glob
    • Grep
    • Bash
    • WebFetch
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Modern Short Video loads about 1.8k tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 573 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Glob, Grep, Bash, WebFetch, AskUserQuestion

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Marve10s/Better-Fullstack at commit 17e622a, republished under its MIT licence (© Marve10s). 573 words, ~1,753 tokens.

Download SKILL.mdSave it as .claude/skills/modern-short-video/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
modern-short-video
description
Create modern product launch/pitch videos using Remotion. Use when creating app promo videos, SaaS launch videos, product demos, or startup pitch videos.
allowed-tools
Read, Write, Edit, Glob, Grep, Bash, WebFetch, AskUserQuestion

Modern Short Video Skill

Create professional, modern product launch videos using Remotion and React.

Prerequisites (MANDATORY)

WARNING: Do NOT skip this step. Skipping will result in missing rich expression opportunities.

This skill extends Remotion best practices. You MUST do both:

  1. Load the skill first:

    /remotion-best-practices

  2. Read the SKILL.md of remotion-best-practices and identify which rules are relevant to the product (maps, charts, text animations, 3D, lottie, etc.)

Workflow

Step 1: Analyze Product & Select Rich Expressions (CRITICAL)

Before asking for screenshots, analyze the product and find relevant rich expressions from remotion-best-practices.

Replace static screenshots with dynamic content wherever possible:

  • Map app → animated map with route drawing
  • Dashboard → animated charts
  • Text app → typewriter effects
  • etc.

Read the relevant rule files from remotion-best-practices and use them.

Step 2: Device, Theme & BGM Questions

Use AskUserQuestion to ask:

  1. Device Type: Is the product primarily for smartphone (SP) or PC/Desktop?

    • SP (Smartphone) → Use phone mockup frame
    • PC/Desktop → Use browser/desktop mockup frame

  2. Screenshot Theme: Should screenshots be in Light mode or Dark mode?

    • Dark mode (Recommended) → Blends with video background (#0a0a0a)
    • Light mode → Higher contrast, screenshots stand out more

  3. BGM (Background Music): Add background music?

    • Yes (Recommended) → Download free music from Pixabay
    • No → Create video without BGM
Step 3: Collect Screenshots

Note: Screenshots for scenes using rich expressions (Step 1) are not needed.

Required images (place in public/ folder):

FilePurposeRequired
mockup.pngMain product screenshot (Mockups scene)Yes
feature-1.pngFeature 1 screenshotYes
feature-2.pngFeature 2 screenshotOptional
feature-3.pngFeature 3 screenshotOptional
Step 4: Collect Content

Required information:

  • Product name
  • One-line tagline/concept
  • Feature 1: Title + short description
  • Feature 2: Title + short description (optional)
  • Feature 3: Title + short description (optional)
  • CTA text (e.g., "Try it free")
  • URL
Step 5: Verify Assets
bash
ls public/*.png
Step 6: Create Composition

Create src/remotion/[ProductName]/[ProductName]Intro.tsx with all scenes.

Step 7: Register & Calculate Duration

Add to Root.tsx. IMPORTANT: Calculate durationInFrames correctly:

durationInFrames = Sum of scene durations - (transition duration × number of transitions)

See rules/duration-calculation.md for details.

Step 8: Test

Run pnpm run dev (or bun run remotion) and preview the video.

Scene Structure (8 Scenes)

┌─────────────────────────────────────────────────────────────┐
│  1. REVEAL     2. CONCEPT    3. MOCKUPS                     │
│  (2-3s)        (3-4s)        (3-4s)                         │
│  Logo/Name     Value prop    Product preview                │
├─────────────────────────────────────────────────────────────┤
│  4. FEATURE 1  5. FEATURE 2  6. FEATURE 3                   │
│  (3-4s each)   (optional)    (optional)                     │
│  Screenshot +  Screenshot +  Screenshot +                   │
│  Title/Desc    Title/Desc    Title/Desc                     │
├─────────────────────────────────────────────────────────────┤
│  7. OUTRO      8. CTA                                       │
│  (2-3s)        (3-4s)                                       │
│  Summary       URL + Action                                 │
└─────────────────────────────────────────────────────────────┘
Show full SKILL.md (241 more words)Show less
Scene Details
SceneDurationContentAsset
1. Reveal2-3sProduct name, minimal animation-
2. Concept3-4sTagline, value proposition-
3. Mockups3-4sDevice mockup with main screenshotmockup.png or rich expression
4. Feature 13-4sFeature title + screenshotfeature-1.png or rich expression
5. Feature 23-4sFeature title + screenshotfeature-2.png or rich expression
6. Feature 33-4sFeature title + screenshotfeature-3.png or rich expression
7. Outro2-3sProduct name + summary-
8. CTA3-4sURL, call to action-

Total Duration: 15-25 seconds (depending on feature count)

Design Rules

ElementDoDon't
BackgroundSolid dark #0a0a0aGradients
TypographySingle font (Inter/Noto Sans JP)Multiple fonts
AnimationSubtle fade/slideBouncy/flashy
MockupsReal screenshots or rich expressionsPlaceholder graphics
TextMinimal, clearLong paragraphs

Detailed Guidelines

For comprehensive guidance, read these rule files:

Quick Reference: Scene Components

tsx
// Scene order
<TransitionSeries>
  <RevealScene />      {/* 1. Logo/Name */}
  <ConceptScene />     {/* 2. Value proposition */}
  <MockupsScene />     {/* 3. Main product mockup */}
  <FeatureScene n={1} /> {/* 4. Feature 1 */}
  <FeatureScene n={2} /> {/* 5. Feature 2 (if provided) */}
  <FeatureScene n={3} /> {/* 6. Feature 3 (if provided) */}
  <OutroScene />       {/* 7. Summary */}
  <CTAScene />         {/* 8. Call to action */}
</TransitionSeries>

Checklist Before Delivery

  • Prerequisites loaded (/remotion-best-practices executed and relevant rules read)
  • Rich expressions used where applicable (maps, charts, text animations, etc.)
  • Screenshots collected for scenes not using rich expressions
  • Screenshots are high quality (2x resolution preferred)
  • Text is readable at 720p
  • Total duration 15-25 seconds
  • durationInFrames correctly calculated (subtract transition overlaps!)
  • No black frames at the end of video
  • Transitions are smooth (fade, 15 frames)
  • CTA and URL clearly visible
  • BGM added (optional, volume ~0.25)

© Marve10s, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files in .agents/skills/modern-short-video of Marve10s/Better-Fullstack.

  • SKILL.md
  • rules/animation-patterns.md
  • rules/bgm.md
  • rules/code-templates.md
  • rules/design-principles.md
  • rules/duration-calculation.md
  • rules/scene-structure.md
  • rules/visual-elements.md

Open the folder on GitHubat commit 17e622a

Compare with similar skills

Modern Short Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Modern Short Video compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Modern Short Video this skillMarve10s/Better-Fullstack756—~1.8kAutomated safety check: NotesMIT
Remotion Best Practiceslyonjs/shortvid.io14733 repos~1kAutomated safety check: PassMIT
Remotion to HyperFrames Porterheygen-com/hyperframes60k3 repos~2.8kAutomated safety check: PassApache-2.0
Anything2explainerVincentwei1021/anything2explainer2.4k—~2.7kAutomated safety check: PassCustom licence
Remotion Motion Graphicshaidrrrry/claude-remotion-skill340—~2kAutomated safety check: PassMIT
Product DemoAlexwtlf/agentic-product-demo387—~8.8kAutomated safety check: PassCustom licence

Similar skills

  • Remotion Best Practices

    lyonjs/shortvid.io

    Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.

    147 GitHub starsUsed in 33 repos~1k tokens
    Media & CreativeAuto-check passed

  • Remotion to HyperFrames Porter

    heygen-com/hyperframes

    Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.

    60k GitHub starsUsed in 3 repos~2.8k tokens
    Media & CreativeAuto-check passed

  • Anything2explainer

    Vincentwei1021/anything2explainer

    给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。Turn any topic into a narrated…

    2.4k GitHub stars~2.7k tokensUpdated 23 days ago
    Media & CreativeAuto-check passed

  • Remotion Motion Graphics

    haidrrrry/claude-remotion-skill

    Create and edit professional motion graphics videos with Remotion (React-based video).

    340 GitHub stars~2k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Product Demo

    Alexwtlf/agentic-product-demo

    Shoot, animate, title and optionally score product demo videos with Remotion — for a landing page, docs, onboarding, an app store listing or a social post.

    387 GitHub stars~8.8k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Remotion To Hyperframes

    chmonitor/chmonitor

    Port an existing Remotion (React) composition to HyperFrames HTML.

    301 GitHub starsUsed in 1 repo~2.5k tokens
    Media & CreativeAuto-check passed

More from Marve10s/Better-Fullstack

All 8 skills in this repo

  • Remotion Bits

    Marve10s/Better-Fullstack

    Animation components and utilities for Remotion video projects.

    756 GitHub starsUsed in 1 repo~8.2k tokens
    Auto-check passed

  • Create Remotion Geist

    Marve10s/Better-Fullstack

    Create Remotion videos using the Geist design system aesthetic.

    756 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Better Fullstack

    Marve10s/Better-Fullstack

    Scaffold, plan, or extend Better Fullstack projects with the generator, CLI, or MCP server.

    756 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Remotion Animation

    Marve10s/Better-Fullstack

    Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic.

    756 GitHub stars~3.2k tokensUpdated today
    Auto-check passed

  • Add To Project

    Marve10s/Better-Fullstack

    Add capabilities, addons, deployment targets, generated CI, services, or stack updates to an existing Better Fullstack project.

    756 GitHub stars~507 tokensUpdated today
    Auto-check passed

  • Scaffold Project

    Marve10s/Better-Fullstack

    Scaffold a new app, API, backend, fullstack project, mobile app, polyglot service, monorepo, or starter with Better Fullstack.

    756 GitHub stars~716 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Modern Short Video

What does Modern Short Video do?

Create modern product launch/pitch videos using Remotion. An agent skill from Marve10s/Better-Fullstack. Modern Short Video is an agent skill from Marve10s/Better-Fullstack. Create modern product launch/pitch videos using Remotion.

When should I use Modern Short Video?

Modern Short Video fits situations like: creating app promo videos; saaS launch videos; startup pitch videos.

How do I install Modern Short Video in Claude Code?

Run `npx skills add Marve10s/Better-Fullstack --skill modern-short-video -a claude-code`. Or copy the skill folder (.agents/skills/modern-short-video in Marve10s/Better-Fullstack) into .claude/skills/modern-short-video in your project. Claude Code loads it when a task matches its description.

How do I install Modern Short Video in Codex?

Run `npx skills add Marve10s/Better-Fullstack --skill modern-short-video -a codex`. Or copy the skill folder (.agents/skills/modern-short-video in Marve10s/Better-Fullstack) into .agents/skills/modern-short-video in your project. Codex loads it when a task matches its description.

Can I use Modern Short Video in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Marve10s/Better-Fullstack --skill modern-short-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/modern-short-video, .gemini/skills/modern-short-video, .github/skills/modern-short-video and .opencode/skills/modern-short-video in your project.

What does Modern Short Video need to run?

Going by SKILL.md and its folder, Modern Short Video needs the command-line tools its instructions call (pnpm and bun). Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep, Bash, WebFetch, AskUserQuestion.

Does Modern Short Video access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Modern Short Video safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Modern Short Video use?

Modern Short Video is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Modern Short Video use?

About 1.8k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Modern Short Video?

Skills that share tags, products or a category with Modern Short Video: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), Remotion to HyperFrames Porter (heygen-com/hyperframes, 60k stars), Anything2explainer (Vincentwei1021/anything2explainer, 2.4k stars) and Remotion Motion Graphics (haidrrrry/claude-remotion-skill, 340 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Modern Short Video?

Marve10s (a GitHub user) maintains it in Marve10s/Better-Fullstack, which has 756 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 10, 2026.

Source: Marve10s/Better-Fullstack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.