本文へ移動
cccskills
無料GitHub で公開

claude-typer

Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md4.0 KB
  • agents/openai.yaml181 B
  • scripts/render_claude_typer.py11.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Claude Typer

Workflow

  1. Extract the text that should be typed in the animation as prompt.
  2. Run:
    • skill_dir=""
      for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
        if [ -d "$base/skills/claude-typer" ]; then
          skill_dir="$base/skills/claude-typer"
          break
        fi
      done
      [ -n "$skill_dir" ] || { echo "claude-typer skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }
      /usr/local/bin/python3 "$skill_dir/scripts/render_claude_typer.py" "<prompt>"
      
    • Example with explicit size and scale:
      /usr/local/bin/python3 "$skill_dir/scripts/render_claude_typer.py" \
        "claude-typer skill可以让智能体做出提示词打字机动效视频,快来试试吧" \
        --video-width 1080 \
        --video-height 600 \
        --claude-width 600 \
        --scale 2
      
    • Example matching custom runner + remotion params passthrough:
      /usr/local/bin/python3 "$skill_dir/scripts/render_claude_typer.py" \
        "vibe-motion/skills:一个面向智能体的MG动画/视频技能仓库." \
        --runner-prefix "npx -y -p @remotion/cli@4.0.440 -p @remotion/tailwind-v4@4.0.440 remotion" \
        --composition Typer30fps \
        --output-file Typer30fps.mov \
        --codec prores \
        --prores-profile 4444 \
        --pixel-format yuva444p10le \
        --image-format png \
        --audio-codec aac \
        --video-width 1080 \
        --video-height 1080 \
        --claude-width 880
      
  3. Return the generated video path in the current working directory.

Rendering Behavior

  • Render remote composition Typer30fps from https://www.laosunwendao.com.
  • Use @remotion/cli (not remotion package name).
  • Prefer bunx @remotion/cli first.
  • Fall back to npx -y -p @remotion/cli@4.0.440 -p @remotion/tailwind-v4@4.0.440 remotion if bunx is unavailable.
  • Keep transparent MOV defaults:
    • --fps=30
    • --codec=prores
    • --prores-profile=4444
    • --pixel-format=yuva444p10le
    • --image-format=png
    • --scale=2
  • Keep defaults for stability:
    • --timeout=300000
    • --concurrency=1
    • Auto-detect local Chrome/Chromium and pass --browser-executable when found.
  • Keep default props from the project; replace prompt, and allow overriding videoWidth / videoHeight / claudeWidth through script args.
  • Unknown CLI args are passed through to remotion render directly (for advanced flags).
  • --runner-prefix lets you fully control the runner command (for pinned versions, global resolution behavior, etc.).
  • Exposed Remotion props for this skill are scalar fields only: prompt, typingSpeedMs, model, videoWidth, videoHeight, claudeWidth, tiltStartX, tiltStartY, tiltEndX, tiltEndY, tiltDurationRatio.

Output File Naming

  • Save into the current directory as xxx.mov.
  • Build xxx by condensing the prompt:
    • Remove common request wrappers like 帮我, 请, 做一个, 生成一个, 制作, 创建 at the start.
    • Remove illegal filename characters.
    • Keep Chinese/English letters and digits.
    • If result is empty, use claude-typer.
  • Example:
    • Prompt: 帮我做一个web画板
    • Output: web画板.mov

Notes

  • On a clean machine, Node.js + npx is enough for this fallback path, as long as network access to npm and https://www.laosunwendao.com is available.
  • If both bunx and npx are unavailable, install one of them and retry.
  • If the output name already exists, Remotion overwrite behavior applies.
  • If you hit delayRender() timeout, keep --concurrency=1 and raise --timeout-ms as needed.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV. Use when users ask for 3D 克拉尼, 克拉尼粒子动画, Chladni motion, sound-reactive sand or cosmic-web visuals, audio-to-motion, music visualizer video, or rendering Dynamic Sand, Modal Sand, Cosmic Web, or Dynamic Cosmic.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery. Use for launch films, website motion videos, AI/SaaS demos, product promos, and Vibe Motion/Remotion productions that require exact logos, authentic imagery, English-first copy, product-feature storytelling, strong visual impact, smooth transitions, and deterministic frame-based animation.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

colorize

無料

Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦). The frame starts monochrome and spun, color sweeps in from the left under a horizontal motion blur, and the spin settles from the center outward into a softly glowing full-color frame. Use when users ask for 上色效果, 黑白变彩色, 丁达尔旋焦, 旋焦上色, 剪映上色特效, color reveal, colorize transition, or want this effect on images, iPhone Live Photos (HEIC/JPG + MOV), Android motion photos, or video clips. Outputs H.264 MP4.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

制作屏摄风格的鱼眼畸变效果与聚焦动画:桶形鱼眼畸变 + 细扫描线/摩尔纹干涉 + 四周暗角, 可对任意图片/视频做「推镜聚焦到某处 + 黄色标注块滑入」的 Remotion 视频输出。 核心是 clone https://github.com/vibe-motion/fisheye-motion 项目并按需改参数渲染。 触发词:鱼眼、fisheye、屏摄、摩尔纹、moire、扫描线、CRT、暗角、vignette、 聚焦推镜、高亮标注动画、screen-photo effect。

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

vibe-motion のスキルをすべて見る

このスキルの問題を報告する