[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81577":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":12,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":15,"lastSyncTime":25,"discoverSource":26},81577,"onboarding-video-generator","gorkem-bwl\u002Fonboarding-video-generator","gorkem-bwl","Claude Code skill for column-sized web app onboarding videos in Remotion",null,"TypeScript",27,3,24,0,2,43.11,"MIT License",false,"main",true,[],"2026-06-12 04:01:34","# Onboarding video generator\n\nA Claude Code skill that produces short, column-sized web app onboarding videos in [Remotion](https:\u002F\u002Fwww.remotion.dev). Each video showcases one feature working — a single button click, a modal opening, a row landing in a list — with the kind of UI motion that goes well next to body copy in a two-column block on a marketing page.\n\nDefault output is **1280×960 (4:3 column)**, silent, looping, ~10–15 seconds, around 1 MB MP4.\n\n## Why\n\nMost \"feature video\" tools render full-screen demos that get shrunk into a column on a marketing page until the text is unreadable. This skill optimizes for the column placement from the start: focal UI piece, big top caption, no audio, clean loop seam.\n\n## Example\n\nVerifyWise \"Add task\" feature, ~12s. Five beats: toolbar with Add button → modal opens → form fills (typing, priority flip, date) → submit → result with summary cards ticking and new row sliding in.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fdabf7f9f-0ec0-4faa-bea2-bf68dc3b6eca\n\n\nIf your browser doesn't render the embed, [download the MP4](.\u002Fexamples\u002Fadd-task-verifywise.mp4).\n\n## Install (as a Claude Code skill)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fgorkem-bwl\u002Fonboarding-video-generator.git \\\n  ~\u002F.claude\u002Fskills\u002Fcreate-onboarding-video\n```\n\nThen in any Claude Code session, invoke the skill or describe a feature video task — the skill auto-discovers based on the description in `SKILL.md`.\n\n## What's inside\n\n```\nSKILL.md                                 The skill prompt + workflow\nresources\u002F\n  scaffold\u002F                              Complete Remotion project to copy per-video\n    src\u002F\n      Root.tsx, Composition.tsx          Wired to render BEATS automatically\n      beats.ts                           Beat \u002F SceneGroup schema + duration math\n      tokens.ts                          Design tokens (replace per-project)\n      components\u002F\n        TopCaption.tsx                   Top-anchored caption with rise \u002F static modes\n        Pointer.tsx                      macOS cursor with waypoint glide + click ripples\n        DebugCrosshair.tsx               Authoring-time coordinate verification\n      scenes\u002F\n        beats-config.ts                  Single source of timing truth\n        ExampleBeat.tsx, ExampleGroup.tsx\n    scripts\u002F\n      preflight.js                       Pre-render checks (DebugCrosshair leftovers, missing assets)\n    package.json, tsconfig.json, remotion.config.ts\n  state-archetypes.md                    Match feature to archetype, get screenshot list\n  cursor-component.md                    Pointer contract + common mistakes\n  coordinate-picker.html                 Browser tool: click on screenshot, get Pointer JSX\n  rebuild-parity-checklist.md            Checklist for rebuilt UI slices\nexamples\u002F\n  add-task-verifywise.mp4                Reference render\n```\n\n## Authoring loop\n\n1. **Intake** — match the feature to an archetype in `resources\u002Fstate-archetypes.md`, ask the user for the screenshots that archetype needs.\n2. **Scaffold** — copy `resources\u002Fscaffold\u002F` to a new folder (e.g. `\u003Cproject>\u002Fremotion\u002F\u003Cfeature>\u002F`).\n3. **Pin Remotion** — replace `\"latest\"` in `package.json` with the actual current version (`npm view remotion version`). Inventing versions costs you a render.\n4. **Define beats** — edit `src\u002Fscenes\u002Fbeats-config.ts`. Add or remove a beat and the composition reshapes itself; total duration is computed automatically.\n5. **Position cursors** — open `resources\u002Fcoordinate-picker.html` in a browser, drop the screenshot in, click targets, copy the generated `\u003CPointer>` config into your scene.\n6. **Verify** — drop `\u003CDebugCrosshair x={...} y={...}\u002F>` at click coords, run `npm run render:still -- --frame=N`. Adjust before full render.\n7. **Render & ship** — `SHIP_DEST=\u002Fpath\u002Fto\u002Fwebsite\u002Fpublic\u002Fvideos\u002Ffeatures npm run ship` builds MP4 + WebM and copies into the website repo.\n\n## VerifyWise example\n\nThis skill was built for [VerifyWise](https:\u002F\u002Fverifywise.ai)'s marketing site and the included defaults reflect that: 4:3 column canvas, `#13715B` green primary, `#d0d5dd` borders, 4px corner radius, sentence case captions, screenshots supplied per-video. See the \"VerifyWise defaults\" section in [`SKILL.md`](.\u002FSKILL.md) — replace those tokens in `tokens.ts` for your own project.\n\n## License\n\nMIT — see [LICENSE](.\u002FLICENSE).\n","这是一个用于生成适用于网页应用引导视频的项目，特别针对在Remotion中创建列宽尺寸的短小视频。核心功能包括自动生成聚焦于单一功能演示（如按钮点击、模态框打开等）的无声循环视频，输出格式为1280×960像素，时长约为10至15秒，文件大小约1MB。技术上采用TypeScript编写，并作为Claude Code技能运行，通过预设模板和自动发现机制简化了从描述到成品的过程。该项目适合需要在营销页面上以两列布局展示产品特性的场景使用，确保用户界面动画清晰可见且不干扰文本阅读体验。","2026-06-11 04:05:34","CREATED_QUERY"]