Slack Demo Video

---
name: slack-demo-video
description: Create or revise an illustrative Slack conversation video with channel and thread chrome, typing, attachments, agent progress, Block Kit-style results, approvals, replies, and reactions. Use for rendered Slack UI demos and clean editor footage; use actual capture for a requested live Slack integration and do not use this skill to send Slack messages.
---

# Slack demo video

Deliver an editable Slack UI clip with readable messages and a clear request → work → decision → result sequence. An authored Slack interface illustrates a workflow; it does not establish that a bot or integration ran it.

## Choose the footage

Inspect the supplied Slack screenshot, existing composition, product evidence, and requested format. Determine whether the user wants clean full-frame UI, a branded presentation, or actual Slack capture. Infer duration and routine production choices from the requested story. Ask only for missing information that changes the result materially.

For real capture, follow observed app behavior and the launch-video recording guide when available. Do not substitute authored replies for live behavior. Authorization to make a video does not authorize posting in a real workspace.

For a new illustration, use `SlackThread` in the portable starter. In a repo clone, support files are under top-level `gtm-os`; in an installed skill, they are under `assets/gtm-os`. Read [Studio and source map](references/studio-and-source.md) before initializing a project. Work in a copy rather than modifying the installed skill assets.

## Build the interaction

1. Establish the channel, request, attachment, agent work, review decision, saved receipt, and final hold. Use synthetic identities and short content unless approved source material is provided. Keep verified product claims separate from illustrative message text.
2. Write an event table in frames, including reading holds. Read [Slack choreography](references/slack-choreography.md) before editing the conversation. Preserve the supplied native chrome, density, thread-opening behavior, and message hierarchy rather than adding promotional text inside every message.
3. Keep timing in `src/slack-story.ts`, desktop/thread layout in `src/SlackThread.tsx`, reusable native UI components in `src/SlackUi.tsx`, and send/approval targets in the shared geometry. Mount each block at its event; derive all state from the frame so seeking and parallel rendering work.
4. Use fields, sections, dividers, action buttons, and context to communicate the result. Make progress, a reviewable draft, approval, and the saved receipt different visible states. Do not show a successful save before the approval.
5. Render clean UI at the full viewport using `clean: true`. For a presentation wrapper, use `clean: false` in Studio input props. Retarget controls when layout changes; cropping a smaller mockup is not full-frame rendering.

## Review and deliver

Run typecheck, render the entry/action/result/boundary stills, and inspect the actual pixels. Read [review and handoff](references/review-and-handoff.md). Then render and decode the complete clip, inspect motion and final hold, and preserve the prior accepted export until the new one passes.

Deliver the MP4 and source. Supply ProRes, 4K, a poster, or the branded version when requested. Log source dimensions, render scale, capture cadence where applicable, asset rights, and illustrative status. For clean footage, put the disclosure in editor notes even when it is absent from the image. Say exactly what was rendered and visually checked; retain source and report the concrete limitation if rendering is blocked.