技能展示 是做什么的？
按类别逐项渲染动画技能展示视频（1080x1080，30fps，约48秒），并生成一个由7条帖子组成的 X 线程，将技能集群映射到具体价值。
快速开始
cd skills-showcase
npm install
npx remotion studio # 在浏览器中预览
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3
输出产物
out/skills-showcase.mp4— X 平台主要上传文件（H.264，约4.7 MB）out/skills-showcase.gif— 备选/预览文件（约7 MB）thread.md— 7条帖子的 X 线程文案
架构
src/
├── index.ts # registerRoot 入口点
├── Root.tsx # 合成注册（1080x1080，30fps，1440帧）
├── SkillsShowcase.tsx # 使用 <Series> 的主时间线
├── data/skills.ts # 类型化数据集：类别、技能、派生汇总
├── scenes/
│ ├── Intro.tsx # 标题 + 副标题 + 统计胶囊（4秒）
│ ├── CategorySection.tsx # 类别标签 + 交错技能标签（每个2.67秒）
│ └── Outro.tsx # 总结指标 + 标语 + 行动号召（4秒）
└── components/
└── SkillChip.tsx # 可复用的带弹簧入场动画徽章
数据模型
编辑 src/data/skills.ts 以添加或移除技能。视频将根据此数据集确定性重新渲染。
- 类别：
{ id, label, color, order } - 技能：
{ slug, categoryId, shortDescription } - 派生数据：
totalSkills，totalCategories，skillsByCategory
动画约定
所有动画仅使用 Remotion 帧驱动模式：
- 使用
useCurrentFrame()+useVideoConfig()处理帧/帧率 - 使用
spring()实现入场（阻尼：200 实现平滑；阻尼：20 + 刚度：200 实现快速） - 使用带 clamp 的
interpolate()处理透明度和平移 - 零 CSS 过渡或 Tailwind 动画工具
时间线节奏
| 场景 | 帧数 | 时长 |
|---|---|---|
| 开场 | 120 | 4.0秒 |
| 15个类别 × 80 | 1200 | 40.0秒 |
| 结尾 | 120 | 4.0秒 |
| 总计 | 1440 | 48.0秒 |
自定义
- 添加类别：在
src/data/skills.ts的categories数组中添加，同时更新Root.tsx的时长 - 更改颜色：每个类别在数据集中都有一个
color十六进制值 - 调整节奏：修改
SkillsShowcase.tsx中的CATEGORY_DURATION - 线程文案：直接编辑
thread.md
线程策略
查看 thread.md 获取完整的7条帖子线程。结构：
- 钩子 + 视频附件
- 为什么技能胜过一次性的提示词
- 意识与记忆集群
- 研究与分析集群
- 全栈实现覆盖
- 利基高信号专业技能
- 行动号召和讨论提示