writing-docs

Name: writing-docs
Author: remotion-dev

54kstars3.9kforks

How to install writing-docs?

remotion-dev/remotion/writing-docs

$npx -y skills add remotion-dev/remotion --skill writing-docs

Installs into the current project.

Summary

Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.

Files · 1

View on GitHub

SKILL.md

1	# Writing Remotion Documentation
2
3	Documentation lives in `packages/docs/docs` as `.mdx` files.
4
5	## Adding a new page
6
7	1. Create a new `.mdx` file in `packages/docs/docs`
8	2. Add the document to `packages/docs/sidebars.ts`
9	3. Write the content following guidelines below
10	4. Run `bun render-cards.ts` in `packages/docs` to generate social preview cards
11
12	Breadcrumb (`crumb`): If a documentation page belongs to a package, add `crumb: '@remotion/package-name'` to the frontmatter. This displays the package name as a breadcrumb above the title.
13
14	```md
15	---
16	image: /generated/articles-docs-my-package-my-api.png
17	title: '<MyComponent>'
18	crumb: '@remotion/my-package'
19	---
20	```
21
22	One API per page: Each function or API should have its own dedicated documentation page. Do not combine multiple APIs (e.g., `getEncodableVideoCodecs()` and `getEncodableAudioCodecs()`) on a single page.
23
24	Public API only: Documentation is for public APIs only. Do not mention, reference, or compare against internal/private APIs or implementation details.
25
26	API names in prose: Put API names in backticks, and link them if a docs page exists. Function and hook names should include `()`, for example [`useVideoConfig()`](/docs/use-video-config), not `useVideoConfig` or useVideoConfig. Components should include angle brackets, for example [`<Player>`](/docs/player/player) or [`<Audio>`](/docs/media/audio).
27
28	Use headings for all fields: When documenting API options or return values, each property should be its own heading. Use `###` for top-level properties and `####` for nested properties within an options object. Do not use bullet points for individual fields.
29
30	Version indicators: If an API, feature, parameter, or behavior was added in a specific version, add `<AvailableFrom>` at the page, section, or field where the reader first needs to know it. For example: `# prefetch()<AvailableFrom v="4.0.0" />`.
31
32	Compatibility tables: API pages should ideally include a `## Compatibility` section with `<CompatibilityTable>` before `## See also`.
33
34	Sidebar order: When adding or moving docs in `packages/docs/sidebars.ts`, inspect the surrounding entries and match the ordering logic already used there. If a section is alphabetical, place the new entry alphabetically; if it is grouped by workflow or importance, place it consistently with that grouping. Do not leave new additions as one-off outliers.
35
36	## Language guidelines
37
38	- Keep it brief: Developers don't like to read. Extra words cause information loss.
39	- Link to terminology: Use [terminology](/docs/terminology) page for Remotion-specific terms.
40	- Avoid emotions: Remove filler like "Great! Let's move on..." - it adds no information.
41	- Separate into paragraphs: Break up long sections.
42	- Address as "you": Not "we".
43	- Don't blame the user: Say "The input is invalid" not "You provided wrong input".
44	- Don't assume it's easy: Avoid "simply" and "just" - beginners may struggle.
45
46	## Code snippets
47
48	Basic syntax highlighting:
49
50	````md
51	```ts
52	const x = 1;
53	```
54	````
55
56	### Type-safe snippets (preferred)
57
58	Use `twoslash` to check snippets against TypeScript:
59
60	````md
61	```ts twoslash
62	import {useCurrentFrame} from 'remotion';
63	const frame = useCurrentFrame();
64	```
65	````
66
67	### Hiding imports
68
69	Use `// ---cut---` to hide setup code - only content below is displayed:
70
71	````md
72	```ts twoslash
73	import {useCurrentFrame} from 'remotion';
74	// ---cut---
75	const frame = useCurrentFrame();
76	```
77	````
78
79	### Adding titles
80
81	Always add a `title` to code fences that show example usage:
82
83	````md
84	```ts twoslash title="MyComponent.tsx"
85	console.log('Hello');
86	```
87	````
88
89	## Special components
90
91	### Steps
92
93	Formatting around `<Step>` is delicate. Keep one step per line, add a space after `</Step>`, and preserve an explicit line break (`<br/>` or `<br />`) when the steps are written as a compact inline list. Do not write `<Step>1</Step>Add...` without a space.
94
95	```md
96	- <Step>1</Step> First step
97	- <Step>2</Step> Second step
98	```
99
100	### Experimental badge
101
102	```md
103	<ExperimentalBadge>
104	<p>This feature is experimental.</p>
105	</ExperimentalBadge>
106	```
107
108	### Interactive demos
109
110	```md
111	<Demo type="rect"/>
112	```
113
114	Demos must be implemented in `packages/docs/components/demos/index.tsx`. See the `docs-demo` skill for details on adding new demos.
115
116	### AvailableFrom
117
118	Use to indicate when a feature or parameter was added. No import needed - it's globally available.
119
120	For page-level version indicators, use an `# h1` heading with `<AvailableFrom>` inline so it appears next to the title (not below it). Use `<` and `>` to escape angle brackets in component names:
121
122	```md
123	# <MyComponent><AvailableFrom v="4.0.123" />
124	```
125
126	```md
127	# @remotion/my-package<AvailableFrom v="4.0.123" />
128	```
129
130	For section headings:
131
132	```md
133	## Saving to another cloud<AvailableFrom v="

People who liked this also viewed

6 picks

Type

grill-with-docsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.SkillsJul 2026537k182k
lark-minutes飞书妙记：搜索妙记、查看妙记基础信息、下载/上传音视频、读取或编辑妙记的产物内容、改标题、替换说话人/关键词、申请妙记查看/编辑权限。当给出minute_token、本地音视频文件，要查/改/转妙记产物，或用户明确要主动申请妙记权限时使用；本地音视频转纪要/逐字稿优先走本 skill，不要用 ffmpeg/whisper 本地转写。不负责：获取会议关联妙记，或仅按自然语言标题定位纪要SkillsJul 2026379k16k
lark-markdown飞书 Markdown：查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。SkillsJul 2026295k16k
docxUse this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', SkillsJul 2026157k163k
edit-articleSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026154k181k
lark-note飞书会议纪要（Note）直查：已知 note_id 时查询纪要详情、展示类型、关联文档 token，并读取 unified 原始逐字记录。当用户已持有 note_id，或从文档显式 vc-node-id 获得 note_id 时使用。不负责会议/日程/妙记定位、文档标题搜索或 Docx 正文读取。SkillsJul 2026154k16k

writing-docs

54kstars3.9kforks

View on GitHub

How to install writing-docs?

remotion-dev/remotion/writing-docs

$npx -y skills add remotion-dev/remotion --skill writing-docs

Installs into the current project.

Summary

Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.

Files · 1

View on GitHub

SKILL.md

1	# Writing Remotion Documentation
2
3	Documentation lives in `packages/docs/docs` as `.mdx` files.
4
5	## Adding a new page
6
7	1. Create a new `.mdx` file in `packages/docs/docs`
8	2. Add the document to `packages/docs/sidebars.ts`
9	3. Write the content following guidelines below
10	4. Run `bun render-cards.ts` in `packages/docs` to generate social preview cards
11
12	Breadcrumb (`crumb`): If a documentation page belongs to a package, add `crumb: '@remotion/package-name'` to the frontmatter. This displays the package name as a breadcrumb above the title.
13
14	```md
15	---
16	image: /generated/articles-docs-my-package-my-api.png
17	title: '<MyComponent>'
18	crumb: '@remotion/my-package'
19	---
20	```
21
22	One API per page: Each function or API should have its own dedicated documentation page. Do not combine multiple APIs (e.g., `getEncodableVideoCodecs()` and `getEncodableAudioCodecs()`) on a single page.
23
24	Public API only: Documentation is for public APIs only. Do not mention, reference, or compare against internal/private APIs or implementation details.
25
26	API names in prose: Put API names in backticks, and link them if a docs page exists. Function and hook names should include `()`, for example [`useVideoConfig()`](/docs/use-video-config), not `useVideoConfig` or useVideoConfig. Components should include angle brackets, for example [`<Player>`](/docs/player/player) or [`<Audio>`](/docs/media/audio).
27
28	Use headings for all fields: When documenting API options or return values, each property should be its own heading. Use `###` for top-level properties and `####` for nested properties within an options object. Do not use bullet points for individual fields.
29
30	Version indicators: If an API, feature, parameter, or behavior was added in a specific version, add `<AvailableFrom>` at the page, section, or field where the reader first needs to know it. For example: `# prefetch()<AvailableFrom v="4.0.0" />`.
31
32	Compatibility tables: API pages should ideally include a `## Compatibility` section with `<CompatibilityTable>` before `## See also`.
33
34	Sidebar order: When adding or moving docs in `packages/docs/sidebars.ts`, inspect the surrounding entries and match the ordering logic already used there. If a section is alphabetical, place the new entry alphabetically; if it is grouped by workflow or importance, place it consistently with that grouping. Do not leave new additions as one-off outliers.
35
36	## Language guidelines
37
38	- Keep it brief: Developers don't like to read. Extra words cause information loss.
39	- Link to terminology: Use [terminology](/docs/terminology) page for Remotion-specific terms.
40	- Avoid emotions: Remove filler like "Great! Let's move on..." - it adds no information.
41	- Separate into paragraphs: Break up long sections.
42	- Address as "you": Not "we".
43	- Don't blame the user: Say "The input is invalid" not "You provided wrong input".
44	- Don't assume it's easy: Avoid "simply" and "just" - beginners may struggle.
45
46	## Code snippets
47
48	Basic syntax highlighting:
49
50	````md
51	```ts
52	const x = 1;
53	```
54	````
55
56	### Type-safe snippets (preferred)
57
58	Use `twoslash` to check snippets against TypeScript:
59
60	````md
61	```ts twoslash
62	import {useCurrentFrame} from 'remotion';
63	const frame = useCurrentFrame();
64	```
65	````
66
67	### Hiding imports
68
69	Use `// ---cut---` to hide setup code - only content below is displayed:
70
71	````md
72	```ts twoslash
73	import {useCurrentFrame} from 'remotion';
74	// ---cut---
75	const frame = useCurrentFrame();
76	```
77	````
78
79	### Adding titles
80
81	Always add a `title` to code fences that show example usage:
82
83	````md
84	```ts twoslash title="MyComponent.tsx"
85	console.log('Hello');
86	```
87	````
88
89	## Special components
90
91	### Steps
92
93	Formatting around `<Step>` is delicate. Keep one step per line, add a space after `</Step>`, and preserve an explicit line break (`<br/>` or `<br />`) when the steps are written as a compact inline list. Do not write `<Step>1</Step>Add...` without a space.
94
95	```md
96	- <Step>1</Step> First step
97	- <Step>2</Step> Second step
98	```
99
100	### Experimental badge
101
102	```md
103	<ExperimentalBadge>
104	<p>This feature is experimental.</p>
105	</ExperimentalBadge>
106	```
107
108	### Interactive demos
109
110	```md
111	<Demo type="rect"/>
112	```
113
114	Demos must be implemented in `packages/docs/components/demos/index.tsx`. See the `docs-demo` skill for details on adding new demos.
115
116	### AvailableFrom
117
118	Use to indicate when a feature or parameter was added. No import needed - it's globally available.
119
120	For page-level version indicators, use an `# h1` heading with `<AvailableFrom>` inline so it appears next to the title (not below it). Use `<` and `>` to escape angle brackets in component names:
121
122	```md
123	# <MyComponent><AvailableFrom v="4.0.123" />
124	```
125
126	```md
127	# @remotion/my-package<AvailableFrom v="4.0.123" />
128	```
129
130	For section headings:
131
132	```md
133	## Saving to another cloud<AvailableFrom v="

People who liked this also viewed

6 picks

Type