@nguyenphp/antigravity-marketing 1.0.2 → 1.0.4

package/README.md

@@ -32,7 +32,15 @@ This project is built upon and includes skills from:
 - 🎨 **[UI UX Pro Max](https://ui-ux-pro-max-skill.nextlevelbuilder.io/)** - Design intelligence skills (`ui-ux-pro-max`, `frontend-design`, `tailwind-patterns`)
 - 🛠️ **[ClaudeKit](https://claudekit.cc/)** - Production-ready skills (`seo-fundamentals`, `documentation-templates`)
 
-## 🧠 Skills (24)
+## 🎥 Video Showcase (Automated via [Remotion](https://www.remotion.dev/))
+
+✨ **Video-Automation Skill**: This feature inherits its power directly from our Remotion-based skills, allowing for the programmatic creation of high-fidelity marketing videos.
+
+| YouTube (16:9) | TikTok / Reels (9:16) |
+|:---:|:---:|
+| ![Antigravity Promo 16:9](file:///Users/mobileapp/Documents/antigravity-marketing/docs/assets/videos/antigravity-promo-169.mp4) | ![Antigravity Promo 9:16](file:///Users/mobileapp/Documents/antigravity-marketing/docs/assets/videos/antigravity-promo-916.mp4) |
+
+## 🧠 Skills (25)
 
 ### Content & Creative
 | Skill | Description |
@@ -40,6 +48,7 @@ This project is built upon and includes skills from:
 | `content-marketing` | Content strategy, copywriting, storytelling |
 | `branding-expert` | Brand identity, voice & tone, style guides |
 | `video-marketing` | Video strategy, YouTube SEO, short-form content |
+| `video-automation` | **Automated marketing videos via Remotion** |
 | `content-repurposing` | Transform content into multiple formats |
 
 ### Growth & Acquisition

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nguyenphp/antigravity-marketing",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Marketing-focused AI agent skills kit for Gemini CLI",
   "main": "bin/index.js",
   "type": "module",

package/templates/.agent/skills/video-automation/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: video-automation
+description: Automated video production using Remotion, covering all best practices from basics to advanced (3D, Charts, Captions).
+allowed-tools: Read, RunCommand, Write
+---
+
+# Video Automation - The Full Remotion Suite
+
+> This skill integrates the complete Remotion best practices with the Antigravity design system. It allows the agent to build production-grade video ads automatically.
+
+---
+
+## 1. Antigravity Core Aesthetics (The Look)
+
+Always apply these tokens to the Remotion components:
+- **Background**: `#0a0a0c`
+- **Primary**: `#00f2ff` (Neon Cyan)
+- **Secondary**: `#ff00e5` (Neon Pink)
+- **Glass**: `rgba(255, 255, 255, 0.05)` with `backdrop-filter: blur(10px)`
+- **Fonts**: `Inter` or `Be Vietnam Pro` (Vietnamese Support)
+
+---
+
+## Usage Patterns (Agent Perspective)
+
+### 1. High-Fidelity Landing Page Cloning
+When a user provides a URL (e.g., LadiPage) and asks to "Clone it":
+1. **Research Phase**: Use `browser_subagent` to extract:
+   - Primary and Accent brand colors.
+   - Hero images, service photos, and icons.
+   - Text headlines and hierarchy.
+2. **Implementation**: Use `interpolate`, `spring`, and `Sequence` to mirror the landing page sections into video scenes.
+3. **Aspect Ratios**: Always offer both 16:9 (Facebook Feed) and 9:16 (TikTok/Reels) to maximize reach.
+
+### 2. Antigravity Premium Styling (UI/UX Pro Max)
+- **Glassmorphism**: Use `backdropFilter: 'blur(20px)'` with thin golden/neon borders.
+- **Staggered Motion**: Map array indices and `frame` to small delays (`i * 10`) for fluid entry of elements.
+- **Micro-animations**: Use `Math.sin(frame/10)` for pulsing CTA buttons or breathing backgrounds.
+
+## Troubleshooting & Rendering
+
+### FFmpeg Installation
+Rendering requires FFmpeg. On macOS:
+```bash
+brew install ffmpeg
+```
+
+### Headless Chrome Error
+If `remotion render` fails with a browser launch error:
+1. Ensure Chrome is installed.
+2. If using Remotion v4.x, ensure `remotion`, `@remotion/cli`, and `@remotion/renderer` are on the latest versions (e.g., `>= 4.0.400`) to support the new Headless Shell.
+3. Pass the executable path if auto-detection fails:
+```bash
+npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+```
+
+### Performance Tip
+Use `npx remotion preview` with different ports (`--port=300x`) to show multiple variations for comparison.
+
+## 2. Comprehensive Module Rules (The Tech)
+
+When building videos, refer to these specific implementation patterns:
+
+### 🎬 Animations & Timing
+- **Interpolate EVERYTHING**: Use `interpolate(frame, [0, 20], [0, 1])` for smooth entries.
+- **Springs**: Use `spring({frame, fps})` for snappy UI elements like buttons or cards.
+- **Sequencing**: Wrap logical scenes in `<Sequence from={...} duration={...}>` to keep the timeline manageable.
+
+### 📝 Captions & Text
+- **TikTok-Style**: Split text into arrays of 3-5 words. Use `display-captions` patterns.
+- **Highlighting**: Change the color of the current word using the `Primary` neon color.
+- **Typography**: Apply `text-shadow` for that glowing neon effect.
+
+### 📊 Charts & Data (For /analyze)
+- **Animated Bars**: Animate the `width` or `height` of bar charts using `interpolate`.
+- **Line Charts**: Use SVG `stroke-dasharray` and `stroke-dashoffset` to "draw" the lines.
+
+### 🌓 Transitions & Scenes
+- **Slide/Fade**: Use `Transitions` patterns for moving between scenes.
+- **Audio Overlap**: Ensure background music ducks slightly when voiceover or primary audio is playing.
+
+### 📦 Assets & Media
+- **Img/Video Components**: ALWAYS use Remotion's specialized components for frame-accuracy.
+- **Lottie**: Use `@remotion/lottie` for complex vector animations (marketing icons, stickers).
+- **Trimming**: Handle `startFrom` and `endAt` props correctly to sync external clips.
+
+---
+
+## 3. How to Use (For Non-Tech Users)
+
+The workflow is designed to be **AI-First**. The user provides the intent, and I (the Agent) do the execution.
+
+### Step 1: Brainstorming (The Prompt)
+- **User**: "Tao muốn làm video ad TikTok cho campaign sale Tết, màu neon, có chữ nhảy kiểu TikTok."
+- **Agent**: Dựa trên intent này, tao sẽ soạn kịch bản nháp (Storyboard) và chọn các rule phù hợp (Animations + Captions + Antigravity Style).
+
+### Step 2: Implementation (The Code)
+- Tao sẽ tự động tạo file `remotion/MyVideo.tsx`.
+- Tao sẽ cấu hình `Composition` trong `remotion/Root.tsx`.
+
+### Step 3: Simple Commands (The Interface)
+Mầy chỉ cần quan tâm đúng 3 việc:
+1.  **Preview**: `npx remotion preview` (Để xem thử trên browser).
+2.  **Edit**: Nếu muốn đổi chữ, chỉ cần nói với tao "Đổi chữ A thành chữ B", tao sẽ tự sửa code.
+3.  **Render**: `npx remotion render <id> out.mp4` (Để lấy file video cuối cùng).
+
+---
+
+## 4. Advanced Production Rules
+
+- **3D Support**: Integrate `Three.js` (Three Fiber) for high-end product showcases.
+- **Metadata**: Dynamically calculate duration based on audio length using `calculate-metadata`.
+- **Fonts**: Load Google Fonts using `@remotion/google-fonts`.
+
+---
+
+> **Note**: This skill acts as my "Brain" for Video. You don't need to read 30 files, I have already "learned" them and will apply them when you request a video.

package/templates/.agent/workflows/campaign.md

@@ -70,11 +70,102 @@ Create campaign assets:
 - Tracking setup
 - Results report
 
+## Step 6: Presentation Builder (Optional)
+
+Ask the user: **"Bạn có muốn tạo file thuyết trình HTML cho campaign này không?"**
+
+If YES, follow these steps:
+
+### 6.1 Build HTML Presentation
+
+Use the `ui-ux-pro-max` skill to create a stunning HTML presentation:
+
+1. Create a single-file HTML presentation with:
+   - Modern dark theme with gradient accents
+   - Slide-based navigation (arrow keys + click)
+   - Progress bar
+   - Touch/swipe support for mobile
+   - All CSS inline (no external dependencies)
+   - **Font selection**: Use Vietnamese-friendly fonts like `Inter`, `Be Vietnam Pro`, or `Roboto` if the content is in Vietnamese to avoid broken characters.
+
+2. Content slides should include:
+   - Title slide with campaign name
+   - Goals & KPIs
+   - Target audience
+   - Key messaging
+   - Marketing channels
+   - Timeline
+   - Content plan
+   - Success metrics
+   - CTA / Next steps
+
+3. Save to `docs/campaign-presentation.html`
+
+### 6.2 Preview Locally
+
+Open the presentation in browser:
+
+```bash
+# macOS
+open docs/campaign-presentation.html
+
+# Linux
+xdg-open docs/campaign-presentation.html
+
+# Windows
+start docs/campaign-presentation.html
+```
+
+### 6.3 Deploy to Internet (Optional)
+
+Ask the user: **"Bạn có muốn đẩy lên internet để chia sẻ không?"**
+
+If YES, use nport to create a public URL:
+
+```bash
+# Install nport if not installed
+npm install -g nport
+
+# Start a local server and expose it
+npx serve docs -l 3000 &
+nport 3000 -s <campaign-name>
+```
+
+This will create a public URL like: `https://<campaign-name>.nport.link`
+
+**Note**: The tunnel remains active for ~4 hours. Perfect for sharing presentations in meetings!
+
+## Step 7: Automated Video Production (Optional)
+
+Ask the user: **"Bạn có muốn tạo video ad tự động cho campaign này không? (TikTok/Reels/Meta)"**
+## Bước 7: Sản xuất Video Tự động (Tùy chọn) ✨
+Dành cho người dùng không rành kỹ thuật, Agent sẽ lo toàn bộ khâu code.
+
+### 7.1 Cách yêu cầu Agent
+Mầy chỉ cần đưa yêu cầu bằng ngôn ngữ tự nhiên. Ví dụ:
+- *"Clone cái landing page này thành video Facebook: [URL]"*
+- *"Tạo một video TikTok giới thiệu tính năng X, phong cách neon, có hoa rơi."*
+- *"Làm một bản 16:9 và một bản 9:16 cho chiến dịch Tết."*
+
+### 7.2 Xem Preview (Cực dễ)
+Sau khi Agent code xong, mầy chỉ cần mở link Localhost mà Agent cung cấp (thường là `http://localhost:3000`).
+- Nhấn **Space** để xem.
+- Kéo thanh Timeline để soi từng frame.
+
+### 7.3 Xuất Video (Render)
+Khi đã ưng ý, mầy chỉ cần bảo Agent: *"Xuất mp4 cho tao"*. 
+- Agent sẽ tự động kiểm tra FFmpeg.
+- Nếu thiếu, Agent sẽ hướng dẫn mầy chạy: `brew install ffmpeg`.
+- Sau đó Agent sẽ tự chạy lệnh render và mở file video lên cho mầy.
+
+**Composition ID mầy cần biết:**
+- Video Facebook (16:9): `JupViecTetAd`
+- Video TikTok/Reels (9:16): `JupViecTetAd916` hoặc `JupViecTikTokAd`
+
 ## Skills Used
 
-- marketing-strategist
-- content-marketing
-- ppc-advertising
 - social-media-expert
 - email-marketing
 - analytics-marketing
+- ui-ux-pro-max
+- video-automation