@heyai-rules/pilo-masterkit 2.1.0 → 3.1.0

package/.agent/skills/remotion-video-creation/rules/3d.md

@@ -1,86 +1,86 @@
----
-name: 3d
-description: 3D content in Remotion using Three.js and React Three Fiber.
-metadata:
-  tags: 3d, three, threejs
----
-
-# Using Three.js and React Three Fiber in Remotion
-
-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.
-If it is not, use the following command:
-
-```bash
-npx remotion add @remotion/three # If project uses npm
-bunx remotion add @remotion/three # If project uses bun
-yarn remotion add @remotion/three # If project uses yarn
-pnpm exec remotion add @remotion/three # If project uses pnpm
-```
-
-## Using ThreeCanvas
-
-You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.
-`<ThreeCanvas>` MUST have a `width` and `height` prop.
-
-```tsx
-import { ThreeCanvas } from "@remotion/three";
-import { useVideoConfig } from "remotion";
-
-const { width, height } = useVideoConfig();
-
-<ThreeCanvas width={width} height={height}>
-  <ambientLight intensity={0.4} />
-  <directionalLight position={[5, 5, 5]} intensity={0.8} />
-  <mesh>
-    <sphereGeometry args={[1, 32, 32]} />
-    <meshStandardMaterial color="red" />
-  </mesh>
-</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.
-
-Using `useFrame()` from `@react-three/fiber` is forbidden.
-
-## Animate using `useCurrentFrame()`
-
-Use `useCurrentFrame()` to perform animations.
-
-```tsx
-const frame = useCurrentFrame();
-const rotationY = frame * 0.02;
-
-<mesh rotation={[0, rotationY, 0]}>
-  <boxGeometry args={[2, 2, 2]} />
-  <meshStandardMaterial color="#4a9eff" />
-</mesh>
-```
-
-## Using `<Sequence>` inside `<ThreeCanvas>`
-
-The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
-
-```tsx
-import { Sequence } from "remotion";
-import { ThreeCanvas } from "@remotion/three";
-
-const { width, height } = useVideoConfig();
-
-<ThreeCanvas width={width} height={height}>
-  <Sequence layout="none">
-    <mesh>
-      <boxGeometry args={[2, 2, 2]} />
-      <meshStandardMaterial color="#4a9eff" />
-    </mesh>
-  </Sequence>
-</ThreeCanvas>
-```
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+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.
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</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.
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>
+```

package/.agent/skills/remotion-video-creation/rules/animations.md

@@ -1,29 +1,29 @@
----
-name: animations
-description: Fundamental animation skills for Remotion
-metadata:
-  tags: animations, transitions, frames, useCurrentFrame
----
-
-All animations MUST be driven by the `useCurrentFrame()` hook.
-Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
-
-```tsx
-import { useCurrentFrame } from "remotion";
-
-export const FadeIn = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  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.
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+```tsx
+import { useCurrentFrame } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  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.

package/.agent/skills/remotion-video-creation/rules/assets/charts-bar-chart.tsx

@@ -1,173 +1,173 @@
-import {loadFont} from '@remotion/google-fonts/Inter';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-const {fontFamily} = loadFont();
-
-const COLOR_BAR = '#D4AF37';
-const COLOR_TEXT = '#ffffff';
-const COLOR_MUTED = '#888888';
-const COLOR_BG = '#0a0a0a';
-const COLOR_AXIS = '#333333';
-
-// Ideal composition size: 1280x720
-
-const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
-	<div style={{textAlign: 'center', marginBottom: 40}}>
-		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
-			{children}
-		</div>
-	</div>
-);
-
-const YAxis: React.FC<{steps: number[]; height: number}> = ({
-	steps,
-	height,
-}) => (
-	<div
-		style={{
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'space-between',
-			height,
-			paddingRight: 16,
-		}}
-	>
-		{steps
-			.slice()
-			.reverse()
-			.map((step) => (
-				<div
-					key={step}
-					style={{
-						color: COLOR_MUTED,
-						fontSize: 20,
-						textAlign: 'right',
-					}}
-				>
-					{step.toLocaleString()}
-				</div>
-			))}
-	</div>
-);
-
-const Bar: React.FC<{
-	height: number;
-	progress: number;
-}> = ({height, progress}) => (
-	<div
-		style={{
-			flex: 1,
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'flex-end',
-		}}
-	>
-		<div
-			style={{
-				width: '100%',
-				height,
-				backgroundColor: COLOR_BAR,
-				borderRadius: '8px 8px 0 0',
-				opacity: progress,
-			}}
-		/>
-	</div>
-);
-
-const XAxis: React.FC<{
-	children: React.ReactNode;
-	labels: string[];
-	height: number;
-}> = ({children, labels, height}) => (
-	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
-		<div
-			style={{
-				display: 'flex',
-				alignItems: 'flex-end',
-				gap: 16,
-				height,
-				borderLeft: `2px solid ${COLOR_AXIS}`,
-				borderBottom: `2px solid ${COLOR_AXIS}`,
-				paddingLeft: 16,
-			}}
-		>
-			{children}
-		</div>
-		<div
-			style={{
-				display: 'flex',
-				gap: 16,
-				paddingLeft: 16,
-				marginTop: 12,
-			}}
-		>
-			{labels.map((label) => (
-				<div
-					key={label}
-					style={{
-						flex: 1,
-						textAlign: 'center',
-						color: COLOR_MUTED,
-						fontSize: 20,
-					}}
-				>
-					{label}
-				</div>
-			))}
-		</div>
-	</div>
-);
-
-export const MyAnimation = () => {
-	const frame = useCurrentFrame();
-	const {fps, height} = useVideoConfig();
-
-	const data = [
-		{month: 'Jan', price: 2039},
-		{month: 'Mar', price: 2160},
-		{month: 'May', price: 2327},
-		{month: 'Jul', price: 2426},
-		{month: 'Sep', price: 2634},
-		{month: 'Nov', price: 2672},
-	];
-
-	const minPrice = 2000;
-	const maxPrice = 2800;
-	const priceRange = maxPrice - minPrice;
-	const chartHeight = height - 280;
-	const yAxisSteps = [2000, 2400, 2800];
-
-	return (
-		<AbsoluteFill
-			style={{
-				backgroundColor: COLOR_BG,
-				padding: 60,
-				display: 'flex',
-				flexDirection: 'column',
-				fontFamily,
-			}}
-		>
-			<Title>Gold Price 2024</Title>
-
-			<div style={{display: 'flex', flex: 1}}>
-				<YAxis steps={yAxisSteps} height={chartHeight} />
-				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
-					{data.map((item, i) => {
-						const progress = spring({
-							frame: frame - i * 5 - 10,
-							fps,
-							config: {damping: 18, stiffness: 80},
-						});
-
-						const barHeight =
-							((item.price - minPrice) / priceRange) * chartHeight * progress;
-
-						return (
-							<Bar key={item.month} height={barHeight} progress={progress} />
-						);
-					})}
-				</XAxis>
-			</div>
-		</AbsoluteFill>
-	);
-};
+import {loadFont} from '@remotion/google-fonts/Inter';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const {fontFamily} = loadFont();
+
+const COLOR_BAR = '#D4AF37';
+const COLOR_TEXT = '#ffffff';
+const COLOR_MUTED = '#888888';
+const COLOR_BG = '#0a0a0a';
+const COLOR_AXIS = '#333333';
+
+// Ideal composition size: 1280x720
+
+const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
+	<div style={{textAlign: 'center', marginBottom: 40}}>
+		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
+			{children}
+		</div>
+	</div>
+);
+
+const YAxis: React.FC<{steps: number[]; height: number}> = ({
+	steps,
+	height,
+}) => (
+	<div
+		style={{
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'space-between',
+			height,
+			paddingRight: 16,
+		}}
+	>
+		{steps
+			.slice()
+			.reverse()
+			.map((step) => (
+				<div
+					key={step}
+					style={{
+						color: COLOR_MUTED,
+						fontSize: 20,
+						textAlign: 'right',
+					}}
+				>
+					{step.toLocaleString()}
+				</div>
+			))}
+	</div>
+);
+
+const Bar: React.FC<{
+	height: number;
+	progress: number;
+}> = ({height, progress}) => (
+	<div
+		style={{
+			flex: 1,
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'flex-end',
+		}}
+	>
+		<div
+			style={{
+				width: '100%',
+				height,
+				backgroundColor: COLOR_BAR,
+				borderRadius: '8px 8px 0 0',
+				opacity: progress,
+			}}
+		/>
+	</div>
+);
+
+const XAxis: React.FC<{
+	children: React.ReactNode;
+	labels: string[];
+	height: number;
+}> = ({children, labels, height}) => (
+	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'flex-end',
+				gap: 16,
+				height,
+				borderLeft: `2px solid ${COLOR_AXIS}`,
+				borderBottom: `2px solid ${COLOR_AXIS}`,
+				paddingLeft: 16,
+			}}
+		>
+			{children}
+		</div>
+		<div
+			style={{
+				display: 'flex',
+				gap: 16,
+				paddingLeft: 16,
+				marginTop: 12,
+			}}
+		>
+			{labels.map((label) => (
+				<div
+					key={label}
+					style={{
+						flex: 1,
+						textAlign: 'center',
+						color: COLOR_MUTED,
+						fontSize: 20,
+					}}
+				>
+					{label}
+				</div>
+			))}
+		</div>
+	</div>
+);
+
+export const MyAnimation = () => {
+	const frame = useCurrentFrame();
+	const {fps, height} = useVideoConfig();
+
+	const data = [
+		{month: 'Jan', price: 2039},
+		{month: 'Mar', price: 2160},
+		{month: 'May', price: 2327},
+		{month: 'Jul', price: 2426},
+		{month: 'Sep', price: 2634},
+		{month: 'Nov', price: 2672},
+	];
+
+	const minPrice = 2000;
+	const maxPrice = 2800;
+	const priceRange = maxPrice - minPrice;
+	const chartHeight = height - 280;
+	const yAxisSteps = [2000, 2400, 2800];
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: COLOR_BG,
+				padding: 60,
+				display: 'flex',
+				flexDirection: 'column',
+				fontFamily,
+			}}
+		>
+			<Title>Gold Price 2024</Title>
+
+			<div style={{display: 'flex', flex: 1}}>
+				<YAxis steps={yAxisSteps} height={chartHeight} />
+				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
+					{data.map((item, i) => {
+						const progress = spring({
+							frame: frame - i * 5 - 10,
+							fps,
+							config: {damping: 18, stiffness: 80},
+						});
+
+						const barHeight =
+							((item.price - minPrice) / priceRange) * chartHeight * progress;
+
+						return (
+							<Bar key={item.month} height={barHeight} progress={progress} />
+						);
+					})}
+				</XAxis>
+			</div>
+		</AbsoluteFill>
+	);
+};