dsh-remotion 0.2.0 → 0.3.0

package/README.en.md

@@ -1,14 +1,16 @@
 [中文](README.md)
 
+![npm](https://img.shields.io/npm/v/dsh-remotion) ![downloads](https://img.shields.io/npm/dm/dsh-remotion) ![license](https://img.shields.io/github/license/STARDUSTLC666/dsh-remotion) ![stars](https://img.shields.io/github/stars/STARDUSTLC666/dsh-remotion?style=social)
+
 # dsh-remotion
 
 [![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com)
 
-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).
+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; synced with the official Remotion v4.0.519 twelve-skill structure).
 
 ## Compatibility
 
-Verified against `@deepseek-ai/dsh@0.1.1-rc.2` on 2026-08-26. Built for the cordis patch-bundle plugin model (`cordis.patch.yml` + `dsh.bundle.patch`). No runtime imports of `@deepseek-ai/*` internals.
+Verified against `@deepseek-ai/dsh@0.1.2-alpha.2` on 2026-08-31. Built for the cordis patch-bundle plugin model (`cordis.patch.yml` + `dsh.bundle.patch`). No runtime imports of `@deepseek-ai/*` internals.
 
 ## Installation
 
@@ -29,7 +31,7 @@ Then restart the web service. To clean up fully, also remove the plugin entry fr
 
 ## Contents
 
-- **remotion**: Remotion best practices plus `rules/` with 38 rule files (animation/audio/captions/3D/charts/fonts/GIFs/Lottie/maps/transitions...)
+- **remotion-best-practices** (router hub) + 11 domain skills (captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade), synced from official Remotion v4.0.519
 
 ## Requirements
 
@@ -37,7 +39,7 @@ Node.js ≥ 20 + npx (npm registry); rendering needs ffmpeg (guided by the skill
 
 ## 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.
+Synced from the official `remotion-dev/remotion` packages/skills (v4.0.519, 2026-08-31): hub symlinks materialized as real directories for cross-platform resolution.
 
 ## Multi-harness
 
@@ -55,4 +57,4 @@ Port once, use everywhere.
 
 ## License
 
-MIT for the porting arrangement; skill content copyright remains with Remotion.
+MIT for the porting arrangement; skill content copyright remains with Remotion.

package/README.md

@@ -9,11 +9,11 @@
 [![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com)
 
 
-DSH（DeepSeek Harness）视频创作技能插件：**安装即把 Remotion 官方移植技能注册进 DSH**（React 编程式视频：动画、音频、字幕、3D、图表、字体等，38 个规则文件）。
+DSH（DeepSeek Harness）视频创作技能插件：**安装即把 Remotion 官方移植技能注册进 DSH**（React 编程式视频：动画、音频、字幕、3D、图表、字体等；同步 Remotion 官方 v4.0.519 的 12 技能结构）。
 
 ## 兼容性
 
-在 `@deepseek-ai/dsh@0.1.1-rc.2` 上验证（2026-08-26）。遵循 cordis 组合包补丁模型（`cordis.patch.yml` + `dsh.bundle.patch`），运行时不 import 任何 `@deepseek-ai/*` 内部模块。
+在 `@deepseek-ai/dsh@0.1.2-alpha.2` 上验证（2026-08-31）。遵循 cordis 组合包补丁模型（`cordis.patch.yml` + `dsh.bundle.patch`），运行时不 import 任何 `@deepseek-ai/*` 内部模块。
 
 ## 安装
 
@@ -34,7 +34,7 @@ dsh plugin --profile web remove dsh-remotion
 
 ## 技能内容
 
-- **remotion**：Remotion 最佳实践 + `rules/` 38 个规则文件（动画/音频/字幕/3D/图表/字体/GIF/Lottie/地图/转场…）
+- **remotion-best-practices**（总纲路由）+ 11 个领域技能（captions/create/docs/interactivity/maps/markup/multimedia/render/saas/studio/upgrade），同步自 Remotion 官方 v4.0.519
 
 ## 依赖
 

package/lib/index.d.ts

@@ -22,8 +22,8 @@ export interface SkillsPluginContext {
     };
     on?(event: string, listener: () => void): () => void;
 }
-/** 随包分发的技能清单。 */
-export declare const SKILL_NAMES: readonly ["remotion"];
+/** 随包分发的技能清单（Remotion 官方 v4.0.519：总纲路由 + 11 个领域技能）。 */
+export declare const SKILL_NAMES: readonly ["remotion-best-practices", "remotion-captions", "remotion-create", "remotion-docs", "remotion-interactivity", "remotion-maps", "remotion-markup", "remotion-multimedia", "remotion-render", "remotion-saas", "remotion-studio", "remotion-upgrade"];
 /** 打包技能目录的绝对路径。 */
 export declare function bundledSkillsDir(): string;
 /** 检查随包技能资源完整性：每个技能的 SKILL.md 是否存在。 */

package/lib/index.js

@@ -13,8 +13,21 @@ import YAML from 'yaml';
 /** cordis 服务注入：apply 里要用 ctx.skills，必须显式声明。 */
 export const name = 'remotion-skills';
 export const inject = ['skills', 'tools'];
-/** 随包分发的技能清单。 */
-export const SKILL_NAMES = ["remotion"];
+/** 随包分发的技能清单（Remotion 官方 v4.0.519：总纲路由 + 11 个领域技能）。 */
+export const SKILL_NAMES = [
+    "remotion-best-practices",
+    "remotion-captions",
+    "remotion-create",
+    "remotion-docs",
+    "remotion-interactivity",
+    "remotion-maps",
+    "remotion-markup",
+    "remotion-multimedia",
+    "remotion-render",
+    "remotion-saas",
+    "remotion-studio",
+    "remotion-upgrade",
+];
 /** 打包技能目录的绝对路径。 */
 export function bundledSkillsDir() {
     return fileURLToPath(new URL('../skills/', import.meta.url));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remotion",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "DSH 视频创作技能插件：注册 Remotion 官方移植技能（React 编程式视频：动画/音频/字幕/3D/图表/字体，38 个规则文件），安装即用。",
   "type": "module",
   "main": "lib/index.js",

package/skills/remotion-best-practices/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: remotion-best-practices
+description: Router for all Remotion skills
+version: 4.0.519
+---
+
+## Preserve user changes
+
+Users may make edits in the code outside of the conversation.
+
+If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.
+
+## Creating a video
+
+If the user asks to make, create, or build a new video or composition, load [Create a new Remotion video](./remotion-create/SKILL.md), whether or not a Remotion project already exists.
+
+## New project setup
+
+If no Remotion project currently exists, load [Create a new Remotion project](./remotion-create/SKILL.md)
+
+## React Markup Best Practices
+
+If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/SKILL.md)
+
+## Maps
+
+For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/SKILL.md).
+
+## Multimedia
+
+For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/SKILL.md)
+
+## Improving Interactivity
+
+By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](./remotion-interactivity/SKILL.md)
+
+## Rendering
+
+For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/SKILL.md)
+
+## Opening Remotion Studio
+
+To launch a project in Remotion Studio, open its exact local URL, or configure Studio CLI flags, load [Remotion Studio](./remotion-studio/SKILL.md).
+
+## Captions
+
+When working with Captions, load [Remotion Captions](./remotion-captions/SKILL.md).
+
+## Creating a SaaS, automation or application
+
+Use the [Remotion SaaS skill](./remotion-saas/SKILL.md) for knowledge about Remotion-powered SaaS apps, such as `<Player>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.
+
+## Looking up Remotion APIs and documentation
+
+To find and read current Remotion documentation, load [Remotion Docs](./remotion-docs/SKILL.md).
+
+## Upgrading
+
+To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/SKILL.md).

package/skills/remotion-best-practices/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-best-practices'
+  short_description: 'Route Remotion tasks to the right workflow'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-best-practices: Make a promo video for my product'

package/skills/remotion-best-practices/remotion-captions/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: remotion-captions
+description: Transcribing, displaying and animating captions
+version: 4.0.519
+---
+
+All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:
+
+```ts
+import type { Caption } from "@remotion/captions";
+```
+
+This is the definition:
+
+```ts
+type Caption = {
+  text: string;
+  startMs: number;
+  endMs: number;
+  timestampMs: number | null;
+  confidence: number | null;
+  pageBreakAfter?: boolean;
+};
+```
+
+## Generating captions
+
+To transcribe video and audio files to generate captions, load the [transcribe-captions.md](transcribe-captions.md) file for more instructions.
+
+## Displaying captions
+
+To display captions in your video, load the [display-captions.md](display-captions.md) file for more instructions.
+
+## Importing captions
+
+To import captions from a .srt file, load the [import-srt-captions.md](import-srt-captions.md) file for more instructions.

package/skills/remotion-best-practices/remotion-captions/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-captions'
+  short_description: 'Transcribe, display, and animate captions'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-captions: Transcribe my video and display captions'

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/display-captions.md

@@ -54,7 +54,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Render captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 
@@ -80,6 +84,8 @@ const { pages } = useMemo(() => {
 }, [captions]);
 ```
 
+If a caption has `pageBreakAfter: true`, the current page ends after that caption and the next caption starts a new page.
+
 ## Rendering with Sequences
 
 Map over the pages and render each one in a `<Sequence>`. Calculate the start frame and duration from the page timing:
@@ -152,13 +158,13 @@ const CaptionPage: React.FC<{ page: TikTokPage }> = ({ page }) => {
   return (
     <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
       <div style={{ fontSize: 80, fontWeight: "bold", whiteSpace: "pre" }}>
-        {page.tokens.map((token) => {
+        {page.tokens.map((token, tokenIndex) => {
           const isActive =
             token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
 
           return (
             <span
-              key={token.fromMs}
+              key={`${token.fromMs}-${tokenIndex}`}
               style={{ color: isActive ? HIGHLIGHT_COLOR : "white" }}
             >
               {token.text}

package/skills/{remotion/rules → remotion-best-practices/remotion-captions}/import-srt-captions.md

@@ -58,7 +58,11 @@ export const MyComponent: React.FC = () => {
     return null;
   }
 
-  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
+  return (
+    <AbsoluteFill>
+      {/* Use captions here */}
+    </AbsoluteFill>
+  );
 };
 ```
 

package/skills/remotion-best-practices/remotion-create/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: remotion-create
+description: Create a new Remotion video
+version: 4.0.519
+---
+
+These are instructions for making a new Remotion project and composition.  
+If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
+
+## Scaffold a project
+
+If a project already exists, skip this.
+Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
+
+Scaffold one using:
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+cd my-video
+npm i
+```
+
+Replace `my-video` with a suitable project name.
+
+## Designing a video
+
+Keep the scaffold and add React Markup.
+Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
+
+## Is this a multi-scene video?
+
+If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).
+
+## Interactivity Best Practices
+
+By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
+
+## TailwindCSS
+
+If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
+
+## Open the preview
+
+Start the preview server after building the composition:
+
+```bash
+npx remotion studio --no-open
+```
+
+This will start a long-running process and print the server URL for the preview.  
+If the server is already started, it will print the URL.
+If an in-harness browser is available, open it there.
+You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.
+
+## Render the video
+
+Only render if the user explicitly asks for it.
+
+```
+npx remotion render
+```
+
+For more options, see [Rendering](../remotion-render/SKILL.md).
+
+## Follow-up
+
+The video creation process has finished.
+For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)

package/skills/remotion-best-practices/remotion-create/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-create'
+  short_description: 'Create a new Remotion video project'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

package/skills/{remotion/rules → remotion-best-practices/remotion-create}/tailwind.md

@@ -8,4 +8,4 @@ You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in t
 
 Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
 
-Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.
+Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

package/skills/remotion-best-practices/remotion-create/video-layout.md

@@ -0,0 +1,9 @@
+You are designing a video, not a webpage.
+
+- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
+- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
+- Do not add redundant elements.
+- For 1080px-wide compositions, use these rough minimums:
+  - Main headline: 84px
+  - Important supporting text: 44px
+- Scale those values with the composition width.

package/skills/remotion-best-practices/remotion-docs/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: remotion-docs
+description: Search Remotion documentation
+version: 4.0.519
+---
+
+This skill teaches you how to discover and read current Remotion documentation.
+If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
+
+## Searching the docs
+
+Use the Algolia search API to find relevant documentation pages:
+
+```
+POST https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries?x-algolia-api-key=3e42dbd4f895fe93ff5cf40d860c4a85&x-algolia-application-id=PLSDUOL1CA
+Content-Type: application/x-www-form-urlencoded
+
+{
+  "requests": [
+    {
+      "query": "<your search query>",
+      "indexName": "remotion",
+      "params": "attributesToRetrieve=[\"hierarchy.lvl0\",\"hierarchy.lvl1\",\"hierarchy.lvl2\",\"url\"]&hitsPerPage=10"
+    }
+  ]
+}
+```
+
+Each hit contains a `url` field pointing to the documentation page.
+
+## Fetching a page as Markdown
+
+Append `.md` to any Remotion docs URL to retrieve its Markdown source (saves tokens):
+
+```
+https://www.remotion.dev/docs/use-video-config.md
+https://www.remotion.dev/docs/sequence.md
+https://www.remotion.dev/docs/lambda/rendermediaonlambda.md
+```
+
+## Workflow
+
+1. Search Algolia for the concept or API you need.
+2. Pick the most relevant URL(s) from the results.
+3. Fetch each URL with the `.md` suffix.
+4. Implement using the current documentation rather than memorized API knowledge.

package/skills/remotion-best-practices/remotion-docs/agents/openai.yaml

@@ -0,0 +1,7 @@
+interface:
+  display_name: '/remotion-docs'
+  short_description: 'Search current Remotion documentation'
+  icon_small: './assets/remotion-icon.png'
+  icon_large: './assets/remotion-icon.png'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'