@nguyenphp/antigravity-marketing 1.0.8 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +4 -2
  2. package/bin/index.js +7 -1
  3. package/package.json +2 -2
  4. package/templates/.agent/skills/video-automation/SKILL.md +62 -82
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 🚀 Antigravity Marketing Kit
2
2
 
3
- > **24 marketing skills, 4 agents, and 4 workflows** for AI-powered marketing with Gemini CLI.
3
+ > **26 marketing skills, 4 agents, and 4 workflows** for AI-powered marketing with Gemini CLI.
4
4
 
5
5
  ## 📋 Table of Contents
6
6
 
@@ -31,6 +31,7 @@ This project is built upon and includes skills from:
31
31
  - 🚀 **[Antigravity Kit](https://github.com/vudovn/antigravity-kit)** - Base CLI structure and core skills
32
32
  - 🎨 **[UI UX Pro Max](https://ui-ux-pro-max-skill.nextlevelbuilder.io/)** - Design intelligence skills (`ui-ux-pro-max`, `frontend-design`, `tailwind-patterns`)
33
33
  - 🛠️ **[ClaudeKit](https://claudekit.cc/)** - Production-ready skills (`seo-fundamentals`, `documentation-templates`)
34
+ - 🎬 **[Remotion Dev Skills](https://github.com/remotion-dev/skills)** - Official Remotion best practices (`remotion-best-practices`)
34
35
 
35
36
  ## 🎥 Video Showcase (Automated via [Remotion](https://www.remotion.dev/))
36
37
 
@@ -40,7 +41,7 @@ This project is built upon and includes skills from:
40
41
  |:---:|:---:|
41
42
  | <video src="https://github.com/nguyenphp/antigravity-marketing/raw/main/docs/assets/videos/antigravity-promo-169.mp4" width="100%" controls></video> | <video src="https://github.com/nguyenphp/antigravity-marketing/raw/main/docs/assets/videos/antigravity-promo-916.mp4" width="100%" controls></video> |
42
43
 
43
- ## 🧠 Skills (25)
44
+ ## 🧠 Skills (26)
44
45
 
45
46
  ### Content & Creative
46
47
  | Skill | Description |
@@ -94,6 +95,7 @@ This project is built upon and includes skills from:
94
95
  | `frontend-design` | Landing page & web design |
95
96
  | `tailwind-patterns` | Utility-first CSS patterns |
96
97
  | `documentation-templates` | Marketing documentation templates |
98
+ | `remotion-best-practices` | **Official Remotion video production rules** |
97
99
 
98
100
  ## 🤖 Agents (4)
99
101
 
package/bin/index.js CHANGED
@@ -29,6 +29,7 @@ const showBanner = () => {
29
29
  ╔══════════════════════════════════════════╗
30
30
  ║ 🚀 ANTIGRAVITY MARKETING KIT CLI 🚀 ║
31
31
  ║ Marketing Skills for AI ║
32
+ ║ Created by nguyenphp ║
32
33
  ╚══════════════════════════════════════════╝
33
34
  `));
34
35
  };
@@ -181,10 +182,15 @@ const initCommand = async (options) => {
181
182
 
182
183
  // Show skills summary
183
184
  console.log(chalk.white('\n📦 Included:'));
184
- console.log(chalk.magenta(' • 17 Marketing Skills'));
185
+ console.log(chalk.magenta(' • 26 Marketing Skills'));
185
186
  console.log(chalk.magenta(' • 4 Specialized Agents'));
186
187
  console.log(chalk.magenta(' • 4 Workflow Commands'));
187
188
  console.log(chalk.gray('────────────────────────────────────────'));
189
+
190
+ console.log(chalk.yellow('\n ⭐ Support the project:'));
191
+ console.log(` Repo: ${chalk.cyan('https://github.com/nguyenphp/antigravity-marketing')}`);
192
+ console.log(` Coffee: ${chalk.cyan('https://www.buymeacoffee.com/nguyenphp')}`);
193
+
188
194
  console.log(chalk.green('\n🎉 Happy marketing!\n'));
189
195
  } catch (error) {
190
196
  spinner.fail(chalk.red(`❌ Error: ${error.message}`));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nguyenphp/antigravity-marketing",
3
- "version": "1.0.8",
3
+ "version": "1.0.11",
4
4
  "description": "Marketing-focused AI agent skills kit for Gemini CLI",
5
5
  "main": "bin/index.js",
6
6
  "type": "module",
@@ -44,4 +44,4 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  }
47
- }
47
+ }
package/templates/.agent/skills/video-automation/SKILL.md CHANGED
@@ -1,117 +1,97 @@
1
1
  ---
2
2
  name: video-automation
3
- description: Automated video production using Remotion, covering all best practices from basics to advanced (3D, Charts, Captions).
3
+ description: Automated video production using Remotion, combining Antigravity aesthetics with official Remotion best practices.
4
4
  allowed-tools: Read, RunCommand, Write
5
5
  ---
6
6
 
7
7
  # Video Automation - The Full Remotion Suite
8
8
 
9
- > This skill integrates the complete Remotion best practices with the Antigravity design system. It allows the agent to build production-grade video ads automatically.
9
+ > This skill combines the **[remotion-best-practices](../remotion-best-practices/SKILL.md)** skill with the Antigravity design system, enabling production-grade video ads.
10
10
 
11
11
  ---
12
12
 
13
- ## 1. Antigravity Core Aesthetics (The Look)
14
-
15
- Always apply these tokens to the Remotion components:
16
- - **Background**: `#0a0a0c`
17
- - **Primary**: `#00f2ff` (Neon Cyan)
18
- - **Secondary**: `#ff00e5` (Neon Pink)
19
- - **Glass**: `rgba(255, 255, 255, 0.05)` with `backdrop-filter: blur(10px)`
20
- - **Fonts**: `Inter` or `Be Vietnam Pro` (Vietnamese Support)
13
+ ## 📚 Required Reading
21
14
 
22
- ---
15
+ For detailed technical implementation, refer to the **`remotion-best-practices`** skill which contains 16 comprehensive rule files:
23
16
 
24
- ## Usage Patterns (Agent Perspective)
17
+ | Core Rules | Description |
18
+ |------------|-------------|
19
+ | `animations.md` | Frame-based animations with `useCurrentFrame()` |
20
+ | `timing.md` | Springs, easing, interpolation curves |
21
+ | `sequencing.md` | `<Sequence>` and `<Series>` patterns |
22
+ | `transitions.md` | Scene transitions with `@remotion/transitions` |
23
+ | `audio.md` | Audio import, trimming, volume control |
24
+ | `videos.md` | Video embedding, looping, speed control |
25
+ | `display-captions.md` | TikTok-style captions with word highlighting |
26
+ | `charts.md` | Animated bar/pie charts |
27
+ | `3d.md` | Three.js integration with `@remotion/three` |
28
+ | `fonts.md` | Google Fonts & Vietnamese font support |
25
29
 
26
- ### 1. High-Fidelity Landing Page Cloning
27
- When a user provides a URL (e.g., LadiPage) and asks to "Clone it":
28
- 1. **Research Phase**: Use `browser_subagent` to extract:
29
- - Primary and Accent brand colors.
30
- - Hero images, service photos, and icons.
31
- - Text headlines and hierarchy.
32
- 2. **Implementation**: Use `interpolate`, `spring`, and `Sequence` to mirror the landing page sections into video scenes.
33
- 3. **Aspect Ratios**: Always offer both 16:9 (Facebook Feed) and 9:16 (TikTok/Reels) to maximize reach.
30
+ ---
34
31
 
35
- ### 2. Antigravity Premium Styling (UI/UX Pro Max)
36
- - **Glassmorphism**: Use `backdropFilter: 'blur(20px)'` with thin golden/neon borders.
37
- - **Staggered Motion**: Map array indices and `frame` to small delays (`i * 10`) for fluid entry of elements.
38
- - **Micro-animations**: Use `Math.sin(frame/10)` for pulsing CTA buttons or breathing backgrounds.
32
+ ## 1. Antigravity Core Aesthetics (The Look)
39
33
 
40
- ## Troubleshooting & Rendering
34
+ Apply these design tokens to all Remotion components:
41
35
 
42
- ### FFmpeg Installation
43
- Rendering requires FFmpeg. On macOS:
44
- ```bash
45
- brew install ffmpeg
36
+ ```tsx
37
+ const ANTIGRAVITY_TOKENS = {
38
+ background: '#0a0a0c',
39
+ primary: '#00f2ff', // Neon Cyan
40
+ secondary: '#ff00e5', // Neon Pink
41
+ glass: 'rgba(255, 255, 255, 0.05)',
42
+ fonts: ['Inter', 'Be Vietnam Pro'],
43
+ };
46
44
  ```
47
45
 
48
- ### Headless Chrome Error
49
- If `remotion render` fails with a browser launch error:
50
- 1. Ensure Chrome is installed.
51
- 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.
52
- 3. Pass the executable path if auto-detection fails:
53
- ```bash
54
- npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
55
- ```
46
+ **Key styling patterns:**
47
+ - **Glassmorphism**: `backdropFilter: 'blur(20px)'` with neon borders
48
+ - **Staggered Motion**: Map array indices to delays (`i * 10`)
49
+ - **Micro-animations**: Use `Math.sin(frame/10)` for pulsing effects
56
50
 
57
- ### Performance Tip
58
- Use `npx remotion preview` with different ports (`--port=300x`) to show multiple variations for comparison.
51
+ ---
59
52
 
60
- ## 2. Comprehensive Module Rules (The Tech)
53
+ ## 2. Usage Patterns
61
54
 
62
- When building videos, refer to these specific implementation patterns:
55
+ ### High-Fidelity Landing Page Cloning
56
+ 1. **Research**: Use `browser_subagent` to extract brand colors, images, headlines
57
+ 2. **Implementation**: Use `interpolate`, `spring`, `Sequence` to animate sections
58
+ 3. **Aspect Ratios**: Always offer 16:9 (YouTube) and 9:16 (TikTok/Reels)
63
59
 
64
- ### 🎬 Animations & Timing
65
- - **Interpolate EVERYTHING**: Use `interpolate(frame, [0, 20], [0, 1])` for smooth entries.
66
- - **Springs**: Use `spring({frame, fps})` for snappy UI elements like buttons or cards.
67
- - **Sequencing**: Wrap logical scenes in `<Sequence from={...} duration={...}>` to keep the timeline manageable.
60
+ ### TikTok-Style Captions
61
+ ```tsx
62
+ // Refer to display-captions.md in remotion-best-practices
63
+ import { createTikTokStyleCaptions } from '@remotion/captions';
64
+ ```
68
65
 
69
- ### 📝 Captions & Text
70
- - **TikTok-Style**: Split text into arrays of 3-5 words. Use `display-captions` patterns.
71
- - **Highlighting**: Change the color of the current word using the `Primary` neon color.
72
- - **Typography**: Apply `text-shadow` for that glowing neon effect.
66
+ ---
73
67
 
74
- ### 📊 Charts & Data (For /analyze)
75
- - **Animated Bars**: Animate the `width` or `height` of bar charts using `interpolate`.
76
- - **Line Charts**: Use SVG `stroke-dasharray` and `stroke-dashoffset` to "draw" the lines.
68
+ ## 3. Quick Commands
77
69
 
78
- ### 🌓 Transitions & Scenes
79
- - **Slide/Fade**: Use `Transitions` patterns for moving between scenes.
80
- - **Audio Overlap**: Ensure background music ducks slightly when voiceover or primary audio is playing.
70
+ For non-tech users, just 3 commands:
81
71
 
82
- ### 📦 Assets & Media
83
- - **Img/Video Components**: ALWAYS use Remotion's specialized components for frame-accuracy.
84
- - **Lottie**: Use `@remotion/lottie` for complex vector animations (marketing icons, stickers).
85
- - **Trimming**: Handle `startFrom` and `endAt` props correctly to sync external clips.
72
+ | Command | Purpose |
73
+ |---------|---------|
74
+ | `npx remotion preview` | Preview in browser |
75
+ | `npx remotion render <id> out.mp4` | Export final video |
76
+ | `--port=300x` | Run multiple previews |
86
77
 
87
78
  ---
88
79
 
89
- ## 3. How to Use (For Non-Tech Users)
90
-
91
- The workflow is designed to be **AI-First**. The user provides the intent, and I (the Agent) do the execution.
80
+ ## 4. Troubleshooting
92
81
 
93
- ### Step 1: Brainstorming (The Prompt)
94
- - **User**: "Tao muốn làm video ad TikTok cho campaign sale Tết, màu neon, có chữ nhảy kiểu TikTok."
95
- - **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).
96
-
97
- ### Step 2: Implementation (The Code)
98
- - Tao sẽ tự động tạo file `remotion/MyVideo.tsx`.
99
- - Tao sẽ cấu hình `Composition` trong `remotion/Root.tsx`.
82
+ ### FFmpeg Installation (macOS)
83
+ ```bash
84
+ brew install ffmpeg
85
+ ```
100
86
 
101
- ### Step 3: Simple Commands (The Interface)
102
- Mầy chỉ cần quan tâm đúng 3 việc:
103
- 1. **Preview**: `npx remotion preview` (Để xem thử trên browser).
104
- 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.
105
- 3. **Render**: `npx remotion render <id> out.mp4` (Để lấy file video cuối cùng).
87
+ ### Headless Chrome Error
88
+ ```bash
89
+ npx remotion render <id> --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
90
+ ```
106
91
 
107
92
  ---
108
93
 
109
- ## 4. Advanced Production Rules
110
-
111
- - **3D Support**: Integrate `Three.js` (Three Fiber) for high-end product showcases.
112
- - **Metadata**: Dynamically calculate duration based on audio length using `calculate-metadata`.
113
- - **Fonts**: Load Google Fonts using `@remotion/google-fonts`.
114
-
115
- ---
94
+ ## Credits
116
95
 
117
- > **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.
96
+ - **Technical Rules**: Based on [remotion-dev/skills](https://github.com/remotion-dev/skills)
97
+ - **Design System**: Antigravity Marketing Kit aesthetics