gbalabanli/stitch-remotion-walkthrough
visualizations/stitch-remotion-walkthrough/SKILL.md
Build Stitch-based walkthrough videos and presentation-ready screen sequences with Remotion, including asset staging, screen manifests, modular compositions, and render validation. Use when Codex must turn Stitch project screens or exported screenshots into a demo video, promo walkthrough, app tour, or other screen-driven visual artifact.
$ install --global
skillsauthnpx skillsauth add gbalabanli/agent-skills stitch-remotion-walkthroughInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 2:08 AM68.3s6 files scanned
SKILL.md
- name:
- stitch-remotion-walkthrough
- description:
- Build Stitch-based walkthrough videos and presentation-ready screen sequences with Remotion, including asset staging, screen manifests, modular compositions, and render validation. Use when Codex must turn Stitch project screens or exported screenshots into a demo video, promo walkthrough, app tour, or other screen-driven visual artifact.
Stitch Remotion Walkthrough
Use this skill to turn Stitch screens or exported screenshots into a reusable Remotion walkthrough project.
Workflow
- Define the input source and expected output.
- Prefer existing local screenshots, manifests, or Stitch exports if they are already in the workspace.
- If the user wants a fresh pull from Stitch, discover the Stitch namespace at runtime and fetch project and screen metadata from the available MCP tools.
- Confirm whether the target output is a reusable video project, a rendered MP4, or both.
- Stage screen assets deterministically.
- Reuse local screen images unless the user explicitly asks to refresh them.
- Save downloaded screenshots under a stable location such as
video/public/assets/screens/. - Record screen order, titles, durations, dimensions, and transition choices in a manifest based on screen-manifest.example.json.
- Use
python scripts/download_stitch_asset.py <url> <output>for Stitch or Google Storage asset URLs when normal fetches are flaky.
- Reuse or create the Remotion project.
- Reuse an existing Remotion setup when
remotion.config.*,package.json, or a video workspace already exists. - Otherwise create a minimal TypeScript Remotion project in
video/and keep generated files scoped to the walkthrough. - Install only the dependencies needed for the requested result. Add transition packages only if the composition actually uses them.
- Build the composition with modular files.
- Keep the project split into small files such as
ScreenSlide.tsx,WalkthroughComposition.tsx, and optional overlay components. - Start from ScreenSlide.tsx when a slide component is needed, then adapt timing, typography, and overlays to the project.
- Treat the manifest as the source of truth for timing and ordering rather than hardcoding screen data in the component tree.
- Preserve aspect ratio and screen framing so UI screenshots do not stretch or crop accidentally.
- Validate before finishing.
- Run the checks in remotion-composition-checklist.md.
- Preview the composition with the local Remotion workflow when dependencies are available.
- If rendering is requested, perform a smoke render and report the output path.
- If rendering cannot be completed because Stitch or Remotion is unavailable, leave the workspace in a runnable state and say what is missing.
Output Rules
- Do not assume Stitch MCP or Remotion MCP exists; discover tools first and fall back to local files plus standard shell commands.
- Do not re-download screens if an equivalent local export already exists unless the user asks for a refresh.
- Do not collapse the whole video into one oversized component when a manifest plus small components is clearer.
- Keep filenames, screen IDs, and manifest ordering stable so later edits do not break the composition.
- Report any inferred transition timing or missing screen descriptions as assumptions.
References
- remotion-composition-checklist.md
- screen-manifest.example.json
- ScreenSlide.tsx
Related Skills
gbalabanli/stop-slop
data-ai
VerifiedTrustedCommunity
Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.
2SKILL.mdUpdated Apr 5, 2026
gbalabanli/humanizer
testing
VerifiedTrustedCommunity
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
2SKILL.mdUpdated Apr 5, 2026
gbalabanli/unsplash-image-search-download
development
VerifiedTrustedCommunity
Search Unsplash for images related to a natural-language user prompt and download a selected result to disk using the official API and tracked download endpoint. Use when Codex needs stock photos from Unsplash for articles, slide decks, social posts, mockups, inspiration boards, or any prompt-to-image download workflow.
2SKILL.mdUpdated Apr 5, 2026
gbalabanli/nano-banana
tools
VerifiedTrustedCommunity
Generate and iteratively refine images with the Gemini CLI Nano Banana extension. Use when Codex or OpenCode needs to create, edit, restyle, restore, or vary visual assets such as hero images, thumbnails, icons, diagrams, mockups, illustrations, patterns, or photo edits.
2SKILL.mdUpdated Apr 5, 2026