dsh-remotion 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 [返回简介](README.md) · [使用说明](docs/USAGE.md) · [验证记录](docs/VALIDATION.md)
 
+## 0.6.0（2026-10-17）
+
+- 设置面板顶部新增「首次使用」分步引导：一次只讲一步，支持上一步/下一步/跳过，看完记在本机不再出现。
+- 引导内容与该插件的实际用法一致；可在开发者工具里清掉 `dsh-first-run:dsh-remotion:v1` 重新查看。
+## 0.5.0 (2026-10-05)
+
+- 增加可恢复工程归档，释放当前工程名额并完整保留素材与成品；禁止在另一个实例渲染期间移动工程，保留 Remotion 官方许可证提示。
+
 ## 0.4.1 (2026-10-03)
 
 - 视频工作台后台错误与任务阶段支持英文；切换语言重新展示失败引导，项目文字和原始引擎日志保留原文。

package/README.en.md

@@ -2,9 +2,13 @@
 
 [中文](README.md)
 
+![dsh-remotion whale girl plugin cover](https://raw.githubusercontent.com/STARDUSTLC666/dsh-remotion/master/assets/cover-whale-girl.png)
+
 Bring Remotion React video creation skills into DSH.
 
-[![npm](https://img.shields.io/npm/v/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion) [![downloads](https://img.shields.io/npm/dm/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion)
+[![npm](https://img.shields.io/npm/v/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion) [![downloads](https://raw.githubusercontent.com/STARDUSTLC666/dsh-suite/npm-downloads/assets/dsh-remotion-downloads.svg)](https://www.npmjs.com/package/dsh-remotion)
+
+Feedback and contributions are welcome: report [issues](https://github.com/STARDUSTLC666/dsh-remotion/issues) or submit [pull requests](https://github.com/STARDUSTLC666/dsh-remotion/pulls).
 
 ## What it does
 

package/README.md

@@ -2,9 +2,13 @@
 
 [English](README.en.md)
 
+![dsh-remotion 鲸鱼娘插件封面](https://raw.githubusercontent.com/STARDUSTLC666/dsh-remotion/master/assets/cover-whale-girl.png)
+
 把 Remotion 的 React 视频创作技能接入 DSH。
 
-[![npm](https://img.shields.io/npm/v/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion) [![downloads](https://img.shields.io/npm/dm/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion)
+[![npm](https://img.shields.io/npm/v/dsh-remotion)](https://www.npmjs.com/package/dsh-remotion) [![downloads](https://raw.githubusercontent.com/STARDUSTLC666/dsh-suite/npm-downloads/assets/dsh-remotion-downloads.svg)](https://www.npmjs.com/package/dsh-remotion)
+
+欢迎使用，遇到问题或有改进建议，请提交 [issues](https://github.com/STARDUSTLC666/dsh-remotion/issues) 和 [PR](https://github.com/STARDUSTLC666/dsh-remotion/pulls)。
 
 ## 功能
 

package/docs/USAGE.en.md

@@ -2,6 +2,10 @@
 
 [Overview](../README.en.md) · [Changelog](../CHANGELOG.md) · [Validation](VALIDATION.md)
 
+## Current improvements
+
+Save before confirming an archive; restore it from Archived projects. Archives preserve data and disk usage. Up to 30 projects can be active; stop active jobs first.
+
 ## Installation
 
 ```bash

package/docs/USAGE.md

@@ -2,6 +2,10 @@
 
 [返回简介](../README.md) · [更新记录](../CHANGELOG.md) · [验证记录](VALIDATION.md)
 
+## 本次改进
+
+保存工程后确认归档，可在“已归档工程”恢复。归档不删除项目资料、不减少磁盘占用；最多 30 个当前工程。运行中的任务需先关闭。
+
 ## 安装
 
 ```bash

package/lib/client.js

@@ -7,6 +7,8 @@ window.__ModuleLoader__.load({ id: 'dsh-remotion', factory: require => {
     const message = typeof error === 'string' ? error : error?.message || String(error || '');
     if (!en || !/[\u3400-\u9fff]/.test(message)) return message;
     if (error?.status === 401) return 'Your session expired. Reopen DSH and try again.';
+    if (/先归档|已达 30/.test(message)) return 'The 30 active project slots are full. Archive another project before creating or restoring one.';
+    if (/已有预览或渲染/.test(message)) return 'Stop the active preview or cancel the render before archiving or restoring a project.';
     if (error?.status === 409 || /已.*更新|另一窗口|修订/.test(message)) return 'The project changed. Reopen the latest version and compare it with your preserved input.';
     if (/标题/.test(message)) return 'Enter a title up to 72 characters.';
     if (/时长/.test(message)) return 'Set a duration between 3 and 30 seconds.';
@@ -28,7 +30,7 @@ window.__ModuleLoader__.load({ id: 'dsh-remotion', factory: require => {
   }
   function urlFor(project, kind, extra = {}) { const url = new URL(route, document.baseURI); url.search = new URLSearchParams({ id: project.id, kind, ...extra }); return url.href; }
   function Workbench({ locale }) {
-    const [lang, setLang] = useState('zh'), [projects, setProjects] = useState([]), [environment, setEnvironment] = useState(null), [templates, setTemplates] = useState([]);
+    const [lang, setLang] = useState('zh'), [projects, setProjects] = useState([]), [archived, setArchived] = useState([]), [archiveReview, setArchiveReview] = useState(false), [environment, setEnvironment] = useState(null), [templates, setTemplates] = useState([]);
     const [project, setProject] = useState(cache.project), [fields, setFields] = useState(cache.fields || empty()), [dirty, setDirty] = useState(cache.dirty), [creating, setCreating] = useState(cache.creating);
     const [job, setJob] = useState(cache.job), [busy, setBusy] = useState(false), [error, setError] = useState(''), [notice, setNotice] = useState(''), [pending, setPending] = useState(null), [conflict, setConflict] = useState(false);
     const busyRef = useRef(false), fileRef = useRef(null), latest = useRef({ project, fields, dirty }); latest.current = { project, fields, dirty };
@@ -38,7 +40,7 @@ window.__ModuleLoader__.load({ id: 'dsh-remotion', factory: require => {
     useEffect(() => { cache = { project, fields, dirty, job, creating }; }, [project, fields, dirty, job, creating]);
     useEffect(() => { const exit = e => { if (latest.current.dirty) { e.preventDefault(); e.returnValue = ''; } }; window.addEventListener('beforeunload', exit); return () => window.removeEventListener('beforeunload', exit); }, []);
     async function refresh() {
-      const data = await api({ action: 'list' }); setProjects(data.projects); setEnvironment(data.environment); setTemplates(data.templates);
+      const data = await api({ action: 'list' }); setProjects(data.projects); setArchived(data.archivedProjects || []); setEnvironment(data.environment); setTemplates(data.templates);
       const current = latest.current, saved = !current.dirty && data.projects.find(row => row.id === current.project?.id);
       if (saved) { setProject(saved); setFields(fieldsOf(saved)); }
       setJob(previous => data.jobs.find(row => row.id === previous?.id) || data.jobs.filter(row => row.state === 'running').at(-1) || data.jobs.at(-1) || null);
@@ -59,7 +61,7 @@ window.__ModuleLoader__.load({ id: 'dsh-remotion', factory: require => {
       return () => { live = false; clearInterval(timer); };
     }, [job?.id, job?.state]);
     async function perform(fn) { if (busyRef.current) return; busyRef.current = true; setBusy(true); setError(''); setNotice(''); try { return await fn(); } catch (e) { setError(e); setConflict(e.status === 409); } finally { busyRef.current = false; setBusy(false); } }
-    async function open(id) { const next = await api({ action: 'get', id }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setPending(null); }
+    async function open(id) { const next = await api({ action: 'get', id }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setPending(null); setArchiveReview(false); }
     function navigate(target) { if (dirty) { setPending(target); return; } perform(() => move(target)); }
     async function move(target) { if (target === 'new') { setProject(null); setFields(empty()); setCreating(true); } else if (target === 'list') { setProject(null); setCreating(false); await refresh(); } else await open(target); setDirty(false); setPending(null); }
     async function save() { const next = await api(project ? { action: 'update', id: project.id, revision: project.revision, fields } : { action: 'create', fields }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setNotice(t('工程已保存。', 'Project saved.')); await refresh(); return next; }
@@ -69,12 +71,16 @@ window.__ModuleLoader__.load({ id: 'dsh-remotion', factory: require => {
       const response = await fetch(new URL(route + '/upload', document.baseURI), { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/octet-stream', 'x-dsh-media': '1', 'x-project-id': project.id, 'x-project-revision': String(project.revision), 'x-file-name': encodeURIComponent(file.name) }, body: file }); const result = await response.json(); if (!response.ok || !result.ok) { const e = new Error(result.message); e.status = response.status; throw e; } setProject(result.value); setNotice(t('素材副本已保存，原文件未改变。', 'A media copy was saved; your original is unchanged.'));
     }); event.target.value = ''; }
     async function start(action) { await perform(async () => { if (action !== 'prepare' && dirty) throw new Error(t('请先保存修改。', 'Save changes first.')); setJob(await api({ action, id: project?.id, revision: project?.revision })); }); }
+    async function archiveProject() { await api({action:'archive',id:project.id,revision:project.revision,confirmed:true}); setArchiveReview(false); setProject(null); setCreating(false); setDirty(false); await refresh(); setNotice(t('工程已归档，素材和成品均保留，可在下方恢复。','Project archived. Media and output are preserved; restore it below.')); }
     const render = project?.renders?.[0], stale = render && render.revision !== project.revision;
     if (!environment) return h('div', { className: 'dmw' }, h('style', null, css), h('h2', null, title + t(' 视频工作台', ' video workbench')),
       error ? h(React.Fragment, null, h('p', { className: 'notice error', role: 'alert' }, mediaError(error, lang === 'en')), h('button', { disabled: busy, onClick: () => perform(refresh) }, t('重新读取项目', 'Reload projects'))) : h('p', { role: 'status' }, t('正在读取工程与渲染环境…', 'Loading projects and render environment…')));
     return h('div', { className: 'dmw' }, h('style', null, css), h('h2', null, title + t(' 视频工作台', ' video workbench')),
       h('p', { className: 'muted' }, t('模板 → 素材 → 官方预览 → 本机 MP4。工程与素材保存在 DSH 本地数据目录。', 'Template → media → official preview → local MP4. Projects stay in the local DSH data folder.')),
       error && h('div', { className: 'notice error', role: 'alert' }, mediaError(error, lang === 'en')), notice && h('div', { className: 'notice', role: 'status' }, notice),
+      archived.length > 0 && h('details', { className: 'card' }, h('summary', null, t('已归档工程', 'Archived projects') + ' (' + archived.length + ')'), h('p', {className:'muted'}, t('归档保留素材与成品，不占当前 30 个工程名额。恢复后可以继续编辑。','Archives retain media and output, freeing an active project slot. Restore to edit again.')), archived.map(p => h('div',{className:'bar',key:p.id}, h('strong',null,p.title), h('button',{disabled:busy||dirty||activeJob,onClick:()=>perform(async()=>{await api({action:'restore',id:p.id,revision:p.revision,confirmed:true});await refresh();await open(p.id);setNotice(t('工程已恢复。','Project restored.'))})},t('恢复工程','Restore project'))))),
+      project && !creating && h('div',{className:'bar'},h('button',{disabled:busy||dirty||activeJob,onClick:()=>setArchiveReview(true)},t('归档此工程','Archive this project'))),
+      project && archiveReview && h('div',{className:'card',role:'alert'},h('p',null,t('归档后将从当前项目列表移走；工程、上传素材和已导出 MP4 全部保留，可随时恢复。未保存修改需先处理。','Archiving removes this project from the active list. The project, uploaded media and exported MP4s are preserved and can be restored. Save or discard pending edits first.')),h('div',{className:'bar'},h('button',{disabled:busy||dirty||activeJob,onClick:()=>perform(archiveProject)},t('确认归档','Confirm archive')),h('button',{disabled:busy,onClick:()=>setArchiveReview(false)},t('取消归档','Cancel archive')))),
       pending && h('div', { className: 'card' }, h('p', null, t('有未保存内容，如何继续？', 'You have unsaved changes.')),
         h('div', { className: 'bar' }, h('button', { disabled: running, onClick: () => perform(async () => { await save(); await move(pending); }) }, t('保存后继续', 'Save and continue')), h('button', { disabled: running, onClick: () => perform(() => move(pending)) }, t('放弃修改并继续', 'Discard and continue')), h('button', { onClick: () => setPending(null) }, t('留在当前', 'Stay here')))),
       conflict && project && h('button', { disabled: running, onClick: () => { setPending(project.id); } }, t('重新打开最新版本（先处理当前输入）', 'Reopen latest version (review your current input first)')),

package/lib/media-store.d.ts

@@ -7,10 +7,12 @@ export declare class MediaStore {
     readonly root: string;
     constructor(engine: MediaEngine, root?: string);
     init(): Promise<void>;
-    path(id: string): Promise<string>;
+    path(id: string, archived?: boolean): Promise<string>;
     checkPath(path: string): Promise<void>;
-    get(id: string): Promise<MediaProject>;
-    list(): Promise<MediaProject[]>;
+    get(id: string, archived?: boolean): Promise<MediaProject>;
+    list(archived?: boolean): Promise<MediaProject[]>;
+    /** Move a complete managed project without deleting sources, assets or renders. */
+    archive(id: string, revision: unknown, restore?: boolean): Promise<MediaProject>;
     private write;
     create(value: unknown): Promise<MediaProject>;
     edit(id: string, revision: unknown, fn: (p: MediaProject) => Promise<void> | void, bump?: boolean): Promise<MediaProject>;

package/lib/media-store.js

@@ -16,9 +16,9 @@ export class MediaStore {
     root;
     constructor(engine, root) { this.root = resolve(root ?? join(process.env.DSH_HOME || join(homedir(), '.dsh'), 'data', 'dsh-' + engine)); }
     async init() { await mkdir(join(this.root, 'projects'), { recursive: true, mode: 0o700 }); }
-    async path(id) {
+    async path(id, archived = false) {
         await this.init();
-        const dir = join(this.root, 'projects', mediaId(id));
+        const dir = join(this.root, archived ? 'archives' : 'projects', mediaId(id));
         if ((await lstat(dir)).isSymbolicLink())
             throw new Error('项目目录不能是符号链接。');
         await this.checkPath(dir);
@@ -29,8 +29,8 @@ export class MediaStore {
         if (rel === '..' || rel.startsWith('..' + (process.platform === 'win32' ? '\\' : '/')) || isAbsolute(rel))
             throw new Error('文件不在本插件项目目录内。');
     }
-    async get(id) {
-        const file = join(await this.path(id), 'project.json');
+    async get(id, archived = false) {
+        const file = join(await this.path(id, archived), 'project.json');
         await this.checkPath(file);
         if ((await stat(file)).size > 65536)
             throw new Error('工程记录过大，请保留文件后检查。');
@@ -47,15 +47,47 @@ export class MediaStore {
             mediaId(r.id);
         return p;
     }
-    async list() {
+    async list(archived = false) {
         await this.init();
         const result = [];
-        for (const id of await readdir(join(this.root, 'projects'))) {
+        const folder = join(this.root, archived ? 'archives' : 'projects');
+        const ids = await readdir(folder).catch(error => { if (archived && error.code === 'ENOENT')
+            return []; throw error; });
+        for (const id of ids) {
             if (/^[0-9a-f-]{36}$/.test(id))
-                result.push(await this.get(id));
+                result.push(await this.get(id, archived));
         }
         return result.sort((a, b) => b.updated.localeCompare(a.updated));
     }
+    /** Move a complete managed project without deleting sources, assets or renders. */
+    async archive(id, revision, restore = false) {
+        await this.init();
+        const unlock = await lockfile.lock(join(this.root, 'projects'), { retries: { retries: 8, minTimeout: 30, maxTimeout: 60 } });
+        let release;
+        try {
+            const source = await this.path(id, restore);
+            release = await lockfile.lock(source, { retries: { retries: 8, minTimeout: 30, maxTimeout: 60 } });
+            const p = await this.get(id, restore);
+            if (revision !== p.revision)
+                throw new MediaConflict('工程已更新，请重新读取后再归档或恢复。');
+            if (restore && (await this.list()).length >= 30)
+                throw new MediaConflict('当前项目已达 30 个，请先归档其他项目再恢复。');
+            const folder = join(this.root, restore ? 'projects' : 'archives');
+            await mkdir(folder, { recursive: true });
+            await this.checkPath(folder);
+            const target = join(folder, mediaId(id));
+            if (await lstat(target).then(() => true, error => { if (error.code === 'ENOENT')
+                return false; throw error; }))
+                throw new Error('目标已有同编号工程，已保留两份文件，请先备份检查。');
+            await rename(source, target);
+            return p;
+        }
+        finally {
+            if (release)
+                await release();
+            await unlock();
+        }
+    }
     async write(p) {
         const dir = await this.path(p.id), temp = join(dir, randomUUID() + '.tmp');
         try {
@@ -71,7 +103,7 @@ export class MediaStore {
         const unlock = await lockfile.lock(join(this.root, 'projects'), { retries: { retries: 8, minTimeout: 30, maxTimeout: 60 } });
         try {
             if ((await this.list()).length >= 30)
-                throw new Error('工作台最多保存 30 个项目，请先备份现有工程。');
+                throw new Error('工作台最多保存 30 个当前项目，请先归档现有工程。');
             const p = { ...validateFields(value), id: randomUUID(), revision: 1, updated: new Date().toISOString(), assets: [], renders: [] };
             await mkdir(join(this.root, 'projects', p.id), { mode: 0o700 });
             await this.write(p);

package/lib/media-workbench.js

@@ -387,7 +387,7 @@ export class MediaWorkbench {
                 const v = JSON.parse(text);
                 switch (v.action) {
                     case 'list':
-                        value = { projects: await this.store.list(), templates: MEDIA_TEMPLATES, environment: await this.environment(), jobs: [...this.jobs.values()].map(j => structuredClone(j.view)) };
+                        value = { projects: await this.store.list(), archivedProjects: await this.store.list(true), templates: MEDIA_TEMPLATES, environment: await this.environment(), jobs: [...this.jobs.values()].map(j => structuredClone(j.view)) };
                         break;
                     case 'create':
                         value = await this.store.create(v.fields);
@@ -401,6 +401,28 @@ export class MediaWorkbench {
                     case 'removeAsset':
                         value = await this.store.removeAsset(mediaId(v.id), v.revision, mediaId(v.asset));
                         break;
+                    case 'archive':
+                    case 'restore': {
+                        if (v.confirmed !== true)
+                            throw new Error('请明确确认归档或恢复。');
+                        // The same slot covers jobs from another DSH process, so a project
+                        // cannot move while its render or preview still writes into it.
+                        const slot = join(this.store.root, 'workbench-slot');
+                        await this.store.init();
+                        await mkdir(slot, { recursive: true });
+                        const unlock = await lockfile.lock(slot, { retries: 0, stale: 30000, update: 10000 }).catch(error => {
+                            if (error.code === 'ELOCKED')
+                                throw new MediaConflict('已有预览或渲染正在运行，请先关闭预览或取消渲染，再归档或恢复工程。');
+                            throw error;
+                        });
+                        try {
+                            value = await this.store.archive(mediaId(v.id), v.revision, v.action === 'restore');
+                        }
+                        finally {
+                            await unlock();
+                        }
+                        break;
+                    }
                     case 'prepare':
                         value = await this.start('prepare');
                         break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remotion",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "DSH 视频插件：Remotion 技能、模板与素材工作台、官方 Studio 预览和本地 MP4 导出。",
   "type": "module",
   "main": "lib/index.js",

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

@@ -4,57 +4,57 @@ description: Router for all Remotion skills
 version: 4.0.529
 ---
 
-
-## 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/REFERENCE.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/REFERENCE.md)
-
-## React Markup Best Practices
-
-If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)
-
-## Maps
-
-For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).
-
-## Multimedia
-
-For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.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/REFERENCE.md)
-
-## Rendering
-
-For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.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/REFERENCE.md).
-
-## Captions
-
-When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).
-
-## Creating a SaaS, automation or application
-
-Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.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/REFERENCE.md).
-
-## Upgrading
-
-To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).
+
+## 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/REFERENCE.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/REFERENCE.md)
+
+## React Markup Best Practices
+
+If you are writing Remotion React Markup, load [Remotion Markup Best Practices](./remotion-markup/REFERENCE.md)
+
+## Maps
+
+For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).
+
+## Multimedia
+
+For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](./remotion-multimedia/REFERENCE.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/REFERENCE.md)
+
+## Rendering
+
+For advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](./remotion-render/REFERENCE.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/REFERENCE.md).
+
+## Captions
+
+When working with Captions, load [Remotion Captions](./remotion-captions/REFERENCE.md).
+
+## Creating a SaaS, automation or application
+
+Use the [Remotion SaaS skill](./remotion-saas/REFERENCE.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/REFERENCE.md).
+
+## Upgrading
+
+To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](./remotion-upgrade/REFERENCE.md).

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

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

package/skills/remotion-best-practices/assets/remotion-icon.svg

@@ -1,4 +1,4 @@
-<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
-<title>Remotion</title>
-<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
-</svg>
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

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

@@ -1,36 +1,36 @@
----
-name: remotion-captions
-description: Transcribing, displaying and animating captions
-version: 4.0.529
----
-
-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.
+---
+name: remotion-captions
+description: Transcribing, displaying and animating captions
+version: 4.0.529
+---
+
+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

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

package/skills/remotion-best-practices/remotion-captions/assets/remotion-icon.svg

@@ -1,4 +1,4 @@
-<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
-<title>Remotion</title>
-<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
-</svg>
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>