前几天帮朋友调一个视频化改版的组件库他问了我一句话你们前端平时说的Skills到底是个什么东西我跟他说你去看我打包的那个技能包就明白了——React管界面结构Tailwind管样式系统Remotion管动态视频输出三个东西揉进同一个技能目录AI助手在工作流里直接调用这就是Skills。这次我把整套集成过程完整记录下来从Skills机制到底层原理从项目搭建到踩坑复盘适合正在做前端基础建设、组件可视化、自动化视频生成方向的开发者参考尤其是想把ReactTailwindRemotion这套组合封装成可复用技能包的人。1. 为什么偏偏是React、Tailwind、Remotion这个组合先说结论这三样东西放在一起不是流行什么就堆什么而是它们在技能包场景里各管一段恰好覆盖了前端技能体系里最常用的三层能力。1.1 三者各自解决什么问题React负责组件化。在Skills体系里AI助手要执行的任务往往不是单行命令而是一连串有状态、有交互、有生命周期的操作。用React组织这些操作可以把视频画布、控制面板、参数表单拆成独立组件每个组件负责自己的渲染逻辑和状态管理。后续技能包要扩展新的功能加一个组件就行不会把代码全堆在一个文件里。Tailwind负责样式一致性。做技能包最怕什么最怕几百句提示词生成出来的界面每次都长得不一样。Tailwind用原子类的方式把间距、颜色、字号、圆角这些视觉参数全部约束在一套设计令牌里AI生成组件的时候按令牌类名拼装出来的视觉风格稳定得多。我在实际项目里对比过用Tailwind之前AI生成的界面十次有八次颜色对不上用了Tailwind之后视觉基本一次通过。Remotion负责视频输出。这是这个组合里最大的增量价值。传统前端技能包能生成页面、生成代码、生成文档但很少能直接产出视频。Remotion的底层思路是用React组件描述每一帧画面把前端组件变成可编程的视频帧源这意味着可以用同一套React代码既渲染Web界面又输出MP4视频。Skill加了这个能力后可以批量生成产品演示视频、组件使用教程、数据可视化短片这是普通前端技能包做不到的。1.2 Skills在整个技术栈里的位置我们平时写一个前端项目关注的是代码能不能跑起来。但Skills的场景不太一样它不只是一个代码仓库而是一套能被AI助手识别、加载、调用的能力封装。它在技术栈里的位置更像中间层往下对接React、Tailwind、Remotion这些具体实现往上对接Agent的意图识别和任务编排。理解这个位置很关键因为集成方式和传统项目完全不同。传统项目你只需要让代码跑起来而Skills集成必须做到三个一致目录结构要能被助手识别、配置描述要能触发正确的调用、输出产物要稳定可预期。也就是说ReactTailwindRemotion这套组合真正的集成难点不在框架本身而在它们如何被组织进一个Skill标准的容器里。1.3 一键集成到底解决了什么痛点没有做一键集成之前我经历了很长一段拆了装、装了拆的反复过程。每次新开一个视频化组件项目都要手工执行Vite初始化、安装React依赖、配置Tailwind、引入Remotion CLI重复劳动至少半小时而且环境不同配置还会跑偏。一键集成的价值是把这套动作固化成一个脚本或者一套模板执行一次初始化命令项目骨架、依赖版本、配置文件、示例组件全部就位技能包目录和描述文件也同步生成。这里面的核心不是少敲几条命令而是把容易出错的版本匹配、路径配置、构建参数全部收敛到一个经过验证的默认值上让团队里的任何人都能稳定复现同一套技能环境。2. 先理解Skills机制的底层逻辑在动手写React组件之前我建议先把Skills这套机制的底层逻辑搞清楚。很多人在集成时栽跟头不是因为React、Tailwind、Remotion本身难用而是根本没理解Skills的加载和调用方式。2.1 Skills的本质把一次对话能力固化成可复用技能简单说Skills就是把一组指令、代码、资源和元数据打包在一起放进一个特定目录让AI助手在对话中能自动识别并调用。它跟普通提示词的最大区别在于提示词是即兴的每次都要重新组织语言Skills是固化的把完整的工作流写进一个结构里下次直接按这个结构执行。我把Skills理解成一个技能说明书可运行代码的组合包。说明书部分让AI知道这个技能是干嘛的、在什么场景下触发、需要哪些输入参数可运行代码部分是实际的React组件、Tailwind配置和Remotion工程说明书里的步骤指引AI去调用这些代码完成任务。两者缺一不可光有说明书没有代码是空壳光有代码没有说明书助手不知道怎么用。2.2 陌讯体系的Skills目录与配置文件陌讯Skills的目录结构通常遵循一个约定核心是一个技能目录加一个描述文件。my-skill/ ├── SKILL.md ├── assets/ ├── components/ │ └── React组件与Remotion合成组件 ├── styles/ │ └── Tailwind配置与全局样式 └── scripts/ └── 构建、渲染、集成脚本SKILL.md是技能包的入口采用YAML前置元数据加Markdown正文的结构。YAML部分声明技能的名称、描述、适用场景、所需依赖Markdown正文则用自然的指令描述当用户需要生成视频时按以下步骤操作。AI助手加载技能包时先读前置元数据做匹配匹配成功再把正文指令注入到工作上下文里。2.3 和普通npm包、插件、模板的区别做个对比你就清楚了。npm包解决的是代码能不能复用它只管你import的部分插件解决的是已有系统能不能扩展能力模板解决的是项目初始结构能不能跳过。而Skills解决的是AI能不能理解并执行一套完整工作流。差异点在于npm包没有告诉AI该怎么用自己插件和模板也没有面向AI的操作说明。Skills在提供代码的同时还提供了面向AI语义的操作上下文。这是它能够成为前端自动化基础设施的关键也是为什么我在做集成时把SKILL.md的撰写放在和代码实现同等重要的位置。3. 初始化工程目录规划与依赖安装理解了机制之后就开始搭工程。这一步不复杂但顺序很讲究我按我验证过的流程来讲。3.1 项目骨架设计我采用的是前端项目与技能目录同仓的方案这样代码和Skills配置能保持一致修改代码后技能包同步更新不会出现技能包还是旧逻辑的情况。frontend-skill/ ├── SKILL.md ├── package.json ├── vite.config.ts ├── tailwind.config.js ├── src/ │ ├── main.tsx │ ├── App.tsx │ ├── components/ │ │ ├── ui/ # React基础组件 │ │ ├── video/ # Remotion合成组件 │ │ └── controls/ # 参数控制面板 │ ├── styles/ │ │ └── global.css │ └── remotion/ │ ├── Root.tsx │ └── index.ts └── scripts/ └── build-skill.mjs把Remotion目录放进src里而不是单独建工程是为了让React组件和视频组件共享同一套Tailwind样式和工具函数。很多人喜欢把Remotion工程独立出来但我测试下来独立工程在两套代码间同步样式变量很痛苦。3.2 依赖安装与版本匹配我当前验证过的最稳组合是React 18.3.1、Tailwind 3.4.x、Remotion 4.0.x。React 19虽然已经发布但Remotion官方对React 19的支持当时还在适配期技能包场景求稳不求新所以我继续用18。npm create vitelatest frontend-skill -- --template react-ts cd frontend-skill npm install npm install tailwindcss3.4.4 postcss autoprefixer npm install remotion remotion/cli npx tailwindcss init -p这里有个容易忽略的点npx tailwindcss init -p会同时生成tailwind.config.js和postcss.config.js。很多人只初始化Tailwind忘了PostCSS配置结果样式死活不生效。再检查一下package.json里的构建脚本Vite默认的build命令在Remotion工程里可能不够用我一般加一个render命令。3.3 配置文件的先后顺序配置顺序上我的经验是先配Tailwind再配Remotion最后配Vite。原因是Tailwind的样式是全局底座Remotion组件写完后需要样式支撑才能看到效果而Vite的路径别名和构建配置直接影响前两者的调试体验。tailwind.config.js里content字段必须把Remotion的目录也加进去export default { content: [ ./index.html, ./src/**/*.{js,ts,jsx,tsx}, ], theme: { extend: { colors: { brand: { 50: #eff6ff, 500: #3b82f6, 900: #1e3a8a } } } }, plugins: [] }当时我漏掉./src/**/*.{js,ts,jsx,tsx}里的tsx后缀结果所有React组件里的类和样式全部失灵排查了半天。检查了一遍是content匹配问题把ts,tsx补进去就好了。建议你也检查一遍这个字段这是Tailwind集成里最常见的坑。4. Tailwind与React组件的样式体系对接工程搭好后进入实际编码环节。这部分的重点不是写几个类名而是让Tailwind在React组件和Remotion组件内部都能稳定工作。4.1 全局样式的注入方式在src/styles/global.css里先引入Tailwind的三层指令。顺序不能换base层在中间components层和utilities层在后面否则层叠顺序会乱。tailwind base; tailwind components; tailwind utilities; layer base { body { apply bg-slate-50 text-slate-900 antialiased; } } layer components { .btn-primary { apply inline-flex items-center justify-center rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-brand-900 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2; } }把按钮、卡片、输入框这些高频组件的样式写在layer components里组件代码里只需要写classNamebtn-primary。这个做法在技能包场景里特别有用因为AI生成界面时只要记住几个语义类名不用每次都组织一长串原子类生成的代码可读性和稳定性都高很多。4.2 主题令牌与多态组件的配合做技能包还要考虑主题可配置性。我在Tailwind的extend里定义品牌色后又在CSS变量层做了一层映射把颜色、间距、圆角的CSS变量暴露出来。这样技能被不同项目复用时只改CSS变量就能整体换肤不用进组件里去翻代码。:root { --brand-primary: 59 130 246; --brand-dark: 30 58 138; }这里用空格分隔的RGB分量配合Tailwind的rgb(var(--brand-primary) / alpha-value)写法透明度控制才正常。如果你直接存成十六进制字符串后面想通过bg-opacity-50之类的类名控制透明度时会失效。4.3 样式作用域与技能包的隔离策略技能包被AI助手加载后可能会在多个项目、多个页面里被执行。如果样式是全局的很容易污染宿主环境。我现在的做法是给核心组件的最外层容器加一个固定的前缀类名比如ms-skill-root然后所有Tailwind类都通过CSS层叠写在这个容器内部。不过要说明白Tailwind默认不是真正的CSS隔离方案。严格意义上的隔离需要用scope或者CSS Modules但在技能包场景里用前缀命名加层叠控制已经能解决90%以上的冲突问题。我个人是能接受这个方案的毕竟技能包本身不是给用户直接访问的高风险页面它更多是工作在Agent的执行环境里。5. Remotion视频能力的接入Remotion是整个组合里最特别的一环。它的能力接入逻辑和普通前端组件完全不同我来拆开讲。5.1 Remotion的基本模型Remotion的核心思想是用React组件描述一帧画面然后通过帧数、时间、动画状态驱动组件重新渲染。它有四个关键概念Composition是视频合成的根组件Sequence是时间序列片段useCurrentFrame拿到当前帧号useVideoConfig拿到视频的总帧数和尺寸。import { Composition, useCurrentFrame, useVideoConfig } from remotion; const MyVideo () { const frame useCurrentFrame(); const { fps, durationInFrames } useVideoConfig(); return ( div classNameflex h-full w-full items-center justify-center h1 classNamebg-gradient-to-r from-brand-500 to-brand-900 bg-clip-text text-6xl font-bold text-transparent Hello Skills {frame} /h1 /div ); }; export const RemotionRoot: React.FC () { return ( Composition idMyVideo component{MyVideo} durationInFrames{150} fps{30} width{1920} height{1080} / ); };这里可以看到Tailwind类直接用在视频组件里背景渐变、字号、透明文字色都是Tailwind的类名。这就是我之前强调共享样式的意义所在。5.2 在React组件里调用Remotion渲染实际的技能包通常分两块一块是人物展示界面供用户在页面上调整参数一块是后台渲染逻辑负责把参数传到Remotion并输出视频。二者通过一个状态层连接。我给的方案是把参数表存在React的状态里渲染时再拼成Remotion的props传入。这样用户在前端拖拽参数点击导出React把参数序列化再调用渲染脚本。const [videoProps, setVideoProps] useState({ title: React Tailwind Remotion, subtitle: 一键集成陌讯Skills, color: #3b82f6 }); const handleExport async () { const result await window.api.renderVideo(videoProps); console.log(渲染完成:, result); };通过预注册的命令行工具执行实际渲染。这个分层的好处是界面渲染和视频渲染解耦用户操作界面时不卡顿真正跑视频编码的是独立进程。5.3 视频帧与组件状态的同步体验做复杂点儿的视频时比如进度条、数字滚动、字幕推进要用到Remotion的插值和序列机制。例如做一个数字从0增长到100的动画const frame useCurrentFrame(); const { durationInFrames } useVideoConfig(); const progress Math.round(interpolate(frame, [0, durationInFrames], [0, 100]));这段代码里interpolate把帧数映射成数值区间配合Tailwind的进度条宽度类来实现平滑动画。需要特别注意的是不要在视频组件里使用React的useEffect去做异步请求或者状态更新因为Remotion的渲染进程是按帧执行的异步操作会导致帧内容不确定渲染结果每次都不一样。视频组件要写成纯函数式同样的props进来每一帧的输出完全一致。这个纯函数式渲染原则是视频能力稳定输出的核心。我见过不少人把数据请求写在组件里结果渲染时一半帧有数据一半没有最后把数据请求移到渲染前一步先拉数据后跑渲染问题立刻消失。6. 一键集成脚本与Skill配置生成现在到了一键集成这个标题的落点。前面所有准备工作最终都要通过一个脚本固化成可复用的能力。6.1 设计一个可复用的集成脚本我写了一个build-skill.mjs脚本放在scripts目录下。它做四件事校验环境依赖、生成技能目录骨架、写入SKILL.md描述文件、执行一次试渲染验证环境。import fs from node:fs; import path from node:path; import { execSync } from node:child_process; const ROOT process.cwd(); const SKILL_DIR path.join(ROOT, .skills, frontend-video); // 校验Node版本 const nodeMajor Number(process.versions.node.split(.)[0]); if (nodeMajor 18) { console.error(Node.js 版本过低需要 18); process.exit(1); } // 生成技能目录 fs.mkdirSync(path.join(SKILL_DIR, components), { recursive: true }); // 生成 SKILL.md const skillContent --- name: frontend-video description: 基于 React Tailwind Remotion 的前端视频技能包用于生成组件演示视频、产品介绍视频、数据可视化动画。 triggers: - 创建视频 - 渲染组件演示 - 生成产品介绍 version: 1.0.0 --- # Frontend Video Skill 当用户请求生成视频时按以下步骤操作 1. 读取 src/components/video 下的组件列表 2. 确认需要渲染的组件与参数 3. 调用 npm run render 输出视频 ; fs.writeFileSync(path.join(SKILL_DIR, SKILL.md), skillContent); // 执行一次试渲染 execSync(npm run render, { stdio: inherit }); console.log(Skill 集成完成所有验证通过);这个脚本的核心思路是把整个集成过程变成可重复执行的操作。团队里任何人拿到这个脚本执行一下就能得到完全一样的技能环境不会因为个人操作习惯不同而出现偏差。6.2 配置文件的动态生成Skill的配置还有个细节版本号、作者、仓库地址这类元信息是每次发版都要变的写死在SKILL.md里很不方便。我让脚本从package.json里读取这些字段动态往SKILL.md里填const pkg JSON.parse(fs.readFileSync(path.join(ROOT, package.json), utf-8)); const skillContent --- name: frontend-video version: ${pkg.version} author: ${pkg.author || unknown} description: ${pkg.description || 基于 React Tailwind Remotion 的前端视频技能包} ... ;这样每次版本迭代只需要更新package.json重新跑一次脚本技能包就同步到最新。这个细节在实际团队协作里特别管用每个人都从同一个package.json源读信息技能包的信息永远不会落后于代码库。6.3 自动化流程的验证与输出脚本最后一步我强烈建议做一次试渲染不要省。原因很简单这个脚本的用途是保证环境可用如果脚本运行完得到一个看似成功但实际渲染不了的结果那坑的是后面所有使用技能包的AI任务。试渲染的内容我用的是一个2秒、320x240分辨率的小视频参数都设到最低避免耗时过长。只要这个小视频能成功跑出来说明React组件能编译、Tailwind样式能注入、Remotion渲染管线正常技能包的核心链路已经通了。我在项目里实际执行一次大概需要20秒左右代价很小但每次集成完心里都有底。7. 实测踩坑记录从环境差异到渲染不达预期这部分我不打算写成常规的注意事项因为很多坑不对着真实报错根本讲不清。我挑几个让我印象最深的记录一下每个都有完整的排查链路。7.1 Tailwind内容扫描漏掉tsx后缀的隐蔽故障第一次集成完成后页面上一片光秃秃的按钮没有背景色、文字没有字号整个界面回到了纯文本状态。我第一反应是postcss配置没生效但查了一圈postcss.config.js和vite.config.ts都正常。后来打开浏览器开发者工具看网络请求发现global.css里根本没有生成工具类。我赶紧看tailwind.config.js的content字段当时写的是[./index.html, ./src/**/*.{js,ts,jsx}]漏了tsx。因为项目完全用TypeScript写组件所有组件文件都是tsx后缀Tailwind扫描目录时一个都没匹配上自然一个类名都不会生成。这个故障的特点是服务进程不会报错Vite编译也正常就是样式缺失。排查建议是直接去看构建后的CSS文件里有没有生成工具类没有的话先检查content字段。这也是每个TSX项目初始化Tailwind后必查的第一项。7.2 Remotion渲染时的静态资源绝对路径问题接着遇到的是视频里引用的Logo图片渲染不出来。在开发模式下图片显示正常浏览器访问也正常但用npm run render导出MP4后视频里的Logo位置是空白。排查过程先看Remotion的日志提示找不到/logo.png这个路径。原因是Remotion渲染走的不是Vite dev server它需要用绝对文件路径或者显式的静态文件映射来访问public目录的资源。我在组件里写的img src/logo.png在开发环境被Vite处理了但在Remotion的node渲染环境里这个路径没有对应的服务去解析。修复方式有两种一是在Remotion的render配置里注册静态文件让/logo.png映射到public/logo.png二是组件里改用staticFile()方法引用资源。我用的第二种因为标准做法最直接改一行代码就好import { staticFile } from remotion; img src{staticFile(logo.png)} /这个问题提醒我同一个组件要同时兼容Web预览和视频渲染资源引用方式必须按Remotion的标准写不能假设开发环境的便利性在渲染环境里也存在。7.3 React StrictMode与Remotion动画状态的拉扯这是个比较冷门的坑但踩一次就足够让人头疼。开发模式一切正常动画流程顺畅可是一执行渲染视频里所有动画全部错位数字跳变、进度条闪烁。我打开控制台看到Remotion的警告The component is rendering in StrictMode, which may cause duplicate invocations. 一下子明白了React 18的StrictMode在开发环境下会故意重复挂载组件用来暴露副作用。浏览器预览时这个重复挂载最多有点性能损耗但在Remotion的按帧渲染机制里重复挂载导致组件内部状态被重置动画就会错乱。解决方案很简单暂时关闭入口文件里的StrictMode包装或者在Remotion渲染进程里用非Strict版本渲染。我在main.tsx里把StrictMode移除视频动画立即恢复正常。这不是说StrictMode不好而是视频渲染这种按帧执行的场景对外部包装比较敏感需要特别注意。7.4 修改SKILL.md后Agent不认新指令的问题这是使用环节的坑。有一次我更新了SKILL.md里的操作步骤加了两个新的触发场景但实际调用技能包时AI助手还是按旧的方式执行。起初我以为是文件没有保存成功反复确认没问题后来反应过来这应该是缓存问题。很多助手在会话开始时就加载了技能包的内容整个会话期间不会重新读取SKILL.md。排查和解决方式我先把技能包在会话里完全移除新开一个会话加载果然就按新的指令来了。这个经验告诉我们调试技能包时不要试图在同一个会话里反复修改验证一次会话对应一次加载。改完SKILL.md就新开会话效率反而更高问题定位也更准确。同时也建议在SKILL.md顶部加一个last-updated字段方便确认加载的版本到底是不是最新的。8. 这个技能包落地后能做什么写到这里简单举几个我实际使用中验证过的场景大家可以顺着这些方向去扩展。8.1 组件库视觉回归视频化以前组件库改版后验收只能靠人肉点击看效果。我把组件库的每个核心组件写成了Remotion的演示场景改版后自动渲染一段所有组件状态的切换视频从按钮hover到弹窗动画全部录进去。这个视频可以直接提交给设计和测试团队审阅比截图和静态文档直观得多。8.2 数据参数批量可视化结合Tailwind的预定义颜色和Remotion的逐帧渲染我给一个运营团队做过数据周报视频的技能包。输入JSON数据脚本自动调React计算布局、生成图表动画最后输出一支一分钟的数据解读视频。这里数据的预处理在React层做类型安全性和可排查性都很好。8.3 前端知识可视化速览还有一次我把React生命周期相关的知识整理成了一套可交互的动画视频组件。用户输入一个主题比如React Fiber的调度过程技能包自动选择一个适合的演示模板用React组件绘制流程节点用Remotion推进动画输出一段教学视频。这个方向特别适合技术培训和面试准备的场景把原本枯燥的文字变成动态演示。说回前面那个朋友的问题Skills到底是什么我现在觉得答案不在定义里而在怎么用。把React的组件化、Tailwind的样式约束、Remotion的视频输出能力整合进一个能被AI直接调用的技能包这件事本身已经超越了单纯写代码的范畴更像是在搭一套前端自动化的基础设施。我在实际使用中养成的一个习惯是每次给技能包加新功能都先更新SKILL.md再改代码。别小看这个顺序因为AI助手执行任务时完全依赖技能描述去理解代码描述不准确再好的代码也白搭。反过来描述准确了AI生成的调用方式会越来越贴近组件原本的设计意图。如果你也在做类似的前端Skills集成建议你也试试这个先描述、后实现的思路效果很可能超出预期。