zsp/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-04-19 16:43:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: tighten voice-driven content skills

Browse Source
This commit is contained in:
Affaan Mustafa
2026-04-01 01:31:40 -07:00
parent 43ac81f1ac
commit 5194d2000a
19 changed files with 545 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
skills/remotion-video-creation/rules/3d.md
View File

@@ -7,12 +7,12 @@ metadata:
# Using Three.js and React Three Fiber in Remotion
Follow React Three Fiber and Three.js best practices.
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.
First, the `@remotion/three` package needs to be installed.
If it is not, use the following command:
```bash
@@ -24,7 +24,7 @@ pnpm exec remotion add @remotion/three # If project uses pnpm
## Using ThreeCanvas
You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.
You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.
`<ThreeCanvas>` MUST have a `width` and `height` prop.
```tsx
@@ -45,9 +45,9 @@ const { width, height } = useVideoConfig();
## 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.
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.

8
skills/remotion-video-creation/rules/animations.md
View File

@@ -5,7 +5,7 @@ metadata:
tags: animations, transitions, frames, useCurrentFrame
---
All animations MUST be driven by the `useCurrentFrame()` hook.
All animations MUST be driven by the `useCurrentFrame()` hook.
Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
```tsx
@@ -18,12 +18,12 @@ export const FadeIn = () => {
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: 'clamp',
});
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.
CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.

4
skills/remotion-video-creation/rules/charts.md
View File

@@ -11,8 +11,8 @@ You can create bar charts in Remotion by using regular React code - HTML and SVG
## No animations not powered by `useCurrentFrame()`
Disable all animations by third party libraries.
They will cause flickering during rendering.
Disable all animations by third party libraries.
They will cause flickering during rendering.
Instead, drive all animations from `useCurrentFrame()`.
## Bar Chart Animations

4
skills/remotion-video-creation/rules/compositions.md
View File

@@ -29,7 +29,7 @@ export const RemotionRoot = () => {
## Default Props
Pass `defaultProps` to provide initial values for your component.
Pass `defaultProps` to provide initial values for your component.
Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
```tsx
@@ -58,7 +58,7 @@ Use `type` declarations for props rather than `interface` to ensure `defaultProp
## Folders
Use `<Folder>` to organize compositions in the sidebar.
Use `<Folder>` to organize compositions in the sidebar.
Folder names can only contain letters, numbers, and hyphens.
```tsx

2
skills/remotion-video-creation/rules/lottie.md
View File

@@ -9,7 +9,7 @@ metadata:
## Prerequisites
First, the @remotion/lottie package needs to be installed.
First, the @remotion/lottie package needs to be installed.
If it is not, use the following command:
```bash

4
skills/remotion-video-creation/rules/sequencing.md
View File

@@ -20,7 +20,7 @@ const {fps} = useVideoConfig();
</Sequence>
```
This will by default wrap the component in an absolute fill element.
This will by default wrap the component in an absolute fill element.
If the items should not be wrapped, use the `layout` prop:
```tsx
@@ -31,7 +31,7 @@ If the items should not be wrapped, use the `layout` prop:
## Premounting
This loads the component in the timeline before it is actually played.
This loads the component in the timeline before it is actually played.
Always premount any `<Sequence>`!
```tsx

2
skills/remotion-video-creation/rules/tailwind.md
View File

@@ -6,6 +6,6 @@ metadata:
You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
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.

12
skills/remotion-video-creation/rules/timing.md
View File

@@ -13,7 +13,7 @@ import {interpolate} from 'remotion';
const opacity = interpolate(frame, [0, 100], [0, 1]);
```
By default, the values are not clamped, so the value can go outside the range [0, 1].
By default, the values are not clamped, so the value can go outside the range [0, 1].
Here is how they can be clamped:
```ts title="Going from 0 to 1 over 100 frames with extrapolation"
@@ -25,7 +25,7 @@ const opacity = interpolate(frame, [0, 100], [0, 1], {
## Spring animations
Spring animations have a more natural motion.
Spring animations have a more natural motion.
They go from 0 to 1 over time.
```ts title="Spring animation from 0 to 1 over 100 frames"
@@ -42,7 +42,7 @@ const scale = spring({
### Physical properties
The default configuration is: `mass: 1, damping: 10, stiffness: 100`.
The default configuration is: `mass: 1, damping: 10, stiffness: 100`.
This leads to the animation having a bit of bounce before it settles.
The config can be overwritten like this:
@@ -68,7 +68,7 @@ const heavy = {damping: 15, stiffness: 80, mass: 2}; // Heavy, slow, small bounc
### Delay
The animation starts immediately by default.
The animation starts immediately by default.
Use the `delay` parameter to delay the animation by a number of frames.
```tsx
@@ -81,7 +81,7 @@ const entrance = spring({
### Duration
A `spring()` has a natural duration based on the physical properties.
A `spring()` has a natural duration based on the physical properties.
To stretch the animation to a specific duration, use the `durationInFrames` parameter.
```tsx
@@ -144,7 +144,7 @@ const value1 = interpolate(frame, [0, 100], [0, 1], {
});
```
The default easing is `Easing.linear`.
The default easing is `Easing.linear`.
There are various other convexities:
- `Easing.in` for starting slow and accelerating

4
skills/remotion-video-creation/rules/transitions.md
View File

@@ -7,12 +7,12 @@ metadata:
## Fullscreen transitions
Using `<TransitionSeries>` to animate between multiple scenes or clips.
Using `<TransitionSeries>` to animate between multiple scenes or clips.
This will absolutely position the children.
## Prerequisites
First, the @remotion/transitions package needs to be installed.
First, the @remotion/transitions package needs to be installed.
If it is not, use the following command:
```bash

2
skills/remotion-video-creation/rules/videos.md
View File

@@ -9,7 +9,7 @@ metadata:
## Prerequisites
First, the @remotion/media package needs to be installed.
First, the @remotion/media package needs to be installed.
If it is not, use the following command:
```bash