06d - Remotion Skills 与领域 Skills

┌─────────────────────────────────────────┐
│  基础设施层（Infrastructure Layer）       │
│  项目初始化、依赖管理、视频参数配置         │
├─────────────────────────────────────────┤
│  内容创作层（Content Creation Layer）     │
│  组件设计、动画逻辑、样式、音频同步、数据绑定 │
├─────────────────────────────────────────┤
│  渲染层（Rendering Layer）               │
│  实时预览、最终导出、并行渲染              │
└─────────────────────────────────────────┘

npx create-video@latest

# 方式一：使用 Remotion CLI
npx remotion skills add
 
# 方式二：使用通用 Skills CLI
npx skills add remotion-dev/skills

cd my-video
npm install
npm run dev

cd my-video
claude

my-video/
├── .claude/
│   └── skills/           # Remotion Skills 文件
│       └── remotion/
│           └── SKILL.md  # 视频制作指令和最佳实践
├── src/
│   ├── Root.tsx          # 视频入口组件
│   ├── Composition.tsx   # 视频合成定义
│   └── components/       # 自定义视频组件
├── public/               # 静态资源（图片、字体等）
├── package.json
└── remotion.config.ts    # Remotion 配置

创建一个 [时长] 秒的 [类型] 视频：
- 标题文字："[标题内容]"
- 背景：[颜色/渐变/图片描述]
- 动画效果：[淡入/滑动/缩放/弹跳等]
- 文字样式：[字体大小/颜色/位置]
- 额外元素：[图标/图表/装饰等]

请使用 TailwindCSS 进行样式控制，确保动画流畅。

创建一个 10 秒的产品介绍视频：
- 标题："AI Agent 实战手册"，大号白色文字
- 背景：深蓝色到紫色的渐变
- 动画：标题从底部滑入并淡入，持续 2 秒
- 副标题："从入门到精通的完整指南"，在标题出现 1 秒后淡入
- 底部添加一个发光的按钮效果："立即阅读"

自然语言 Prompt
    ↓
AI 编码助手（Claude Code / Kiro）
    ↓ 加载 Remotion Skills
理解视频需求 → 生成 React/TypeScript 代码
    ↓
Remotion Studio 实时预览
    ↓ 用户反馈 → AI 迭代修改
满意后渲染导出
    ↓
MP4 / WebM 视频文件

# 调整动画时序
"把标题的淡入时间从 2 秒改为 1.5 秒，让它更紧凑"

# 修改视觉风格
"背景换成深色渐变，文字改为亮绿色，科技感更强一些"

# 添加新元素
"在视频末尾添加一个 3 秒的 CTA 画面，显示二维码和联系方式"

# 修复问题
"文字在移动端看起来太小了，把字号放大 50%"

步骤 1：准备数据源（CSV/JSON/数据库）
  → 产品名称、价格、图片 URL、特性描述

步骤 2：创建视频模板（带变量占位符）
  → AI 生成一个参数化的 React 组件

步骤 3：编写批量渲染脚本
  → 遍历数据行，每行生成一个视频

步骤 4：执行批量渲染
  → 500 个产品视频，几小时完成（传统方式需要数周）

通才 AI + 领域 Skill = 领域专家 AI

例如：
Claude Code + Remotion Skills = 视频制作专家
Claude Code + 法律合同 Skill = 合同审查专家
Claude Code + 金融建模 Skill = 财务分析专家
Kiro + DevOps Skill = 基础设施专家

┌──────────────────────────────────────────┐
│  第 1 步：领域知识提取                      │
│  识别领域中的核心概念、工作流、最佳实践       │
├──────────────────────────────────────────┤
│  第 2 步：任务分解                          │
│  将领域工作拆解为 AI 可执行的离散任务         │
├──────────────────────────────────────────┤
│  第 3 步：指令编写                          │
│  将知识和任务转化为 SKILL.md 中的指令         │
├──────────────────────────────────────────┤
│  第 4 步：模板和资源                        │
│  创建辅助文件（模板、清单、参考文档）          │
├──────────────────────────────────────────┤
│  第 5 步：测试和迭代                        │
│  在真实场景中测试，根据反馈优化               │
└──────────────────────────────────────────┘

---
name: [领域]-[功能]
description: [一句话说明用途和触发场景，包含领域关键词]
---
 
# [领域名称] 专业指令
 
## 领域上下文
[技术栈、行业背景、关键术语定义]
 
## 核心工作流
1. [步骤一：输入分析]
2. [步骤二：处理逻辑]
3. [步骤三：输出生成]
4. [步骤四：质量检查]
 
## 领域规则和约束
- [必须遵守的行业规范]
- [安全和合规要求]
- [质量标准]
 
## 输出格式
[期望的输出结构和格式说明]
 
## 常见错误和注意事项
- [领域特有的陷阱]
- [容易被忽略的细节]

---
name: marketing-content
description: Generate brand-consistent marketing content including social media posts, email campaigns, and ad copy. Use when creating marketing materials, writing copy, or planning content calendars.
---
 
# 营销内容生成指令
 
## 品牌上下文
- 品牌调性：专业但亲切，技术但不晦涩
- 目标受众：25-45 岁技术从业者
- 品牌色：#1a73e8（主色）、#34a853（辅色）
- 禁用词汇：最好的、第一、无与伦比（避免绝对化表述）
 
## 内容类型工作流
 
### 社交媒体帖子
1. 确认平台（Twitter/LinkedIn/微信公众号）
2. 根据平台调整字数和风格
3. 包含 CTA（行动号召）
4. 建议配图方向
 
### 邮件营销
1. 确认邮件类型（欢迎/促销/教育/召回）
2. 编写主题行（A/B 测试版本）
3. 正文遵循 AIDA 框架
4. 包含退订链接提示
 
## 质量检查清单
- [ ] 符合品牌调性
- [ ] 无禁用词汇
- [ ] CTA 明确
- [ ] 适合目标受众

---
name: devops-infra
description: Generate and review infrastructure code including Terraform modules, Dockerfiles, CI/CD pipelines, and Kubernetes manifests. Use when working on deployment, infrastructure, or DevOps tasks.
---
 
# DevOps 基础设施指令
 
## 技术栈
- 云平台：AWS（主要）、GCP（辅助）
- IaC：Terraform 1.x + Terragrunt
- 容器：Docker + Kubernetes (EKS)
- CI/CD：GitHub Actions
- 监控：Prometheus + Grafana
 
## 安全约束（最高优先级）
- 所有 S3 bucket 必须启用加密和版本控制
- 安全组禁止 0.0.0.0/0 入站规则（除 ALB 的 80/443）
- 密钥通过 AWS Secrets Manager 管理，禁止硬编码
- 所有资源必须有 Environment 和 Team 标签
 
## Terraform 模块生成流程
1. 确认资源类型和需求
2. 生成模块代码（variables.tf、main.tf、outputs.tf）
3. 包含 README.md 说明
4. 添加基本的 validation 块
 
## Dockerfile 最佳实践
- 使用多阶段构建
- 非 root 用户运行
- 最小化层数
- 固定基础镜像版本（禁止 :latest）

---
name: data-analysis
description: Assist with data exploration, visualization, and report generation using Python, pandas, and matplotlib/plotly. Use when analyzing datasets, creating charts, or generating data reports.
---
 
# 数据分析指令
 
## 技术栈
- Python 3.11+、pandas、numpy
- 可视化：matplotlib、seaborn、plotly
- 统计：scipy、statsmodels
- 报告：Jupyter Notebook
 
## 分析工作流
1. 数据加载和初步探索（shape、dtypes、describe、缺失值）
2. 数据清洗（处理缺失值、异常值、类型转换）
3. 探索性分析（分布、相关性、分组统计）
4. 可视化（选择合适的图表类型）
5. 洞察总结（用非技术语言描述发现）
 
## 可视化规范
- 中文标签和标题
- 色盲友好的配色方案
- 图表必须有标题、轴标签、图例
- 数值保留 2 位小数
 
## 输出格式
- 代码：带注释的 Python 代码块
- 图表：内联显示 + 保存为 PNG
- 报告：Markdown 格式，包含关键发现和建议

# 从 GitHub 安装（通用方式）
npx skills add [github-user]/[repo-name]
 
# 示例：安装 Remotion 广告视频 Skill
npx skills add maartenlouis/remotion-ads
 
# 示例：安装 ElevenLabs 配音 Skill
npx skills add maartenlouis/elevenlabs-remotion-skill

.claude/skills/legal-review/
├── SKILL.md              # 核心指令（< 3000 tokens）
├── contract-types.md     # 合同类型参考（按需加载）
├── clause-library.md     # 条款模板库（按需加载）
├── compliance-rules.md   # 合规规则（按需加载）
└── report-template.md    # 审查报告模板

## 参考资源
- 合同类型定义见 [contract-types.md](contract-types.md)
- 标准条款库见 [clause-library.md](clause-library.md)

# ❌ 太模糊——AI 不知道何时触发
description: 帮助处理法律文档
 
# ✅ 具体明确——包含触发关键词和适用范围
description: Review and draft legal contracts, NDAs, and service agreements. 
  Analyze clause risks, check compliance with GDPR and local regulations. 
  Use when working on legal documents, contract templates, or compliance reviews.

Steering（始终生效的约束）
  → "所有合同必须包含数据保护条款"
  → "金融计算必须保留 4 位小数"

Skills（按需加载的能力）
  → 合同审查 Skill：提供审查流程和条款库
  → 财务建模 Skill：提供模型模板和公式

Hooks（事件驱动的自动化）
  → 合同文件保存时自动触发合规检查
  → 财务报表生成后自动运行数据验证

## 质量检查（生成内容前必须确认）
 
### 法律领域
- [ ] 所有条款引用了正确的法律法规版本
- [ ] 双方权利义务对等
- [ ] 包含争议解决条款
 
### 金融领域
- [ ] 数值计算已交叉验证
- [ ] 风险提示已包含
- [ ] 符合监管报告格式
 
### 医疗领域
- [ ] 不包含诊断建议（AI 不应替代医生）
- [ ] 药物信息来源已标注
- [ ] 患者隐私信息已脱敏

# 将 Skills 纳入 Git 管理
git add .claude/skills/ .kiro/skills/
git commit -m "feat: add legal-review skill v1.0"
 
# 使用语义化版本
---
name: legal-review
metadata:
  version: "1.2.0"
  author: legal-team
  last-updated: "2026-02"
---

请帮我设计一个 [领域名称] 的 Agent Skill：

## 领域背景
- 行业：[具体行业]
- 核心任务：[AI 需要完成的主要任务]
- 技术栈：[相关工具和技术]

## 需求
- 触发场景：[什么时候应该加载这个 Skill]
- 输入：[用户通常提供什么信息]
- 输出：[期望的输出格式和内容]
- 约束：[行业规范、安全要求、合规要求]

## 辅助资源
- 是否需要模板文件：[是/否]
- 是否需要参考文档：[是/否]
- 是否需要配套 Steering：[是/否]
- 是否需要配套 Hooks：[是/否]

请生成完整的 SKILL.md 和所有辅助文件。

核心概念：MRR、ARR、Burn Rate、Runway、CAC、LTV、Churn Rate
工作流：数据收集 → 指标计算 → 图表生成 → 报告撰写
最佳实践：同比/环比对比、趋势分析、异常标注
约束：数值精确到分、百分比保留 1 位小数

.claude/skills/financial-report/
├── SKILL.md
├── metrics-definitions.md
├── report-template.md
└── chart-specs.md

---
name: financial-report
description: Generate monthly investor reports with SaaS metrics analysis, 
  revenue breakdown, expense tracking, and trend visualization. 
  Use when creating financial reports, analyzing SaaS metrics, 
  or preparing investor updates.
metadata:
  version: "1.0"
  author: finance-team
---
 
# 月度财务报告生成指令
 
## 上下文
- 公司类型：B2B SaaS
- 报告频率：月度
- 受众：投资人和董事会
- 数据源：Stripe（收入）、QuickBooks（支出）、数据库（用户指标）
 
## 核心指标定义
详见 [metrics-definitions.md](metrics-definitions.md)
 
## 报告生成流程
1. 确认报告月份和数据范围
2. 计算核心 SaaS 指标（MRR、Churn、CAC、LTV）
3. 生成收入和支出分析
4. 创建趋势图表（详见 [chart-specs.md](chart-specs.md)）
5. 按模板格式输出报告（详见 [report-template.md](report-template.md)）
6. 标注异常数据和关键洞察
 
## 数值规范
- 金额：保留 2 位小数，千位分隔符
- 百分比：保留 1 位小数
- 同比/环比：标注增减方向和幅度
- 异常值：偏离均值 2 个标准差以上需标注

---
inclusion: always
---
 
# 财务数据准确性规则
- 所有金额计算必须使用整数（分）避免浮点误差
- 报告中的数据必须标注数据来源和截止日期
- 预测数据必须明确标注为"预测"而非"实际"
- 禁止在报告中使用"保证"、"确定"等绝对化表述