ui-toolkit — Claude skill: prebuilt UI for Zoom Video SDK
A skill that walks the agent through wiring a prebuilt Zoom Video SDK web UI into your app. Useful when you need a custom session, not a regular Zoom meeting.
npx skills add openai/plugins --skill ui-toolkit -a codexWhat ui-toolkit does
The skill checks product fit first: UI Toolkit is for custom Video SDK sessions, not Meeting SDK joins. From there the agent sets up session credentials and server-side signature generation, picks an integration shape and mounts it inside the app shell.
Session join and leave, media permissions, chat, captions, recordings and theming are configured against your requirements. If you need deep control over media layout, the skill routes you to build-zoom-video-sdk-app. Debugging is split into separate tracks: browser permissions, cross-origin isolation, token generation, package version mismatch and unsupported paid features.
References cover the full guide, environment variables and common issues. One thing to plan for: the session signature is generated server-side, so a frontend alone won't cut it — you need a backend for tokens.
What it helps with
- stand up a prebuilt web UI for a custom Zoom Video SDK session
- generate the session signature on the server and hand it to the client
- handle session join and leave plus camera and mic permissions
- turn on chat, captions and recordings inside the session UI
- sort out cross-origin isolation and browser permissions while debugging
Example prompts for the agent
- Wire up ui-toolkit and build the prebuilt UI for a custom Zoom Video SDK session
- Add chat and captions to the session UI with ui-toolkit
- Help me debug token generation and browser permissions in ui-toolkit
How to install ui-toolkit
1Skills CLI (Vercel)
npx skills add openai/plugins --skill ui-toolkit -a codex2Manually: put the files in place
.agents/skills/ui-toolkit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill ui-toolkit -a claude-code2Manually: put the files in place
~/.claude/skills/ui-toolkit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ui-toolkit/
Manually: put the files in place
.cursor/skills/ui-toolkit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins ui-toolkit2Manually: put the files in place
.github/skills/ui-toolkit/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/zoom/skills/ui-toolkitManually: put the files in place
.devin/skills/ui-toolkit/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: Codex skills: how to install, where they live, how to call them
Questions about ui-toolkit
How do I install ui-toolkit in Claude?
Run npx skills add openai/plugins --skill ui-toolkit -a codex; the skill file then lands at .agents/skills/ui-toolkit/SKILL.md.
What does ui-toolkit do?
It guides the agent through adding a prebuilt Zoom Video SDK web UI: session credentials, server-side signature generation, mounting the interface, and configuring chat, captions, recordings and theming.
How is ui-toolkit different from other Zoom skills?
It targets custom Video SDK sessions rather than Meeting SDK joins. When you need deep control over media layout, it points you to build-zoom-video-sdk-app.
Source text
SKILL.md · MIT
--- name: ui-toolkit description: Use when using Zoom UI Toolkit. --- # Zoom Video SDK UI Toolkit Use this skill when the user wants a prebuilt web UI for a custom Zoom Video SDK session. If the user needs an actual Zoom meeting, route to `build-zoom-meeting-sdk-app` instead. ## Workflow 1. Confirm product fit: UI Toolkit is for Video SDK custom sessions, not Meeting SDK joins. 2. Set up the required Video SDK session credentials and server-side signature generation. 3. Pick the UI Toolkit integration shape and mount it inside the app shell. 4. Configure session join, leave, media permissions, chat, captions, recordings, and theming based on product requirements. 5. Keep custom UI needs explicit; if the user needs deep media layout control, route to `build-zoom-video-sdk-app`. 6. Debug browser permissions, cross-origin isolation, token generation, package version mismatch, and unsupported paid features separately. ## References - Full preserved guide: [references/full-guide.md](references/full-guide.md) - Environment variables: [references/environment-variables.md](references/environment-variables.md) - Common issues: [troubleshooting/common-issues.md](troubleshooting/common-issues.md) - Video SDK Web: [../video-sdk/web/SKILL.md](../video-sdk/web/SKILL.md)
© Zoom · MIT · openai/plugins
