@jhm1909/ag-kit 0.1.0

package/.agent/skills/lead-architect/templates/adr.md

@@ -0,0 +1,62 @@
+# ADR [Number]: [Title]
+
+- **Status**: [Proposed | Accepted | Rejected | Deprecated | Superseded]
+- **Deciders**: [List everyone involved in the decision]
+- **Date**: [YYYY-MM-DD]
+
+## Context and Problem Statement
+
+[Describe the context and problem statement, e.g., in free form using two to three sentences. You may want to articulate the problem in form of a question.]
+
+## Decision Drivers
+
+- [driver 1, e.g., a force, facing concern, ...]
+- [driver 2, e.g., a force, facing concern, ...]
+
+## Considered Options
+
+- [Option 1]
+- [Option 2]
+- [Option 3]
+
+## Decision Outcome
+
+Chosen option: "[Option 1]", because [justification. e.g., only option, which meets k.o. criterion decision driver | which resolves force force | … | comes out best (see below)].
+
+### Positive Consequences
+
+- [e.g., improvement of quality attribute satisfaction, follow-up decisions required, …]
+- …
+
+### Negative Consequences
+
+- [e.g., compromising quality attribute, follow-up decisions required, …]
+- …
+
+## Pros and Cons of the Options
+
+### [Option 1]
+
+- Good, because [argument a]
+- Good, because [argument b]
+- Bad, because [argument c]
+- …
+
+### [Option 2]
+
+- Good, because [argument a]
+- Good, because [argument b]
+- Bad, because [argument c]
+- …
+
+### [Option 3]
+
+- Good, because [argument a]
+- Good, because [argument b]
+- Bad, because [argument c]
+- …
+
+## Links
+
+- [Link type] [Link to ADR]
+- …

package/.agent/skills/lead-architect/templates/rfc.md

@@ -0,0 +1,46 @@
+# RFC: [Title]
+
+- **Author**: [Your Name]
+- **Status**: [Draft | In Review | Accepted | Rejected]
+- **Created**: [YYYY-MM-DD]
+- **Updated**: [YYYY-MM-DD]
+
+## Summary
+
+[A concise summary of the proposal. What is it? Why do we need it?]
+
+## Motivation
+
+[Why are we doing this? What problem is it solving? Why is it important now?]
+
+## Detailed Configuration / Design
+
+[Explain the design in detail. Diagrams are highly encouraged.]
+
+### Components
+
+[List the components involved and how they interact.]
+
+### Data Model
+
+[Any database schema changes?]
+
+### API Changes
+
+[Any new APIs or changes to existing ones?]
+
+## Alternatives Considered
+
+[What alternatives were considered and why were they rejected?]
+
+## Trade-offs
+
+[What are the downsides of this approach?]
+
+## Dependencies
+
+[Does this depend on other projects or teams?]
+
+## Timeline
+
+[Estimated timeline for implementation.]

package/.agent/skills/lead-architect/templates/sdd.md

@@ -0,0 +1,62 @@
+# System Design Document: [System Name]
+
+## 1. Introduction
+
+### 1.1 Purpose
+
+[Describe the purpose of the system.]
+
+### 1.2 Scope
+
+[What is in scope and what is out of scope?]
+
+### 1.3 Definitions and Acronyms
+
+[List any specific terms or acronyms.]
+
+## 2. Architectural Representation
+
+### 2.1 Context Diagram (C4 - Level 1)
+
+[Insert Diagram: System interactions with external systems/users.]
+
+### 2.2 Container Diagram (C4 - Level 2)
+
+[Insert Diagram: High-level containers (e.g., Web App, Mobile App, API, DB).]
+
+### 2.3 Technology Stack
+
+- **Frontend**: [e.g., Next.js, React]
+- **Backend**: [e.g., Node.js, Python]
+- **Database**: [e.g., Postgres, Redis]
+- **Infrastructure**: [e.g., AWS, K8s]
+
+## 3. Detailed System Design
+
+### 3.1 Components
+
+[Describe key components and their responsibilities.]
+
+### 3.2 Data Design
+
+- **Schema**: [Link to schema definitions or embed ERD]
+- **Data Flow**: [Describe how data moves through the system]
+
+### 3.3 Interface Design
+
+- **API Specification**: [Link to Swagger/OpenAPI spec]
+- **External Interfaces**: [Integrations with 3rd party APIs]
+
+## 4. Operational Requirements
+
+### 4.1 Scalability
+
+[How will the system handle growth?]
+
+### 4.2 Security
+
+[Authentication, Authorization, Data Protection.]
+
+### 4.3 Reliability
+
+[Backup, Recovery, Failover strategies.]

package/.agent/skills/lead-architect/templates/technical-spec.md

@@ -0,0 +1,61 @@
+# Technical Specification
+
+## 1. Overview
+
+- **Feature**: [Feature Name]
+- **Context**: [Brief explanation of why we are building this]
+- **Scope**: [What is IN and OUT of technical scope]
+
+## 2. Architecture Diagram (Mermaid)
+
+_(Insert Sequence or Class Diagram here)_
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Client
+    participant API
+    participant DB
+    User->>Client: ...
+```
+
+## 3. Data Model (Schema)
+
+| Table/Collection | Column/Field | Type | Constraint | Description |
+| :--------------- | :----------- | :--- | :--------- | :---------- |
+| `users`          | `id`         | UUID | PK         |             |
+|                  |              |      |            |             |
+
+## 4. API Interface
+
+### Endpoint: `[METHOD] /path/to/resource`
+
+- **Description**: ...
+- **Auth Required**: Yes/No scopes
+- **Request Body**:
+  ```json
+  {
+    "field": "type"
+  }
+  ```
+- **Response (200)**:
+  ```json
+  {
+    "data": ...
+  }
+  ```
+- **Error Codes**:
+  - `400`: [Invalid Input Scenarios]
+  - `403`: [Permission Scenarios]
+
+## 5. Implementation Logic
+
+- **State Management**: ...
+- **Algorithms/Calculations**: ...
+- **Security Considerations**: ...
+
+## 6. Edge Cases
+
+- [ ] Network Failure
+- [ ] Concurrent Access
+- [ ] Empty States

package/.agent/skills/marketer/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: marketer
+description: >
+  Marketing, SEO, content strategy, and video production. Use for campaigns, social media, and content creation.
+license: MIT
+compatibility: Claude Code, Cursor, Gemini CLI, GitHub Copilot
+metadata:
+  author: jhm1909
+  version: "2.0.0"
+  domain: marketing
+  estimated_tokens: 8000
+---
+
+# Marketer
+
+Marketing strategy and content creation for digital products.
+
+## Knowledge Graph
+
+- **extends**: []
+- **requires**: []
+- **suggests**: [[remotion-best-practices]], [[designer]], [[frontend-developer]]
+- **conflicts**: []
+- **enhances**: []
+- **moc**: [[video-production-moc]]
+
+## Capabilities
+
+| Area | Focus |
+|:-----|:------|
+| **Content Strategy** — Planning and distribution | SEO, social media, newsletters |
+| **Video Production** — Programmatic video | [[remotion-best-practices]] |
+| **Brand** — Identity and messaging | Voice, tone, visual guidelines |
+| **Growth** — Acquisition and retention | Funnels, metrics, A/B testing |
+| **Analytics** — Performance tracking | GA4, conversion tracking, dashboards |
+
+## Sub-Skills
+
+| Skill | Path | Use For |
+|:------|:-----|:--------|
+| **Remotion** | [[remotion-best-practices]] | Programmatic video |
+
+## Core Principles
+
+1. **Data-Driven** — Decisions based on metrics, not assumptions
+2. **Audience First** — Know the persona before creating content
+3. **Test & Iterate** — A/B test everything, optimize continuously
+4. **Integrated** — Marketing aligns with product and engineering
+
+## References
+
+- `seo.md` — Search optimization
+- `content-strategy.md` — Planning and calendar
+- `social-media.md` — Platform-specific tactics
+- `analytics.md` — Tracking and dashboards
+
+## Related Skills
+
+- [[remotion-best-practices]] — Video creation
+- [[designer]] — Visual assets
+- [[frontend-developer]] — Landing pages
+- [[business-analysis]] — Market research
+
+---
+
+*Part of [[video-production-moc]] | Content and growth strategy*

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

@@ -0,0 +1,58 @@
+---
+name: remotion-best-practices
+description: >
+  Video creation with Remotion. Use for programmatic video, animations, and rendering in React.
+license: MIT
+compatibility: Claude Code, Cursor, Gemini CLI, GitHub Copilot
+metadata:
+  author: jhm1909
+  version: "2.0.0"
+  domain: video
+  estimated_tokens: 25000
+---
+
+# Remotion Best Practices
+
+Programmatic video creation using React and TypeScript.
+
+## Knowledge Graph
+
+- **extends**: []
+- **requires**: [[frontend-developer]]
+- **suggests**: []
+- **conflicts**: []
+- **enhances**: [[marketer]] (video content)
+- **moc**: [[video-production-moc]]
+
+## Rule Topics
+
+| Topic | File |
+|:------|:-----|
+| **3D** | `rules/3d.md` — Three.js, React Three Fiber |
+| **Animations** | `rules/animations.md` — Core animation patterns |
+| **Audio** | `rules/audio.md` — Sound, volume, pitch |
+| **Assets** | `rules/assets.md` — Images, fonts, videos |
+| **Captions** | `rules/display-captions.md`, `rules/import-srt-captions.md`, `rules/transcribe-captions.md` |
+| **Charts** | `rules/charts.md` — Data visualization |
+| **Compositions** | `rules/compositions.md` — Defining scenes |
+| **Media Utils** | `rules/can-decode.md`, `rules/extract-frames.md`, `rules/get-audio-duration.md`, `rules/get-video-dimensions.md`, `rules/get-video-duration.md` |
+| **Text** | `rules/fonts.md`, `rules/measuring-text.md`, `rules/text-animations.md` |
+| **Timing** | `rules/sequencing.md`, `rules/timing.md`, `rules/transitions.md`, `rules/trimming.md` |
+| **Styling** | `rules/tailwind.md` — Tailwind in Remotion |
+
+## Core Concepts
+
+- **Compositions** — Video scenes with props and duration
+- **Timing** — Frames, spring animations, interpolation
+- **Media** — Images, video, audio synchronized to timeline
+- **Rendering** — SSR, Lambda, local rendering
+
+## Related Skills
+
+- [[frontend-developer]] — Required foundation (load `react-nextjs/` sub-capability)
+- [[ai-engineer]] — For AI-generated video content
+- [[marketer]] — Content strategy
+
+---
+
+*Requires [[frontend-developer]] | Part of [[video-production-moc]]*

package/.agent/skills/marketer/remotion-best-practices/rules/3d.md

@@ -0,0 +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>
+```

package/.agent/skills/marketer/remotion-best-practices/rules/animations.md

@@ -0,0 +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.  

package/.agent/skills/marketer/remotion-best-practices/rules/assets/charts-bar-chart.tsx

@@ -0,0 +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>
+	);
+};