onboarding-navigator
Guia mestre do Hub de Skills. Fornece overview de todas as habilidades locais, mentoria cultural e suporte à navegação técnica no ecossistema do projeto.
Orquestrador de workflows Multi-Agente (Swarm). Define protocolos de handoff, personas e passagem de contexto usando a estrutura SDD.
This listing is imported from SkillsMP metadata and should be treated as untrusted until upstream source review is completed.
Install skill "multi-agent-orchestrator" with this command: npx skills add KlebersonCollab/skillsmp-klebersoncollab-klebersoncollab-multi-agent-orchestrator
This source entry does not include full markdown content beyond metadata.
This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.
Related by shared tags or category signals.
Guia mestre do Hub de Skills. Fornece overview de todas as habilidades locais, mentoria cultural e suporte à navegação técnica no ecossistema do projeto.
Gerador dinâmico de projetos. Utiliza CLI tools (uvx copier) para inicializar boilerplates e arquiteturas complexas instantaneamente.
Query historical crypto market data from 0xArchive across Hyperliquid, Lighter.xyz, and HIP-3. Covers orderbooks, trades, candles, funding rates, open interest, liquidations, and data quality. Use when the user asks about crypto market data, orderbooks, trades, funding rates, or historical prices on Hyperliquid, Lighter.xyz, or HIP-3.
# Screen Recorder Demo Skill ## 概述 基于 Puppeteer 的自动化端到端测试录制 Skill,支持录制浏览器操作并生成演示视频/GIF。 ## 功能特性 ### 核心功能 - 🎥 **浏览器操作录制**:录制网页操作过程 - 🎯 **智能区域录制**:支持全屏或指定区域录制 - 🔄 **格式转换**:支持 MP4、GIF、WebM 格式 - ⚡ **自动化测试集成**:与测试框架无缝集成 ### 高级功能 - 📊 **性能监控**:录制时显示FPS和文件大小 - 🎨 **视频编辑**:添加水印、字幕、片头片尾 - 🔧 **配置灵活**:支持多种录制参数配置 - 📱 **跨平台**:支持 Windows、macOS、Linux ## 安装要求 ### 系统要求 - Node.js 16+ - npm 或 yarn - Chrome/Chromium 浏览器 ### 依赖安装 ```bash npm install puppeteer puppeteer-screen-recorder ffmpeg-static # 或 yarn add puppeteer puppeteer-screen-recorder ffmpeg-static ``` ## 快速开始 ### 1. 基础录制 ```javascript const { ScreenRecorder } = require('./scripts/record-browser'); const recorder = new ScreenRecorder({ outputPath: './recordings/demo.mp4', fps: 30, quality: 80 }); await recorder.startRecording('https://your-app.com'); // 执行操作... await recorder.stopRecording(); ``` ### 2. 端到端测试录制 ```javascript const { recordE2ETest } = require('./scripts/record-test'); await recordE2ETest({ url: 'http://localhost:3000', testSteps: [ { action: 'click', selector: '#login-btn' }, { action: 'type', selector: '#username', text: 'testuser' }, { action: 'type', selector: '#password', text: 'password123' }, { action: 'click', selector: '#submit-btn' } ], output: './recordings/login-test.mp4' }); ``` ## API 文档 ### ScreenRecorder 类 #### 构造函数 ```javascript new ScreenRecorder(options) ``` **options**: - `outputPath` (string): 输出文件路径 - `fps` (number): 帧率,默认 30 - `quality` (number): 视频质量 0-100,默认 80 - `aspectRatio` (string): 宽高比,如 '16:9' - `codec` (string): 视频编码器,默认 'libx264' #### 方法 - `startRecording(url, options)`: 开始录制 - `stopRecording()`: 停止录制 - `pauseRecording()`: 暂停录制 - `resumeRecording()`: 恢复录制 - `addAnnotation(text, position)`: 添加标注 - `addWatermark(imagePath, position)`: 添加水印 ### 工具函数 #### recordE2ETest(config) 录制端到端测试过程 **config**: - `url` (string): 测试页面URL - `testSteps` (Array): 测试步骤数组 - `output` (string): 输出文件路径 - `headless` (boolean): 是否无头模式,默认 false #### convertVideo(input, output, options) 视频格式转换 #### mergeVideos(videos, output) 合并多个视频文件 ## 配置示例 ### 基础配置 ```json { "recorder": { "fps": 30, "quality": 80, "outputDir": "./recordings", "defaultFormat": "mp4" }, "browser": { "headless": false, "viewport": { "width": 1920, "height": 1080 }, "slowMo": 50 }, "annotations": { "enabled": true, "fontSize": 24, "fontColor": "#ffffff", "backgroundColor": "#00000080" } } ``` ### 测试配置 ```json { "testSuites": { "login": { "url": "http://localhost:3000/login", "steps": "scripts/test-steps/login.json", "output": "recordings/login-test.mp4" }, "dashboard": { "url": "http://localhost:3000/dashboard", "steps": "scripts/test-steps/dashboard.json", "output": "recordings/dashboard-test.mp4" } } } ``` ## 与测试框架集成 ### Jest 集成 ```javascript // jest.config.js module.exports = { setupFilesAfterEnv: ['./jest.setup.js'], reporters: [ 'default', ['./scripts/jest-video-reporter', { outputDir: './test-recordings' }] ] }; ``` ### Playwright 集成 ```javascript // playwright.config.js const { defineConfig } = require('@playwright/test'); module.exports = defineConfig({ use: { video: 'on', screenshot: 'on', }, reporter: [ ['html', { outputFolder: 'playwright-report' }], ['./scripts/playwright-video-reporter', { format: 'gif' }] ] }); ``` ## 目录结构 ``` e2e-test/ ├── SKILL.md # 技能文档 ├── package.json # 项目配置 ├── scripts/ │ ├── record-browser.js # 浏览器录制核心 │ ├── record-test.js # 测试录制 │ ├── record-screen.js # 屏幕录制 │ ├── convert-format.js # 格式转换 │ ├── add-annotations.js # 添加标注 │ └── utils.js # 工具函数 ├── configs/ │ ├── default.json # 默认配置 │ ├── test.json # 测试配置 │ └── production.json # 生产配置 ├── templates/ │ ├── demo-template.js # 演示模板 │ └── test-template.js # 测试模板 ├── examples/ │ ├── basic-recording.js # 基础录制示例 │ ├── e2e-test.js # 端到端测试示例 │ └── api-test.js # API测试示例 └── recordings/ # 录制文件输出目录 ``` ## 使用示例 ### 示例 1:录制登录流程 ```javascript const { recordE2ETest } = require('./scripts/record-test'); await recordE2ETest({ url: 'http://localhost:3000', testName: '用户登录测试', steps: [ { description: '访问登录页面', action: 'goto', url: '/login' }, { description: '输入用户名', action: 'type', selector: '#username', text: 'test@example.com' }, { description: '输入密码', action: 'type', selector: '#password', text: 'password123' }, { description: '点击登录按钮', action: 'click', selector: 'button[type="submit"]' }, { description: '验证登录成功', action: 'waitFor', selector: '.dashboard', timeout: 5000 } ], output: 'recordings/login-demo.mp4', annotations: true }); ``` ### 示例 2:录制API测试 ```javascript const { recordAPITest } = require('./scripts/record-test'); await recordAPITest({ apiUrl: 'http://localhost:8000/api', tests: [ { name: '健康检查API', endpoint: '/health', method: 'GET', expectedStatus: 200 }, { name: '用户注册API', endpoint: '/auth/register', method: 'POST', data: { username: 'testuser', email: 'test@example.com', password: 'Password123!' }, expectedStatus: 201 } ], output: 'recordings/api-test.gif' }); ``` ## 故障排除 ### 常见问题 #### 1. 录制失败 - **问题**: 无法启动浏览器 - **解决**: 确保已安装 Chrome/Chromium,或设置 `executablePath` #### 2. 视频质量差 - **问题**: 视频模糊或卡顿 - **解决**: 调整 `fps` 和 `quality` 参数,确保网络稳定 #### 3. 文件过大 - **问题**: 录制文件太大 - **解决**: 降低 `fps`、`quality`,或使用 `convertVideo` 压缩 #### 4. 内存不足 - **问题**: 录制过程中内存占用过高 - **解决**: 减少录制时长,或增加系统内存 ### 调试模式 ```javascript const recorder = new ScreenRecorder({ debug: true, // 启用调试模式 logLevel: 'verbose' }); ``` ## 性能优化建议 ### 录制优化 1. **降低帧率**: 非必要情况下使用 15-24 FPS 2. **调整分辨率**: 根据需求调整录制区域大小 3. **使用硬件加速**: 启用 GPU 加速录制 ### 文件优化 1. **格式选择**: MP4 适合长视频,GIF 适合短视频 2. **压缩设置**: 使用合适的压缩参数 3. **分段录制**: 长时间录制可分段保存 ## 许可证 MIT License ## 更新日志 ### v1.0.0 (2026-04-11) - 初始版本发布 - 支持基础浏览器录制 - 支持 MP4/GIF 格式输出 - 提供端到端测试录制功能 ## 贡献指南 1. Fork 项目 2. 创建功能分支 3. 提交更改 4. 推送到分支 5. 创建 Pull Request ## 联系支持 - 问题反馈: [GitHub Issues](https://github.com/your-org/e2e-test/issues) - 文档: [项目 Wiki](https://github.com/your-org/e2e-test/wiki) - 邮件: support@example.com