dsh-remotion 0.1.0

package/README.en.md

@@ -0,0 +1,29 @@
+[中文](README.md)
+
+# dsh-remotion
+
+DSH (DeepSeek Harness) video-creation skill plugin: installing it registers the official Remotion skill into DSH (programmatic video with React: animation, audio, captions, 3D, charts, fonts, and 38 rule files).
+
+## Installation
+
+```bash
+dsh plugin --profile web add dsh-remotion
+```
+
+After restarting, say "make a video with Remotion" to trigger it.
+
+## Contents
+
+- **remotion**: Remotion best practices plus `rules/` with 38 rule files (animation/audio/captions/3D/charts/fonts/GIFs/Lottie/maps/transitions...)
+
+## Requirements
+
+Node.js ≥ 20 + npx (npm registry); rendering needs ffmpeg (guided by the skill itself).
+
+## Porting notes
+
+Ported from the official OpenAI Codex Remotion plugin cache: frontmatter converted to the DSH format, Codex-only `agents/` stripped, and rule references verified.
+
+## License
+
+MIT for the porting arrangement; skill content copyright remains with Remotion.

package/README.md

@@ -0,0 +1,29 @@
+[English](README.en.md)
+
+# dsh-remotion
+
+DSH（DeepSeek Harness）视频创作技能插件：**安装即把 Remotion 官方移植技能注册进 DSH**（React 编程式视频：动画、音频、字幕、3D、图表、字体等，38 个规则文件）。
+
+## 安装
+
+```bash
+dsh plugin --profile web add dsh-remotion
+```
+
+重启后说「用 Remotion 做个视频」即可触发。
+
+## 技能内容
+
+- **remotion**：Remotion 最佳实践 + `rules/` 38 个规则文件（动画/音频/字幕/3D/图表/字体/GIF/Lottie/地图/转场…）
+
+## 依赖
+
+Node.js ≥ 20 + npx（npm registry）；渲染需 ffmpeg（Remotion 自带指引）。
+
+## 移植说明
+
+技能移植自 OpenAI Codex 官方 Remotion 插件缓存：frontmatter 已转换为 DSH 格式，codex 专属 `agents/` 已剔除，规则引用逐一校验。
+
+## License
+
+MIT（移植编排）；技能内容版权归 Remotion。

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+# dsh-remotion 组合包补丁：把Remotion 技能插件行插入 profile。
+# 插件加载即把技能注册进 ctx.skills（技能目录实时可见），无需配置。
+#
+- insert:
+    - id: remotion-skills
+      name: 'dsh-remotion'
+      config: {}

package/lib/index.d.ts

@@ -0,0 +1,35 @@
+/** cordis 服务注入：apply 里要用 ctx.skills，必须显式声明。 */
+export declare const inject: string[];
+/** 技能注册定义（最小面）。 */
+export interface SkillRegistration {
+    name: string;
+    description: string;
+    content: string;
+    resourceBase: {
+        kind: 'directory';
+        path: string;
+    };
+    source?: string;
+}
+/** 插件所需的最小 ctx 面。 */
+export interface SkillsPluginContext {
+    skills: {
+        register(definition: SkillRegistration): () => void;
+    };
+    on?(event: string, listener: () => void): () => void;
+}
+/** 随包分发的技能清单。 */
+export declare const SKILL_NAMES: readonly ["remotion"];
+/** 打包技能目录的绝对路径。 */
+export declare function bundledSkillsDir(): string;
+/** 拆分 SKILL.md 的 frontmatter 与正文。 */
+export declare function parseSkillFile(text: string): {
+    name: string;
+    description: string;
+    content: string;
+};
+/**
+ * 插件入口：把技能注册进技能注册表。
+ * 单个技能文件缺失只告警，不影响其余技能与宿主启动。
+ */
+export declare function apply(ctx: SkillsPluginContext): void;

package/lib/index.js

@@ -0,0 +1,74 @@
+/**
+ * dsh-remotion —— Remotion 视频创作技能插件：加载即把技能注册进 ctx.skills。
+ *
+ * 技能正文与资源随包分发（skills/ 目录），resourceBase 指向打包目录，
+ * 技能正文里的相对引用（rules/、references/ 等）由技能加载器解析。
+ *
+ * @module dsh-remotion
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+import YAML from 'yaml';
+/** cordis 服务注入：apply 里要用 ctx.skills，必须显式声明。 */
+export const inject = ['skills'];
+/** 随包分发的技能清单。 */
+export const SKILL_NAMES = ["remotion"];
+/** 打包技能目录的绝对路径。 */
+export function bundledSkillsDir() {
+    return fileURLToPath(new URL('../skills/', import.meta.url));
+}
+/** 拆分 SKILL.md 的 frontmatter 与正文。 */
+export function parseSkillFile(text) {
+    const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text);
+    if (!match)
+        return { name: '', description: '', content: text };
+    let name = '';
+    let description = '';
+    try {
+        const parsed = YAML.parse(match[1]);
+        if (typeof parsed === 'object' && parsed !== null) {
+            const record = parsed;
+            if (typeof record.name === 'string')
+                name = record.name;
+            if (typeof record.description === 'string')
+                description = record.description;
+        }
+    }
+    catch { /* 保留空值，由调用方处理 */ }
+    return { name, description, content: text.slice(match[0].length).trimStart() };
+}
+/**
+ * 插件入口：把技能注册进技能注册表。
+ * 单个技能文件缺失只告警，不影响其余技能与宿主启动。
+ */
+export function apply(ctx) {
+    const disposers = [];
+    for (const skillName of SKILL_NAMES) {
+        try {
+            const dir = join(bundledSkillsDir(), skillName);
+            const text = readFileSync(join(dir, 'SKILL.md'), 'utf8');
+            const parsed = parseSkillFile(text);
+            if (parsed.name === '' || parsed.description === '' || parsed.content === '') {
+                console.warn('[dsh-remotion] 技能 ' + skillName + ' 的 frontmatter 不完整，已跳过。');
+                continue;
+            }
+            disposers.push(ctx.skills.register({
+                name: parsed.name,
+                description: parsed.description,
+                content: parsed.content,
+                resourceBase: { kind: 'directory', path: dir },
+                source: 'runtime',
+            }));
+        }
+        catch (error) {
+            console.warn('[dsh-remotion] 技能 ' + skillName + ' 加载失败：' + (error instanceof Error ? error.message : String(error)));
+        }
+    }
+    if (typeof ctx.on === 'function') {
+        ctx.on('dispose', () => {
+            for (const dispose of disposers)
+                dispose();
+        });
+    }
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "dsh-remotion",
+  "version": "0.1.0",
+  "description": "DSH 视频创作技能插件：注册 Remotion 官方移植技能（React 编程式视频：动画/音频/字幕/3D/图表/字体，38 个规则文件），安装即用。",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "skills",
+    "cordis.patch.yml",
+    "README.md",
+    "README.en.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm run build && node --test \"test/*.test.mjs\"",
+    "prepublishOnly": "pnpm run build"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    }
+  },
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "plugin",
+    "skills",
+    "video"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "yaml": "^2.9.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^5.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/STARDUSTLC666/dsh-remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/STARDUSTLC666/dsh-remotion/issues"
+  },
+  "homepage": "https://github.com/STARDUSTLC666/dsh-remotion#readme",
+  "author": "stardustlc",
+  "packageManager": "pnpm@11.7.0"
+}

package/skills/remotion/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: remotion
+description: "Remotion video creation best practices: build programmatic videos with React (animations, audio, captions, subtitles, 3D, charts, fonts, GIFs, Lottie, maps, transitions, text effects). Use when the user asks to create, edit, or render a video with Remotion, scaffold a Remotion project (npx create-video), add captions or audio, or debug Remotion code. 38 rule files under rules/ cover specific domains and should be loaded on demand. 中文：用 Remotion（React 编程式视频）新建项目、写/改合成、渲染视频、加字幕/音频时使用。"
+compatibility: Requires Node.js >= 20 with npx and network access to install Remotion packages from the npm registry.
+allowed-tools: Bash
+---
+
+## When to use
+
+Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
+
+## New project setup
+
+When in an empty folder or workspace with no existing Remotion project, scaffold one using:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+```
+
+Replace `my-video` with a suitable project name.
+
+## Starting preview
+
+Start the Remotion Studio to preview a video:
+
+```bash
+npx remotion studio
+```
+
+## Optional: one-frame render check
+
+You can render a single frame with the CLI to sanity-check layout, colors, or timing.  
+Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
+
+```bash
+npx remotion still [composition-id] --scale=0.25 --frame=30
+```
+
+At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).
+
+## Captions
+
+When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
+
+## Using FFmpeg
+
+For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
+
+## Silence detection
+
+When needing to detect and trim silent segments from video or audio files, load the [./rules/silence-detection.md](./rules/silence-detection.md) file.
+
+## Audio visualization
+
+When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
+
+## Sound effects
+
+When needing to use sound effects, load the [./rules/sfx.md](./rules/sfx.md) file for more information.
+
+## How to use
+
+Read individual rule files for detailed explanations and code examples:
+
+- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
+- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
+- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
+- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
+- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
+- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
+- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
+- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
+- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
+- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
+- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
+- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
+- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
+- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
+- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
+- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks
+- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
+- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
+- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
+- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
+- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
+- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
+- [rules/timing.md](rules/timing.md) - Timing with interpolate and Bézier easing, springs
+- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
+- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
+- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
+- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
+- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it
+- [rules/silence-detection.md](rules/silence-detection.md) - Adaptive silence detection using FFmpeg loudnorm and silencedetect
+- [rules/voiceover.md](rules/voiceover.md) - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS

package/skills/remotion/rules/3d.md

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>;
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>;
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>;
+```

package/skills/remotion/rules/animations.md

@@ -0,0 +1,31 @@
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.  
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+For eased motion, prefer `interpolate` with explicit frame ranges and an easing—especially `Easing.bezier`, which matches CSS `cubic-bezier` so timing can be shared with web specs and curve editors. See [timing](./timing.md).
+
+```tsx
+import { useCurrentFrame, Easing } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+  });
+
+  return <div style={{ opacity }}>Hello World!</div>;
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.

package/skills/remotion/rules/assets.md

@@ -0,0 +1,78 @@
+---
+name: assets
+description: Importing images, videos, audio, and fonts into Remotion
+metadata:
+  tags: assets, staticFile, images, fonts, public
+---
+
+# Importing assets in Remotion
+
+## The public folder
+
+Place assets in the `public/` folder at your project root.
+
+## Using staticFile()
+
+You MUST use `staticFile()` to reference files from the `public/` folder:
+
+```tsx
+import { Img, staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Img src={staticFile("logo.png")} />;
+};
+```
+
+The function returns an encoded URL that works correctly when deploying to subdirectories.
+
+## Using with components
+
+**Images:**
+
+```tsx
+import { Img, staticFile } from "remotion";
+
+<Img src={staticFile("photo.png")} />;
+```
+
+**Videos:**
+
+```tsx
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
+
+<Video src={staticFile("clip.mp4")} />;
+```
+
+**Audio:**
+
+```tsx
+import { Audio } from "@remotion/media";
+import { staticFile } from "remotion";
+
+<Audio src={staticFile("music.mp3")} />;
+```
+
+**Fonts:**
+
+```tsx
+import { staticFile } from "remotion";
+
+const fontFamily = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
+await fontFamily.load();
+document.fonts.add(fontFamily);
+```
+
+## Remote URLs
+
+Remote URLs can be used directly without `staticFile()`:
+
+```tsx
+<Img src="https://example.com/image.png" />
+<Video src="https://remotion.media/video.mp4" />
+```
+
+## Important notes
+
+- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
+- Special characters in filenames (`#`, `?`, `&`) are automatically encoded