[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M718K5E4EAZAXKNG06QTNZFN":3,"skill-same:01M718K5E4EAZAXKNG06QTNZFN":100},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":64,"commitSha":65,"skillDirectory":66,"forksCount":67,"repositoryHtmlUrl":68,"repositoryHomepageUrl":6,"ownerHtmlUrl":69,"ownerBlogUrl":70,"ownerDescription":6,"updatedAt":71,"install":72,"resources":85},"01M718K5E4EAZAXKNG06QTNZFN","ui-toolkit\u002Fweb",null,"Reference skill for Zoom Video SDK UI Toolkit. Use after routing to a web video workflow when you want prebuilt React UI instead of building a fully custom Video SDK interface.","anthropics\u002Fknowledge-work-plugins","anthropics","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F76263028?v=4","01M697XGDPXJAVQ8391V2BCYTE","Anthropic","01M7188MPC48111TN566QNQE3X",35660,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"ui toolkit","ui","toolkit","web","ui toolkit web","zoom","use","custom","reference skill","for","react","you","workflow","when","false","interface","video sdk","video workflow","ready","Video","2026-11-10 10:12:30",false,"---\nname: ui-toolkit\u002Fweb\ndescription: \"Reference skill for Zoom Video SDK UI Toolkit. Use after routing to a web video workflow when you want prebuilt React UI instead of building a fully custom Video SDK interface.\"\nuser-invocable: false\ntriggers:\n  - \"ui toolkit\"\n  - \"zoom ui\"\n  - \"prebuilt video ui\"\n  - \"video conferencing ui\"\n  - \"zoom video ui toolkit\"\n  - \"uitoolkit\"\n  - \"ready-made zoom ui\"\n---\n\n# Zoom Video SDK UI Toolkit\n\nBackground reference for the prebuilt Zoom Video SDK UI Toolkit on web. Prefer `choose-zoom-approach` first when the user might still need Meeting SDK instead.\n\n**Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n**API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fuitoolkit\u002Fweb\u002F\n**NPM Package**: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@zoom\u002Fvideosdk-zoom-ui-toolkit\n**Live Demo**: https:\u002F\u002Fsdk.zoom.com\u002Fvideosdk-uitoolkit\n\n## Quick Links\n\n**New to UI Toolkit? Follow this path:**\n\n1. **Quick Start** - Get running in 5 minutes (see below)\n2. **JWT Authentication** - Server-side token generation (required)\n3. **Composite vs Components** - Choose your approach  \n4. **Framework Integration** - React, Vue, Angular, Next.js patterns\n5. **Integrated Index** - see the section below in this file\n\n**Having issues?**\n- Session not joining → Check JWT Authentication (most common issue)\n- React 18 peer dependency error → See Installation section\n- CSS not loading → See [Troubleshooting](troubleshooting\u002Fcommon-issues.md)\n- Components not showing → Check Component Lifecycle\n- Start with preflight checks → [5-Minute Runbook](RUNBOOK.md)\n\n## Overview\n\nThe Zoom Video SDK UI Toolkit is a **pre-built video UI library** that renders complete video conferencing experiences with minimal code. Unlike the raw Video SDK, the UI Toolkit provides:\n\n- ✅ **Ready-to-use UI** - Professional video interface out of the box\n- ✅ **Zero UI code** - No need to build video layouts, controls, or participant management\n- ✅ **Framework agnostic** - Works with React, Vue, Angular, Next.js, vanilla JS\n- ✅ **Highly customizable** - Choose which features to enable, customize themes\n- ✅ **Built-in features** - Chat, screen share, settings, virtual backgrounds included\n\n**When to use UI Toolkit:**\n- You want a complete video solution quickly\n- You need Zoom-like UI consistency\n- You don't want to build custom video UI\n- You need standard features (chat, share, participants)\n\n**When to use raw Video SDK instead:**\n- You need complete custom UI control\n- You're building a non-standard video experience\n- You need access to raw video\u002Faudio data\n- You want to build your own rendering pipeline\n\n## Installation\n\n```bash\nnpm install @zoom\u002Fvideosdk-zoom-ui-toolkit jsrsasign\nnpm install -D @types\u002Fjsrsasign\n```\n\n**Note**: React support depends on the UI Toolkit version. Check the package peer dependencies for your installed version (React 18 is commonly required).\n\n## Quick Start\n\n### Basic Usage (Vanilla JS)\n\n```javascript\nimport uitoolkit from \"@zoom\u002Fvideosdk-zoom-ui-toolkit\";\nimport \"@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css\";\n\nconst container = document.getElementById(\"sessionContainer\");\n\nconst config = {\n  videoSDKJWT: \"your_jwt_token\",\n  sessionName: \"my-session\",\n  userName: \"John Doe\",\n  sessionPasscode: \"\",\n  features: [\"video\", \"audio\", \"share\", \"chat\", \"users\", \"settings\"],\n};\n\nuitoolkit.joinSession(container, config);\n\nuitoolkit.onSessionJoined(() => {\n  console.log(\"Session joined\");\n});\n\nuitoolkit.onSessionClosed(() => {\n  console.log(\"Session closed\");\n});\n```\n\n### Next.js \u002F React Integration\n\n```typescript\n'use client';\n\nimport { useEffect, useRef } from 'react';\n\nexport default function VideoSession({ jwt, sessionName, userName }) {\n  const containerRef = useRef\u003CHTMLDivElement>(null);\n  const uitoolkitRef = useRef\u003Cany>(null);\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const init = async () => {\n      const uitoolkitModule = await import('@zoom\u002Fvideosdk-zoom-ui-toolkit');\n      const uitoolkit = uitoolkitModule.default;\n      uitoolkitRef.current = uitoolkit;\n      \n      \u002F\u002F If TypeScript complains about CSS imports, configure your app to allow them\n      \u002F\u002F (for example via a global `declare module \\\"*.css\\\";`), or import the CSS from\n      \u002F\u002F a global entrypoint (Next.js layout\u002F_app) instead of inlining here.\n      await import('@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css');\n\n      if (!isMounted || !containerRef.current) return;\n\n      const config: any = {\n        videoSDKJWT: jwt,\n        sessionName: sessionName,\n        userName: userName,\n        sessionPasscode: '',\n        features: ['video', 'audio', 'share', 'chat', 'users', 'settings'],\n      };\n\n      uitoolkit.joinSession(containerRef.current, config);\n      uitoolkit.onSessionJoined(() => console.log('Joined'));\n      uitoolkit.onSessionClosed(() => console.log('Closed'));\n    };\n\n    init();\n\n    return () => {\n      isMounted = false;\n      if (uitoolkitRef.current && containerRef.current) {\n        try {\n          uitoolkitRef.current.closeSession(containerRef.current);\n        } catch (e) {}\n      }\n    };\n  }, [jwt, sessionName, userName]);\n\n  return \u003Cdiv ref={containerRef} style={{ width: '100%', height: '100vh' }} \u002F>;\n}\n```\n\n## Available Features\n\n| Feature | Description |\n|---------|-------------|\n| `video` | Enable video layout and send\u002Freceive video |\n| `audio` | Show audio button, send\u002Freceive audio |\n| `share` | Screen sharing |\n| `chat` | In-session messaging |\n| `users` | Participant list |\n| `settings` | Device selection, virtual background |\n| `preview` | Pre-join camera\u002Fmic preview |\n| `recording` | Cloud recording (paid plan) |\n| `leave` | Leave\u002Fend session button |\n\n## Troubleshooting\n\n- **[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)** - CSS, SSR, JWT\u002Fsession join, customization limits\n\n## JWT Token Generation (Server-Side)\n\n**Required**: Generate JWT tokens on your server, never expose SDK secret client-side.\n\n### Node.js \u002F Next.js API Route\n\n```typescript\nimport { NextRequest, NextResponse } from 'next\u002Fserver';\nimport { KJUR } from 'jsrsasign';\n\nconst ZOOM_VIDEO_SDK_KEY = process.env.ZOOM_VIDEO_SDK_KEY;\nconst ZOOM_VIDEO_SDK_SECRET = process.env.ZOOM_VIDEO_SDK_SECRET;\n\nexport async function POST(request: NextRequest) {\n  const { sessionName, role, userName } = await request.json();\n\n  if (!sessionName || role === undefined) {\n    return NextResponse.json({ error: 'Missing params' }, { status: 400 });\n  }\n\n  const iat = Math.floor(Date.now() \u002F 1000);\n  const exp = iat + 60 * 60 * 2; \u002F\u002F 2 hours\n\n  const oHeader = { alg: 'HS256', typ: 'JWT' };\n  const oPayload = {\n    app_key: ZOOM_VIDEO_SDK_KEY,\n    role_type: role, \u002F\u002F 0 = participant, 1 = host\n    tpc: sessionName,\n    version: 1,\n    iat,\n    exp,\n    user_identity: userName || 'User',\n  };\n\n  const signature = KJUR.jws.JWS.sign(\n    'HS256',\n    JSON.stringify(oHeader),\n    JSON.stringify(oPayload),\n    ZOOM_VIDEO_SDK_SECRET\n  );\n\n  return NextResponse.json({ signature });\n}\n```\n\n### JWT Payload Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `app_key` | Yes | Your Video SDK Key |\n| `role_type` | Yes | 0 = participant, 1 = host |\n| `tpc` | Yes | Session\u002Ftopic name |\n| `version` | Yes | Always 1 |\n| `iat` | Yes | Issued at (Unix timestamp) |\n| `exp` | Yes | Expiration (Unix timestamp) |\n| `user_identity` | No | User identifier |\n\n## API Reference\n\n### Core Methods\n\n```javascript\nuitoolkit.joinSession(container, config);\nuitoolkit.closeSession(container);\n```\n\n### Event Listeners\n\n```javascript\nuitoolkit.onSessionJoined(callback);\nuitoolkit.onSessionClosed(callback);\nuitoolkit.offSessionJoined(callback);\nuitoolkit.offSessionClosed(callback);\n```\n\n### Component Methods\n\n```javascript\nuitoolkit.showChatComponent(container);\nuitoolkit.hideChatComponent(container);\nuitoolkit.showUsersComponent(container);\nuitoolkit.hideUsersComponent(container);\nuitoolkit.showControlsComponent(container);\nuitoolkit.hideControlsComponent(container);\nuitoolkit.showSettingsComponent(container);\nuitoolkit.hideSettingsComponent(container);\nuitoolkit.hideAllComponents();\n```\n\n## CDN Usage (No Build Step)\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fsource.zoom.us\u002Fuitoolkit\u002F2.3.5-1\u002Fvideosdk-zoom-ui-toolkit.css\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fsource.zoom.us\u002Fuitoolkit\u002F2.3.5-1\u002Fvideosdk-zoom-ui-toolkit.min.umd.js\">\u003C\u002Fscript>\n\n\u003Cdiv id=\"sessionContainer\">\u003C\u002Fdiv>\n\n\u003Cscript>\n  const uitoolkit = window.UIToolkit;\n  \n  uitoolkit.joinSession(document.getElementById('sessionContainer'), {\n    videoSDKJWT: 'your_jwt',\n    sessionName: 'my-session',\n    userName: 'User',\n    features: ['video', 'audio', 'chat']\n  });\n\u003C\u002Fscript>\n```\n\n## Next.js with basePath\n\nWhen deploying Next.js under a subpath:\n\n```typescript\n\u002F\u002F next.config.ts\nconst nextConfig = {\n  basePath: \"\u002Fyour-app-path\",\n  assetPrefix: \"\u002Fyour-app-path\",\n};\n```\n\nFetch API routes with full path:\n```typescript\nfetch('\u002Fyour-app-path\u002Fapi\u002Ftoken', { ... })\n```\n\n## Prerequisites\n\n1. **Zoom Video SDK credentials** from [Zoom Marketplace](https:\u002F\u002Fmarketplace.zoom.us\u002F)\n2. **React** version compatible with your installed UI Toolkit package (check peer deps; React 18 is common)\n3. **Server-side JWT generation** (never expose SDK secret)\n4. **Modern browser** with WebRTC support\n\n## Browser Support\n\n| Browser | Version |\n|---------|---------|\n| Chrome | 78+ |\n| Firefox | 76+ |\n| Safari | 14.1+ |\n| Edge | 79+ |\n\n## Common Issues\n\n| Issue | Solution |\n|-------|----------|\n| `peer react@\"^18.0.0\"` error | Use the React version required by the installed UI Toolkit package (check peer deps; React 18 is common) |\n| CSS import TypeScript error | Configure TS\u002FCSS handling (prefer a global `*.css` module declaration); avoid `@ts-ignore` except in throwaway demos |\n| Config type error | Type config as `any` |\n| API returns HTML not JSON | Check basePath in fetch URL |\n\n## Resources\n\n- **GitHub**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-web\n- **UI Toolkit Docs**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n- **Auth Endpoint Sample**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample\n- **Marketplace**: https:\u002F\u002Fmarketplace.zoom.us\u002F\n\n---\n\n## Integrated Index\n\n_This section was migrated from `SKILL.md`._\n\nComplete navigation for all UI Toolkit documentation.\n\n## 📚 Start Here\n\nNew to the UI Toolkit? Follow this learning path:\n\n1. **[SKILL.md](SKILL.md)** - Main overview and quick start\n2. **[5-Minute Runbook](RUNBOOK.md)** - Preflight checks before deep debugging\n3. **Quick Start Guide** - Working code in 5 minutes (see skill.md)\n4. **JWT Authentication** - Server-side token generation (see skill.md)\n5. **Choose Your Mode** - Composite vs Components (see skill.md)\n\n## 🎯 Core Concepts\n\nUnderstanding how UI Toolkit works:\n\n- **Composite vs Components** - Two ways to use UI Toolkit (see skill.md)\n- **UI Toolkit Architecture** - How it wraps Video SDK internally\n- **Feature Configuration** - Understanding featuresOptions structure\n- **Session Lifecycle** - Join → Active → Leave\u002FClose → Destroy flow\n\n## 📖 Complete Guides\n\n### Getting Started\n- **Installation** - NPM install and React 18 setup (see skill.md)\n- **Quick Start - Composite** - Full UI in one container (see skill.md)\n- **Quick Start - Components** - Individual UI pieces (see skill.md)\n- **JWT Authentication** - Server-side token generation (see skill.md)\n\n### Framework Integration\n- **React Integration** - Hooks, useEffect patterns (see skill.md)\n- **Vue.js Integration** - Composition API and Options API (see skill.md)\n- **Angular Integration** - Component lifecycle (see skill.md)\n- **Next.js Integration** - App Router, Server Components (see skill.md)\n- **Vanilla JavaScript** - No framework usage (see skill.md)\n\n### Advanced Topics\n- **Component Lifecycle** - Mount, unmount, cleanup patterns\n- **Event Listeners** - React to session events\n- **Session Management** - Programmatic control\n- **Quality Statistics** - Monitor connection quality\n- **Custom Themes** - Theme customization\n- **Virtual Backgrounds** - Custom background images\n\n## 📚 API Reference\n\nComplete API documentation:\n\n- **Core Methods** (see skill.md)\n  - `joinSession()` - Start a video session\n  - `closeSession()` - End session and remove UI\n  - `destroy()` - Clean up UI Toolkit instance\n  - `leaveSession()` - Leave without destroying UI\n\n- **Component Methods** (see skill.md)\n  - `showControlsComponent()` - Display control bar\n  - `showChatComponent()` - Display chat panel\n  - `showUsersComponent()` - Display participants list\n  - `showSettingsComponent()` - Display settings panel\n  - `hideAllComponents()` - Hide all components\n\n- **Event Listeners** (see skill.md)\n  - `onSessionJoined()` - Session joined successfully\n  - `onSessionClosed()` - Session ended\n  - `onSessionDestroyed()` - UI Toolkit destroyed\n  - `onViewTypeChange()` - View mode changed\n  - `on()` - Subscribe to Video SDK events\n  - `off()` - Unsubscribe from events\n\n- **Information Methods** (see skill.md)\n  - `getSessionInfo()` - Get session details\n  - `getCurrentUserInfo()` - Get current user\n  - `getAllUser()` - Get all participants\n  - `getClient()` - Get underlying Video SDK client\n  - `version()` - Get version info\n\n- **Control Methods** (see skill.md)\n  - `changeViewType()` - Switch view mode\n  - `mirrorVideo()` - Mirror self video\n  - `isSupportCustomLayout()` - Check device support\n\n- **Statistics Methods** (see skill.md)\n  - `subscribeAudioStatisticData()` - Audio quality stats\n  - `subscribeVideoStatisticData()` - Video quality stats\n  - `subscribeShareStatisticData()` - Share quality stats\n\n## 🔧 Configuration\n\n- **Feature Configuration** (see skill.md)\n  - `featuresOptions` structure\n  - Audio\u002FVideo options\n  - Chat, Users, Settings\n  - Virtual Background\n  - Recording, Captions (paid features)\n  - Theme customization\n  - View modes\n\n- **Session Configuration** (see skill.md)\n  - Required: `videoSDKJWT`, `sessionName`, `userName`\n  - Optional: `sessionPasscode`, `sessionIdleTimeoutMins`\n  - Debug mode\n  - Web endpoint\n  - Language settings\n\n## ⚠️ Troubleshooting\n\n### Common Issues\n- React 18 peer dependency error\n- JWT token invalid\n- CSS not loading\n- Components not showing\n- Session join failures\n\nSee: **[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)**\n\n### Framework-Specific Issues\n- React: SSR, hydration, cleanup\n- Vue: Reactivity, lifecycle\n- Angular: Module imports, AOT\n- Next.js: App Router, basePath\n\n### Session Issues\n- Authentication failures\n- Connection problems\n- Video\u002Faudio not working\n- Screen share issues\n\n## 📦 Sample Applications\n\n**Official Repositories**:\n\n| Framework | Repository | Key Features |\n|-----------|------------|--------------|\n| React | [videosdk-zoom-ui-toolkit-react-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-react-sample) | Hooks, TypeScript |\n| Vue.js | [videosdk-zoom-ui-toolkit-vuejs-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-vuejs-sample) | Composition API |\n| Angular | [videosdk-zoom-ui-toolkit-angular-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-angular-sample) | Services, Guards |\n| JavaScript | [videosdk-zoom-ui-toolkit-javascript-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-javascript-sample) | Vanilla JS |\n| Auth Endpoint | [videosdk-auth-endpoint-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample) | Node.js JWT |\n\n## 🌐 External Resources\n\n- **Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n- **API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fuitoolkit\u002Fweb\u002F\n- **NPM Package**: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@zoom\u002Fvideosdk-zoom-ui-toolkit\n- **Marketplace**: https:\u002F\u002Fmarketplace.zoom.us\u002F\n- **Developer Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **Live Demo**: https:\u002F\u002Fsdk.zoom.com\u002Fvideosdk-uitoolkit\n- **Changelog**: https:\u002F\u002Fdevelopers.zoom.us\u002Fchangelog\u002Fui-toolkit\u002Fweb\u002F\n\n## 🎓 Learning Path\n\n### Beginner\n1. Read [SKILL.md](SKILL.md) overview\n2. Follow Quick Start - Composite\n3. Generate JWT on server\n4. Join your first session\n5. Explore available features\n\n### Intermediate\n1. Try Component Mode\n2. Add event listeners\n3. Customize theme\n4. Add virtual backgrounds\n5. Integrate with your framework\n\n### Advanced\n1. Access underlying Video SDK\n2. Subscribe to quality statistics\n3. Handle all edge cases\n4. Implement custom layouts\n5. Build production-ready app\n\n## 📋 Quick Reference Card\n\n### Minimal Working Example\n\n```javascript\nimport uitoolkit from \"@zoom\u002Fvideosdk-zoom-ui-toolkit\";\nimport \"@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css\";\n\nconst config = {\n  videoSDKJWT: \"YOUR_JWT\",\n  sessionName: \"test-session\",\n  userName: \"User\",\n  featuresOptions: {\n    video: { enable: true },\n    audio: { enable: true }\n  }\n};\n\nuitoolkit.joinSession(document.getElementById(\"container\"), config);\nuitoolkit.onSessionJoined(() => console.log(\"Joined\"));\nuitoolkit.onSessionClosed(() => uitoolkit.destroy());\n```\n\n### Must-Remember Rules\n\n1. ✅ **Always** generate JWT server-side\n2. ✅ **Always** call `destroy()` on cleanup\n3. ✅ **Always** use React 18 (not 17\u002F19)\n4. ✅ **Always** import CSS file\n5. ❌ **Never** expose SDK secret client-side\n6. ❌ **Never** skip `onSessionClosed` cleanup\n7. ❌ **Never** call components before `joinSession`\n\n## 📞 Support\n\n- **Developer Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **Developer Support**: https:\u002F\u002Fdevelopers.zoom.us\u002Fsupport\u002F\n- **Premier Support**: https:\u002F\u002Fexplore.zoom.us\u002Fen\u002Fsupport-plans\u002Fdeveloper\u002F\n\n---\n\n**Navigation**: [← Back to SKILL.md](SKILL.md)\n\n## Environment Variables\n\n- See [references\u002Fenvironment-variables.md](references\u002Fenvironment-variables.md) for standardized `.env` keys and where to find each value.\n","# Zoom Video SDK UI Toolkit\n\nBackground reference for the prebuilt Zoom Video SDK UI Toolkit on web. Prefer `choose-zoom-approach` first when the user might still need Meeting SDK instead.\n\n**Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n**API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fuitoolkit\u002Fweb\u002F\n**NPM Package**: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@zoom\u002Fvideosdk-zoom-ui-toolkit\n**Live Demo**: https:\u002F\u002Fsdk.zoom.com\u002Fvideosdk-uitoolkit\n\n## Quick Links\n\n**New to UI Toolkit? Follow this path:**\n\n1. **Quick Start** - Get running in 5 minutes (see below)\n2. **JWT Authentication** - Server-side token generation (required)\n3. **Composite vs Components** - Choose your approach  \n4. **Framework Integration** - React, Vue, Angular, Next.js patterns\n5. **Integrated Index** - see the section below in this file\n\n**Having issues?**\n- Session not joining → Check JWT Authentication (most common issue)\n- React 18 peer dependency error → See Installation section\n- CSS not loading → See [Troubleshooting](troubleshooting\u002Fcommon-issues.md)\n- Components not showing → Check Component Lifecycle\n- Start with preflight checks → [5-Minute Runbook](RUNBOOK.md)\n\n## Overview\n\nThe Zoom Video SDK UI Toolkit is a **pre-built video UI library** that renders complete video conferencing experiences with minimal code. Unlike the raw Video SDK, the UI Toolkit provides:\n\n- ✅ **Ready-to-use UI** - Professional video interface out of the box\n- ✅ **Zero UI code** - No need to build video layouts, controls, or participant management\n- ✅ **Framework agnostic** - Works with React, Vue, Angular, Next.js, vanilla JS\n- ✅ **Highly customizable** - Choose which features to enable, customize themes\n- ✅ **Built-in features** - Chat, screen share, settings, virtual backgrounds included\n\n**When to use UI Toolkit:**\n- You want a complete video solution quickly\n- You need Zoom-like UI consistency\n- You don't want to build custom video UI\n- You need standard features (chat, share, participants)\n\n**When to use raw Video SDK instead:**\n- You need complete custom UI control\n- You're building a non-standard video experience\n- You need access to raw video\u002Faudio data\n- You want to build your own rendering pipeline\n\n## Installation\n\n```bash\nnpm install @zoom\u002Fvideosdk-zoom-ui-toolkit jsrsasign\nnpm install -D @types\u002Fjsrsasign\n```\n\n**Note**: React support depends on the UI Toolkit version. Check the package peer dependencies for your installed version (React 18 is commonly required).\n\n## Quick Start\n\n### Basic Usage (Vanilla JS)\n\n```javascript\nimport uitoolkit from \"@zoom\u002Fvideosdk-zoom-ui-toolkit\";\nimport \"@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css\";\n\nconst container = document.getElementById(\"sessionContainer\");\n\nconst config = {\n  videoSDKJWT: \"your_jwt_token\",\n  sessionName: \"my-session\",\n  userName: \"John Doe\",\n  sessionPasscode: \"\",\n  features: [\"video\", \"audio\", \"share\", \"chat\", \"users\", \"settings\"],\n};\n\nuitoolkit.joinSession(container, config);\n\nuitoolkit.onSessionJoined(() => {\n  console.log(\"Session joined\");\n});\n\nuitoolkit.onSessionClosed(() => {\n  console.log(\"Session closed\");\n});\n```\n\n### Next.js \u002F React Integration\n\n```typescript\n'use client';\n\nimport { useEffect, useRef } from 'react';\n\nexport default function VideoSession({ jwt, sessionName, userName }) {\n  const containerRef = useRef\u003CHTMLDivElement>(null);\n  const uitoolkitRef = useRef\u003Cany>(null);\n\n  useEffect(() => {\n    let isMounted = true;\n\n    const init = async () => {\n      const uitoolkitModule = await import('@zoom\u002Fvideosdk-zoom-ui-toolkit');\n      const uitoolkit = uitoolkitModule.default;\n      uitoolkitRef.current = uitoolkit;\n      \n      \u002F\u002F If TypeScript complains about CSS imports, configure your app to allow them\n      \u002F\u002F (for example via a global `declare module \\\"*.css\\\";`), or import the CSS from\n      \u002F\u002F a global entrypoint (Next.js layout\u002F_app) instead of inlining here.\n      await import('@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css');\n\n      if (!isMounted || !containerRef.current) return;\n\n      const config: any = {\n        videoSDKJWT: jwt,\n        sessionName: sessionName,\n        userName: userName,\n        sessionPasscode: '',\n        features: ['video', 'audio', 'share', 'chat', 'users', 'settings'],\n      };\n\n      uitoolkit.joinSession(containerRef.current, config);\n      uitoolkit.onSessionJoined(() => console.log('Joined'));\n      uitoolkit.onSessionClosed(() => console.log('Closed'));\n    };\n\n    init();\n\n    return () => {\n      isMounted = false;\n      if (uitoolkitRef.current && containerRef.current) {\n        try {\n          uitoolkitRef.current.closeSession(containerRef.current);\n        } catch (e) {}\n      }\n    };\n  }, [jwt, sessionName, userName]);\n\n  return \u003Cdiv ref={containerRef} style={{ width: '100%', height: '100vh' }} \u002F>;\n}\n```\n\n## Available Features\n\n| Feature | Description |\n|---------|-------------|\n| `video` | Enable video layout and send\u002Freceive video |\n| `audio` | Show audio button, send\u002Freceive audio |\n| `share` | Screen sharing |\n| `chat` | In-session messaging |\n| `users` | Participant list |\n| `settings` | Device selection, virtual background |\n| `preview` | Pre-join camera\u002Fmic preview |\n| `recording` | Cloud recording (paid plan) |\n| `leave` | Leave\u002Fend session button |\n\n## Troubleshooting\n\n- **[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)** - CSS, SSR, JWT\u002Fsession join, customization limits\n\n## JWT Token Generation (Server-Side)\n\n**Required**: Generate JWT tokens on your server, never expose SDK secret client-side.\n\n### Node.js \u002F Next.js API Route\n\n```typescript\nimport { NextRequest, NextResponse } from 'next\u002Fserver';\nimport { KJUR } from 'jsrsasign';\n\nconst ZOOM_VIDEO_SDK_KEY = process.env.ZOOM_VIDEO_SDK_KEY;\nconst ZOOM_VIDEO_SDK_SECRET = process.env.ZOOM_VIDEO_SDK_SECRET;\n\nexport async function POST(request: NextRequest) {\n  const { sessionName, role, userName } = await request.json();\n\n  if (!sessionName || role === undefined) {\n    return NextResponse.json({ error: 'Missing params' }, { status: 400 });\n  }\n\n  const iat = Math.floor(Date.now() \u002F 1000);\n  const exp = iat + 60 * 60 * 2; \u002F\u002F 2 hours\n\n  const oHeader = { alg: 'HS256', typ: 'JWT' };\n  const oPayload = {\n    app_key: ZOOM_VIDEO_SDK_KEY,\n    role_type: role, \u002F\u002F 0 = participant, 1 = host\n    tpc: sessionName,\n    version: 1,\n    iat,\n    exp,\n    user_identity: userName || 'User',\n  };\n\n  const signature = KJUR.jws.JWS.sign(\n    'HS256',\n    JSON.stringify(oHeader),\n    JSON.stringify(oPayload),\n    ZOOM_VIDEO_SDK_SECRET\n  );\n\n  return NextResponse.json({ signature });\n}\n```\n\n### JWT Payload Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `app_key` | Yes | Your Video SDK Key |\n| `role_type` | Yes | 0 = participant, 1 = host |\n| `tpc` | Yes | Session\u002Ftopic name |\n| `version` | Yes | Always 1 |\n| `iat` | Yes | Issued at (Unix timestamp) |\n| `exp` | Yes | Expiration (Unix timestamp) |\n| `user_identity` | No | User identifier |\n\n## API Reference\n\n### Core Methods\n\n```javascript\nuitoolkit.joinSession(container, config);\nuitoolkit.closeSession(container);\n```\n\n### Event Listeners\n\n```javascript\nuitoolkit.onSessionJoined(callback);\nuitoolkit.onSessionClosed(callback);\nuitoolkit.offSessionJoined(callback);\nuitoolkit.offSessionClosed(callback);\n```\n\n### Component Methods\n\n```javascript\nuitoolkit.showChatComponent(container);\nuitoolkit.hideChatComponent(container);\nuitoolkit.showUsersComponent(container);\nuitoolkit.hideUsersComponent(container);\nuitoolkit.showControlsComponent(container);\nuitoolkit.hideControlsComponent(container);\nuitoolkit.showSettingsComponent(container);\nuitoolkit.hideSettingsComponent(container);\nuitoolkit.hideAllComponents();\n```\n\n## CDN Usage (No Build Step)\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fsource.zoom.us\u002Fuitoolkit\u002F2.3.5-1\u002Fvideosdk-zoom-ui-toolkit.css\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fsource.zoom.us\u002Fuitoolkit\u002F2.3.5-1\u002Fvideosdk-zoom-ui-toolkit.min.umd.js\">\u003C\u002Fscript>\n\n\u003Cdiv id=\"sessionContainer\">\u003C\u002Fdiv>\n\n\u003Cscript>\n  const uitoolkit = window.UIToolkit;\n  \n  uitoolkit.joinSession(document.getElementById('sessionContainer'), {\n    videoSDKJWT: 'your_jwt',\n    sessionName: 'my-session',\n    userName: 'User',\n    features: ['video', 'audio', 'chat']\n  });\n\u003C\u002Fscript>\n```\n\n## Next.js with basePath\n\nWhen deploying Next.js under a subpath:\n\n```typescript\n\u002F\u002F next.config.ts\nconst nextConfig = {\n  basePath: \"\u002Fyour-app-path\",\n  assetPrefix: \"\u002Fyour-app-path\",\n};\n```\n\nFetch API routes with full path:\n```typescript\nfetch('\u002Fyour-app-path\u002Fapi\u002Ftoken', { ... })\n```\n\n## Prerequisites\n\n1. **Zoom Video SDK credentials** from [Zoom Marketplace](https:\u002F\u002Fmarketplace.zoom.us\u002F)\n2. **React** version compatible with your installed UI Toolkit package (check peer deps; React 18 is common)\n3. **Server-side JWT generation** (never expose SDK secret)\n4. **Modern browser** with WebRTC support\n\n## Browser Support\n\n| Browser | Version |\n|---------|---------|\n| Chrome | 78+ |\n| Firefox | 76+ |\n| Safari | 14.1+ |\n| Edge | 79+ |\n\n## Common Issues\n\n| Issue | Solution |\n|-------|----------|\n| `peer react@\"^18.0.0\"` error | Use the React version required by the installed UI Toolkit package (check peer deps; React 18 is common) |\n| CSS import TypeScript error | Configure TS\u002FCSS handling (prefer a global `*.css` module declaration); avoid `@ts-ignore` except in throwaway demos |\n| Config type error | Type config as `any` |\n| API returns HTML not JSON | Check basePath in fetch URL |\n\n## Resources\n\n- **GitHub**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-web\n- **UI Toolkit Docs**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n- **Auth Endpoint Sample**: https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample\n- **Marketplace**: https:\u002F\u002Fmarketplace.zoom.us\u002F\n\n---\n\n## Integrated Index\n\n_This section was migrated from `SKILL.md`._\n\nComplete navigation for all UI Toolkit documentation.\n\n## 📚 Start Here\n\nNew to the UI Toolkit? Follow this learning path:\n\n1. **[SKILL.md](SKILL.md)** - Main overview and quick start\n2. **[5-Minute Runbook](RUNBOOK.md)** - Preflight checks before deep debugging\n3. **Quick Start Guide** - Working code in 5 minutes (see skill.md)\n4. **JWT Authentication** - Server-side token generation (see skill.md)\n5. **Choose Your Mode** - Composite vs Components (see skill.md)\n\n## 🎯 Core Concepts\n\nUnderstanding how UI Toolkit works:\n\n- **Composite vs Components** - Two ways to use UI Toolkit (see skill.md)\n- **UI Toolkit Architecture** - How it wraps Video SDK internally\n- **Feature Configuration** - Understanding featuresOptions structure\n- **Session Lifecycle** - Join → Active → Leave\u002FClose → Destroy flow\n\n## 📖 Complete Guides\n\n### Getting Started\n- **Installation** - NPM install and React 18 setup (see skill.md)\n- **Quick Start - Composite** - Full UI in one container (see skill.md)\n- **Quick Start - Components** - Individual UI pieces (see skill.md)\n- **JWT Authentication** - Server-side token generation (see skill.md)\n\n### Framework Integration\n- **React Integration** - Hooks, useEffect patterns (see skill.md)\n- **Vue.js Integration** - Composition API and Options API (see skill.md)\n- **Angular Integration** - Component lifecycle (see skill.md)\n- **Next.js Integration** - App Router, Server Components (see skill.md)\n- **Vanilla JavaScript** - No framework usage (see skill.md)\n\n### Advanced Topics\n- **Component Lifecycle** - Mount, unmount, cleanup patterns\n- **Event Listeners** - React to session events\n- **Session Management** - Programmatic control\n- **Quality Statistics** - Monitor connection quality\n- **Custom Themes** - Theme customization\n- **Virtual Backgrounds** - Custom background images\n\n## 📚 API Reference\n\nComplete API documentation:\n\n- **Core Methods** (see skill.md)\n  - `joinSession()` - Start a video session\n  - `closeSession()` - End session and remove UI\n  - `destroy()` - Clean up UI Toolkit instance\n  - `leaveSession()` - Leave without destroying UI\n\n- **Component Methods** (see skill.md)\n  - `showControlsComponent()` - Display control bar\n  - `showChatComponent()` - Display chat panel\n  - `showUsersComponent()` - Display participants list\n  - `showSettingsComponent()` - Display settings panel\n  - `hideAllComponents()` - Hide all components\n\n- **Event Listeners** (see skill.md)\n  - `onSessionJoined()` - Session joined successfully\n  - `onSessionClosed()` - Session ended\n  - `onSessionDestroyed()` - UI Toolkit destroyed\n  - `onViewTypeChange()` - View mode changed\n  - `on()` - Subscribe to Video SDK events\n  - `off()` - Unsubscribe from events\n\n- **Information Methods** (see skill.md)\n  - `getSessionInfo()` - Get session details\n  - `getCurrentUserInfo()` - Get current user\n  - `getAllUser()` - Get all participants\n  - `getClient()` - Get underlying Video SDK client\n  - `version()` - Get version info\n\n- **Control Methods** (see skill.md)\n  - `changeViewType()` - Switch view mode\n  - `mirrorVideo()` - Mirror self video\n  - `isSupportCustomLayout()` - Check device support\n\n- **Statistics Methods** (see skill.md)\n  - `subscribeAudioStatisticData()` - Audio quality stats\n  - `subscribeVideoStatisticData()` - Video quality stats\n  - `subscribeShareStatisticData()` - Share quality stats\n\n## 🔧 Configuration\n\n- **Feature Configuration** (see skill.md)\n  - `featuresOptions` structure\n  - Audio\u002FVideo options\n  - Chat, Users, Settings\n  - Virtual Background\n  - Recording, Captions (paid features)\n  - Theme customization\n  - View modes\n\n- **Session Configuration** (see skill.md)\n  - Required: `videoSDKJWT`, `sessionName`, `userName`\n  - Optional: `sessionPasscode`, `sessionIdleTimeoutMins`\n  - Debug mode\n  - Web endpoint\n  - Language settings\n\n## ⚠️ Troubleshooting\n\n### Common Issues\n- React 18 peer dependency error\n- JWT token invalid\n- CSS not loading\n- Components not showing\n- Session join failures\n\nSee: **[troubleshooting\u002Fcommon-issues.md](troubleshooting\u002Fcommon-issues.md)**\n\n### Framework-Specific Issues\n- React: SSR, hydration, cleanup\n- Vue: Reactivity, lifecycle\n- Angular: Module imports, AOT\n- Next.js: App Router, basePath\n\n### Session Issues\n- Authentication failures\n- Connection problems\n- Video\u002Faudio not working\n- Screen share issues\n\n## 📦 Sample Applications\n\n**Official Repositories**:\n\n| Framework | Repository | Key Features |\n|-----------|------------|--------------|\n| React | [videosdk-zoom-ui-toolkit-react-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-react-sample) | Hooks, TypeScript |\n| Vue.js | [videosdk-zoom-ui-toolkit-vuejs-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-vuejs-sample) | Composition API |\n| Angular | [videosdk-zoom-ui-toolkit-angular-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-angular-sample) | Services, Guards |\n| JavaScript | [videosdk-zoom-ui-toolkit-javascript-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-zoom-ui-toolkit-javascript-sample) | Vanilla JS |\n| Auth Endpoint | [videosdk-auth-endpoint-sample](https:\u002F\u002Fgithub.com\u002Fzoom\u002Fvideosdk-auth-endpoint-sample) | Node.js JWT |\n\n## 🌐 External Resources\n\n- **Official Documentation**: https:\u002F\u002Fdevelopers.zoom.us\u002Fdocs\u002Fvideo-sdk\u002Fweb\u002Fui-toolkit\u002F\n- **API Reference**: https:\u002F\u002Fmarketplacefront.zoom.us\u002Fsdk\u002Fuitoolkit\u002Fweb\u002F\n- **NPM Package**: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@zoom\u002Fvideosdk-zoom-ui-toolkit\n- **Marketplace**: https:\u002F\u002Fmarketplace.zoom.us\u002F\n- **Developer Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **Live Demo**: https:\u002F\u002Fsdk.zoom.com\u002Fvideosdk-uitoolkit\n- **Changelog**: https:\u002F\u002Fdevelopers.zoom.us\u002Fchangelog\u002Fui-toolkit\u002Fweb\u002F\n\n## 🎓 Learning Path\n\n### Beginner\n1. Read [SKILL.md](SKILL.md) overview\n2. Follow Quick Start - Composite\n3. Generate JWT on server\n4. Join your first session\n5. Explore available features\n\n### Intermediate\n1. Try Component Mode\n2. Add event listeners\n3. Customize theme\n4. Add virtual backgrounds\n5. Integrate with your framework\n\n### Advanced\n1. Access underlying Video SDK\n2. Subscribe to quality statistics\n3. Handle all edge cases\n4. Implement custom layouts\n5. Build production-ready app\n\n## 📋 Quick Reference Card\n\n### Minimal Working Example\n\n```javascript\nimport uitoolkit from \"@zoom\u002Fvideosdk-zoom-ui-toolkit\";\nimport \"@zoom\u002Fvideosdk-ui-toolkit\u002Fdist\u002Fvideosdk-zoom-ui-toolkit.css\";\n\nconst config = {\n  videoSDKJWT: \"YOUR_JWT\",\n  sessionName: \"test-session\",\n  userName: \"User\",\n  featuresOptions: {\n    video: { enable: true },\n    audio: { enable: true }\n  }\n};\n\nuitoolkit.joinSession(document.getElementById(\"container\"), config);\nuitoolkit.onSessionJoined(() => console.log(\"Joined\"));\nuitoolkit.onSessionClosed(() => uitoolkit.destroy());\n```\n\n### Must-Remember Rules\n\n1. ✅ **Always** generate JWT server-side\n2. ✅ **Always** call `destroy()` on cleanup\n3. ✅ **Always** use React 18 (not 17\u002F19)\n4. ✅ **Always** import CSS file\n5. ❌ **Never** expose SDK secret client-side\n6. ❌ **Never** skip `onSessionClosed` cleanup\n7. ❌ **Never** call components before `joinSession`\n\n## 📞 Support\n\n- **Developer Forum**: https:\u002F\u002Fdevforum.zoom.us\u002F\n- **Developer Support**: https:\u002F\u002Fdevelopers.zoom.us\u002Fsupport\u002F\n- **Premier Support**: https:\u002F\u002Fexplore.zoom.us\u002Fen\u002Fsupport-plans\u002Fdeveloper\u002F\n\n---\n\n**Navigation**: [← Back to SKILL.md](SKILL.md)\n\n## Environment Variables\n\n- See [references\u002Fenvironment-variables.md](references\u002Fenvironment-variables.md) for standardized `.env` keys and where to find each value.\n",{"name":5,"triggers":57,"description":7,"user-invocable":53},[32,58,59,60,61,62,63],"zoom ui","prebuilt video ui","video conferencing ui","zoom video ui toolkit","uitoolkit","ready-made zoom ui","main","e605d8ddbfb688da57dfaaceebd93f12a64ef1d3","partner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit",3944,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins","https:\u002F\u002Fgithub.com\u002Fanthropics","https:\u002F\u002Fanthropic.com","2026-11-14 06:21:52",{"source":8,"skillName":5,"commands":73,"prompt":83,"zipAvailable":84},[74,77,80],{"tool":75,"command":76},"npx","npx skills add anthropics\u002Fknowledge-work-plugins --skill ui-toolkit\u002Fweb",{"tool":78,"command":79},"bunx","bunx skills add anthropics\u002Fknowledge-work-plugins --skill ui-toolkit\u002Fweb",{"tool":81,"command":82},"pnpm","pnpm dlx skills add anthropics\u002Fknowledge-work-plugins --skill ui-toolkit\u002Fweb","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit\u002FSKILL.md",true,[86,92,96],{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fenvironment-variables.md","REFERENCE","参考文档",738,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit\u002Freferences\u002Fenvironment-variables.md",{"path":93,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":94,"sourceHtmlUrl":95},"RUNBOOK.md",1973,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit\u002FRUNBOOK.md",{"path":97,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":98,"sourceHtmlUrl":99},"troubleshooting\u002Fcommon-issues.md",1224,"https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fpartner-built\u002Fzoom-plugin\u002Fskills\u002Fui-toolkit\u002Ftroubleshooting\u002Fcommon-issues.md",[101,126,151,172,199,225],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":52},"01M718Y97HCGW12Q53PSJDY03W","ticket-deflector","Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says \"draft a response,\" \"answer this customer,\" \"where's my order,\" \"I want a refund,\" \"check my orders,\" or \"anything about to blow up.\"","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fticket-deflector\u002FSKILL.md",[],[108,109,110,111,112,113,114,45,44,115,116,117,118,119,120,121,122,123,124,125],"ticket","ticket deflector","mode","up","payments","open","writing","ask","Connector","text","mail","window","next","customer","support","crm","past","read",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":52},"01M718Y55HFAN5705ME5VEDZ9K","tax-season-organizer","Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags.\nAny tax request routes first to \u002Ftax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: \"books are closed, now do the 1099s,\" \"run the quarterly estimate off the closed numbers,\" or \"just the contractor W-9 list.\"","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Ftax-season-organizer\u002FSKILL.md",[],[133,134,135,136,137,138,139,140,141,142,45,143,144,145,146,147,125,148,149,150],"tax season organizer","tax","us federal","which","netsuite","paid","end","usd","only","now","books","xero","scanning","run","request","flags","list","stripe",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":157,"publishedAt":52},"01M718Y13VVPHDD9NTDBVFJ2AZ","tax-prep","Prepares tax materials as a two-link chain — month-end-prep confirms the books are closed and reconciled first, then tax-season-organizer calculates the quarterly estimated payment or builds the year-end 1099-NEC list and accountant packet from those closed numbers. Requires a ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); uses Gusto, PayPal, and Stripe when connected, else CSV upload. US federal tax math; a non-US business gets the closed-books packet. Prep material for a CPA, never tax advice, nothing filed. Trigger on \"quarterly taxes,\" \"estimated tax payment,\" \"how much should I set aside,\" \"1099s,\" \"1099-NEC,\" \"W-9s,\" \"year-end tax prep,\" \"get my books ready for my accountant,\" any phrasing that suggests a tax deadline is coming, or a question about net profit or YTD income that sounds like worry about a tax bill. An owner who says the period's books are already closed routes to tax-season-organizer directly.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Ftax-prep\u002FSKILL.md",[],[158,134,159,160,135,161,50,137,162,163,164,165,166,41,167,139,168,169,170,171],"tax prep","prep","SET","as","never","zoho books","get","chain","profit","trigger","material","question","paypal","business",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":181,"publishedAt":52},"01M718XWTWQZ01GYSG9T8RW8TW","speed-to-lead","Makes sure no inbound lead goes unanswered. Watches web forms, the shared inbox, and the CRM for new inquiries, qualifies each one against the owner's criteria, drafts a reply in the owner's voice with real meeting times for the owner to approve and send, routes anything hot to a human right away, and logs the whole thing to the CRM. Never sends on its own. Built to run on a schedule so overnight inquiries are drafted and sorted by morning, and works from forwarded or pasted inquiries when no connector is available. Use this whenever the owner is worried about inbound leads or response time — including phrasings like \"leads are going cold,\" \"did anyone answer that inquiry,\" \"I keep missing form submissions,\" \"nothing falls through the cracks,\" \"handle my inbound,\" \"respond to this lead,\" or \"we lose people because nobody gets back fast enough.\" Reach for it for a single unanswered inquiry as readily as for a standing setup.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fspeed-to-lead\u002FSKILL.md",[178],{"categoryNo":179,"categoryName":180,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000034","行政与办公人员",[182,183,184,185,186,187,162,188,189,190,191,192,193,194,45,195,196,116,197,198],"speed to lead","lead","speed","shared","back","cold","time","inbox","send","respond","new","web forms","people","schedule","logs","sure","human",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":203,"categories":204,"keywords":208,"publishedAt":52},"01M718XQYMN1KY3TPS33967FK0","social-content-engine","Runs the owner's content operation as a standing thing rather than a one-off: keeps a rolling posting calendar, learns the owner's voice, generates on-brand Canva graphics, writes captions that sound like them, repurposes one asset into every channel format, and stages posts for approval instead of publishing on its own. Pulls product photos and prices from Shopify when connected; with no connectors, drafts the calendar and asset briefs for manual posting. Use this whenever the owner talks about posting, content, or social — including \"I need to post more,\" \"we've gone quiet on Instagram,\" \"what should we post this month,\" \"make the content,\" \"give me a month of posts,\" \"write this in my voice,\" \"repurpose this,\" or \"set up our content calendar.\" Reach for it for a single post as readily as for a full quarter. One handoff: a finished, approved campaign brief goes to canva-creator; this skill owns the standing operation.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fsocial-content-engine\u002FSKILL.md",[205],{"categoryNo":206,"categoryName":207,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[209,210,211,212,213,214,160,215,216,217,218,111,219,45,220,221,222,125,223,224],"social","social content engine","engine","content engine","social content","content","brief","posts","Captions","prices","campaign","me","product","calendar","write","drafts",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":231,"publishedAt":52},"01M718XMPJVH0EVRVP998BVZPC","smb-router","The front door to the Small Business plugin. Listens to what the owner needs right now — vague or specific — and routes them to the best skill or slash command for the moment. Also serves as a guide: explains what's available, suggests what to try next, and adapts recommendations based on stored business context. Trigger whenever the owner asks \"what can you do,\" \"help me with my business,\" \"what should I focus on,\" \"I don't know where to start,\" or any open-ended business request that doesn't clearly match a single skill.","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fknowledge-work-plugins\u002Fblob\u002Fmain\u002Fsmall-business\u002Fskills\u002Fsmb-router\u002FSKILL.md",[],[232,233,234,161,235,41,167,236,113,237,142,171,43,238,239,240,241,220,242,120],"router","smb","smb router","do","front","single","vague","can","with","plugin","focus"]