fix

Author: aidenybai

.ami/skills/remotion-best-practices/rules/3d.md

@@ -40,14 +40,14 @@ const { width, height } = useVideoConfig();
     <sphereGeometry args={[1, 32, 32]} />
     <meshStandardMaterial color="red" />
   </mesh>
-</ThreeCanvas>
+</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.  
+Otherwise, it will cause flickering during rendering.
 
 Using `useFrame()` from `@react-three/fiber` is forbidden.
 
@@ -62,7 +62,7 @@ const rotationY = frame * 0.02;
 <mesh rotation={[0, rotationY, 0]}>
   <boxGeometry args={[2, 2, 2]} />
   <meshStandardMaterial color="#4a9eff" />
-</mesh>
+</mesh>;
 ```
 
 ## Using `<Sequence>` inside `<ThreeCanvas>`
@@ -82,5 +82,5 @@ const { width, height } = useVideoConfig();
       <meshStandardMaterial color="#4a9eff" />
     </mesh>
   </Sequence>
-</ThreeCanvas>
-```
+</ThreeCanvas>;
+```

.ami/skills/remotion-best-practices/rules/animations.md

@@ -16,14 +16,12 @@ export const FadeIn = () => {
   const { fps } = useVideoConfig();
 
   const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
-    extrapolateRight: 'clamp',
+    extrapolateRight: "clamp",
   });
- 
-  return (
-    <div style={{ opacity }}>Hello World!</div>
-  );
+
+  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.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.

.ami/skills/remotion-best-practices/rules/assets.md

@@ -16,10 +16,10 @@ Place assets in the `public/` folder at your project root.
 You MUST use `staticFile()` to reference files from the `public/` folder:
 
 ```tsx
-import {Img, staticFile} from 'remotion';
+import { Img, staticFile } from "remotion";
 
 export const MyComposition = () => {
-  return <Img src={staticFile('logo.png')} />;
+  return <Img src={staticFile("logo.png")} />;
 };
 ```
 
@@ -30,35 +30,35 @@ The function returns an encoded URL that works correctly when deploying to subdi
 **Images:**
 
 ```tsx
-import {Img, staticFile} from 'remotion';
+import { Img, staticFile } from "remotion";
 
-<Img src={staticFile('photo.png')} />;
+<Img src={staticFile("photo.png")} />;
 ```
 
 **Videos:**
 
 ```tsx
-import {Video} from '@remotion/media';
-import {staticFile} from 'remotion';
+import { Video } from "@remotion/media";
+import { staticFile } from "remotion";
 
-<Video src={staticFile('clip.mp4')} />;
+<Video src={staticFile("clip.mp4")} />;
 ```
 
 **Audio:**
 
 ```tsx
-import {Audio} from '@remotion/media';
-import {staticFile} from 'remotion';
+import { Audio } from "@remotion/media";
+import { staticFile } from "remotion";
 
-<Audio src={staticFile('music.mp3')} />;
+<Audio src={staticFile("music.mp3")} />;
 ```
 
 **Fonts:**
 
 ```tsx
-import {staticFile} from 'remotion';
+import { staticFile } from "remotion";
 
-const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
+const fontFamily = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
 await fontFamily.load();
 document.fonts.add(fontFamily);
 ```