[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JN96AXTYDSKKTEM4NXYYP6":3,"skill-same:01M6JN96AXTYDSKKTEM4NXYYP6":102},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":56,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M6JN96AXTYDSKKTEM4NXYYP6","electron-wrapper",null,"Wrap a Bun web app into an Electron desktop app with native window management, auto-updates, code signing, and CI\u002FCD distribution. Use when the user wants to create a native desktop application from an existing Bun-based web server, package it for macOS\u002FWindows, set up auto-updating, or handle Electron UX concerns like drag regions and traffic lights. Also use when cutting releases or tagging versions for Electron apps.","LongLeo287\u002FOmniClaw","LongLeo287","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F141803367?v=4","01M6JK75C62VCNZKR5BRZ386YV","LongLeo","01M6JK75GQ78TSP1ZPXNKK3MCH",9,"MIT","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Fskill.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"electron wrapper","Wrapper","electron","releases","window","updates","traffic","native","apps","app","distribution","desktop app","up","auto","SET","ci","server","window management","code","create","2026-11-10 10:12:30",false,"---\nname: electron-wrapper\ndescription: >\n  Wrap a Bun web app into an Electron desktop app with native window management,\n  auto-updates, code signing, and CI\u002FCD distribution. Use when the user wants to\n  create a native desktop application from an existing Bun-based web server,\n  package it for macOS\u002FWindows, set up auto-updating, or handle Electron UX\n  concerns like drag regions and traffic lights. Also use when cutting releases\n  or tagging versions for Electron apps.\n---\n\n# Electron Wrapper for Bun Web Apps\n\nThis skill guides wrapping an existing Bun web server into a native desktop app using Electron. It's based on a proven implementation that solved every major integration challenge.\n\n## Architecture\n\n**\"Electron as chrome, Bun as server\"** — Two runtimes working together:\n\n- **Electron\u002FNode.js** handles window management, native menus, auto-updates, and IPC\n- **Bun** runs the actual web server with all your application logic\n\nThe Electron main process spawns a bundled Bun binary that runs your server, then loads `http:\u002F\u002Flocalhost:{port}` in a `BrowserWindow`. Your web app doesn't know or care that it's inside Electron — it's just a web page with an optional `window.electronAPI` bridge for native features.\n\nThis architecture means:\n- Zero changes to your server code (it's still a standard Bun HTTP server)\n- The web app works identically in a browser or in Electron\n- Electron handles only what browsers can't: window chrome, system tray, auto-updates, file system access\n- Two separate `node_modules` — Electron uses npm, your web app uses Bun\n\n## Phase 1: Project Setup\n\nCreate the Electron subproject alongside your existing Bun web app.\n\n**What to create:**\n- `electron\u002F` directory with its own `package.json` (npm, not Bun), two tsconfigs (ESM for main, CJS for preload), `electron-builder.yml`, and macOS entitlements\n- `scripts\u002Fbuild-server.ts` for bundling the server\n- `scripts\u002Fdownload-bun.ts` for downloading platform-specific Bun binaries\n- Parent project changes: new scripts, tsconfig excludes, .gitignore entries\n\n**Reference:** [project-setup.md](references\u002Fproject-setup.md)\n\n## Phase 2: Main Process\n\nBuild the Electron main process — the entry point, server spawning, window management, auto-updater, and preload bridge.\n\n**Files to create:**\n\n| File | Purpose |\n|------|---------|\n| `electron\u002Fsrc\u002Fmain\u002Findex.ts` | App lifecycle, dev\u002Fprod mode, single-instance lock, IPC handlers |\n| `electron\u002Fsrc\u002Fmain\u002Fbun-server.ts` | Spawn bundled Bun, port selection, health polling, env var injection |\n| `electron\u002Fsrc\u002Fmain\u002Fwindow.ts` | BrowserWindow config, bounds persistence, security settings, navigation guards |\n| `electron\u002Fsrc\u002Fmain\u002Fupdater.ts` | electron-updater setup, event forwarding to renderer |\n| `electron\u002Fsrc\u002Fpreload\u002Findex.ts` | contextBridge API with invoke\u002Fon patterns and unsubscribe support |\n\n**Key decisions:**\n- Dev mode uses `ELECTRON_DEV_URL` env var to connect to the external dev server (no internal Bun spawn)\n- `autoDownload: false` — let users choose when to download updates\n- Preload exposes only specific methods, never raw `ipcRenderer`\n- Window persists bounds via `electron-store`\n\n**Reference:** [main-process.md](references\u002Fmain-process.md)\n\n## Phase 3: Web App Adaptation\n\nAdapt the existing web app to detect and respond to the Electron environment while remaining fully functional as a standalone web app.\n\n**Changes to the web app:**\n\n| Change | Details |\n|--------|---------|\n| Electron detection utility | `isElectron()`, `getElectronPlatform()`, `isMacElectron()`, `applyElectronDocumentAttributes()` |\n| Type declarations | `window.electronAPI` with all properties optional |\n| CSS drag regions | `.app-window-drag`\u002F`.app-window-no-drag` classes, auto-exclude interactive elements |\n| Traffic light spacing | `--electron-traffic-left` CSS variable (72px on macOS, 0px elsewhere) |\n| Storage path | Env var for data directory, falling back to CWD |\n| Static asset serving | Env var for static dir in production mode |\n| Auto-update hook | `useElectronUpdater()` React hook with download\u002Finstall controls |\n| Update notification | Pill component showing available → downloading → ready states |\n| Feature gating | Disable demo mode, hosted features when in Electron |\n\n**Reference:** [web-adaptation.md](references\u002Fweb-adaptation.md)\n\n## Phase 4: Build & Distribution\n\nBundle everything, set up CI\u002FCD, and handle code signing.\n\n**Build pipeline:**\n1. Build web app (`bun run build`)\n2. Bundle server to single file (`Bun.build()` → `resources\u002Fserver\u002Findex.js`)\n3. Download platform-specific Bun binaries → `resources\u002Fbun\u002F{platform}-{arch}\u002F`\n4. Compile Electron TypeScript (two passes: main ESM + preload CJS)\n5. electron-builder packages everything with `extraResources`\n\n**CI\u002FCD:**\n- GitHub Actions triggered by version tags (e.g., `v*`, `clippy-v*`)\n- Matrix builds: macOS arm64\u002Fx64 on `macos-14`, Windows x64 on `windows-latest`\n- `--publish never` in build step, separate publish job creates draft GitHub release\n- Apple certificate import and notarization in CI\n\n**Code signing:**\n- macOS: Developer ID Application certificate, exported as base64 .p12\n- Notarization via Apple ID + app-specific password\n- 5 GitHub secrets required: `APPLE_CERTIFICATE`, `APPLE_CERTIFICATE_PASSWORD`, `APPLE_ID`, `APPLE_PASSWORD`, `APPLE_TEAM_ID`\n\n**Icons:**\n- macOS: `sips` + `iconutil` from source PNG → `.icns`\n- Windows: `png-to-ico` npm package → `.ico`\n\n**Reference:** [build-and-distribute.md](references\u002Fbuild-and-distribute.md)\n\n## Cutting a Release\n\n**Never build release artifacts locally.** CI has the signing certificates and notarization credentials. Local builds produce unsigned apps that macOS Gatekeeper will block.\n\n### Release workflow:\n\n1. **Bump version** in `electron\u002Fpackage.json`, commit, and merge to main\n2. **Find the tag pattern** the CI workflow expects:\n   ```bash\n   grep -A2 'tags:' .github\u002Fworkflows\u002F*.yml\n   ```\n3. **Tag the merged commit on main:**\n   ```bash\n   git tag \u003Cpattern>\u003Cversion> origin\u002Fmain\n   git push origin \u003Cpattern>\u003Cversion>\n   ```\n4. **Monitor CI:**\n   ```bash\n   gh run list --workflow=\u003Cworkflow>.yml --limit=1\n   ```\n5. **Review and publish** the draft release on GitHub\n\n### Common mistakes:\n- Running `electron-builder --publish always` locally — no notarization\n- Using `gh release create` with local artifacts — unsigned\n- Tagging before the version bump is merged — wrong version in build\n- Tagging a feature branch instead of `origin\u002Fmain`\n\nSee [pitfalls.md §13](references\u002Fpitfalls.md) for full details.\n\n## Critical Pitfalls\n\nQuick-reference list — see [pitfalls.md](references\u002Fpitfalls.md) for full details with symptoms and code examples.\n\n| # | Pitfall | One-line fix |\n|---|---------|-------------|\n| 1 | ESM\u002FCJS conflicts | `\"type\": \"module\"` + default import pattern for CJS packages |\n| 2 | Preload must be CJS | Separate tsconfig with `\"module\": \"CommonJS\"` |\n| 3 | `__dirname` unavailable | `fileURLToPath(import.meta.url)` polyfill |\n| 4 | Dev mode MIME errors | Connect to external dev server via `ELECTRON_DEV_URL` |\n| 5 | Bun version mismatch | Pin version in download script, match dev version |\n| 6 | nvm PATH issues | `bash -lc` for spawned processes |\n| 7 | Wrong storage path | Env var + `app.getPath(\"userData\")` |\n| 8 | White flash on open | `show: false` + `ready-to-show` + dark `backgroundColor` |\n| 11 | `${platform}` != `process.platform` | Put Bun `extraResources` in `mac:`\u002F`win:` sections with `darwin-`\u002F`win32-` prefixes |\n| 12 | Bun workspace hoists deps | Bundle main with esbuild + `createRequire` banner, or use npm for electron dir |\n| 13 | Local builds aren't notarized | Always release via CI tags, never `electron-builder --publish` locally |\n\n## Dev Workflow\n\nThe `electron:dev` command runs the full development environment:\n\n```\nnpm run dev\n  ├── concurrently\n  │   ├── dev:web    → cd .. && bun run dev          (Bun dev server with HMR)\n  │   └── dev:electron\n  │       ├── wait-on http:\u002F\u002Flocalhost:3005           (wait for dev server)\n  │       ├── npm run build                           (compile TS)\n  │       └── ELECTRON_DEV_URL=... electron .         (launch Electron)\n```\n\n- The web dev server runs with HMR — changes reflect instantly\n- Electron connects to the dev server instead of spawning its own Bun\n- Preload and main process changes require restarting `electron:dev`\n- Web app changes hot-reload automatically\n\nTo test production-like behavior locally:\n```bash\nbun run electron:pack    # builds everything, packages without installer\n# Output in electron\u002Frelease\u002F\n```\n\n## Customization Checklist\n\nWhen adapting this for a new project, update these project-specific values:\n\n- [ ] App name in `electron-builder.yml` (`productName`, `appId`)\n- [ ] Window title in `window.ts`\n- [ ] Dev server port in `dev:electron` script and `dev` script\n- [ ] Environment variable names (e.g., `APP_DATA_DIR`, `APP_STATIC_DIR`)\n- [ ] `backgroundColor` in window config to match your app's theme\n- [ ] `category` in `electron-builder.yml` mac section\n- [ ] Repository URL in `electron\u002Fpackage.json`\n- [ ] Bun version in `download-bun.ts`\n- [ ] Icon assets in `electron\u002Fassets\u002F`\n","# Electron Wrapper for Bun Web Apps\n\nThis skill guides wrapping an existing Bun web server into a native desktop app using Electron. It's based on a proven implementation that solved every major integration challenge.\n\n## Architecture\n\n**\"Electron as chrome, Bun as server\"** — Two runtimes working together:\n\n- **Electron\u002FNode.js** handles window management, native menus, auto-updates, and IPC\n- **Bun** runs the actual web server with all your application logic\n\nThe Electron main process spawns a bundled Bun binary that runs your server, then loads `http:\u002F\u002Flocalhost:{port}` in a `BrowserWindow`. Your web app doesn't know or care that it's inside Electron — it's just a web page with an optional `window.electronAPI` bridge for native features.\n\nThis architecture means:\n- Zero changes to your server code (it's still a standard Bun HTTP server)\n- The web app works identically in a browser or in Electron\n- Electron handles only what browsers can't: window chrome, system tray, auto-updates, file system access\n- Two separate `node_modules` — Electron uses npm, your web app uses Bun\n\n## Phase 1: Project Setup\n\nCreate the Electron subproject alongside your existing Bun web app.\n\n**What to create:**\n- `electron\u002F` directory with its own `package.json` (npm, not Bun), two tsconfigs (ESM for main, CJS for preload), `electron-builder.yml`, and macOS entitlements\n- `scripts\u002Fbuild-server.ts` for bundling the server\n- `scripts\u002Fdownload-bun.ts` for downloading platform-specific Bun binaries\n- Parent project changes: new scripts, tsconfig excludes, .gitignore entries\n\n**Reference:** [project-setup.md](references\u002Fproject-setup.md)\n\n## Phase 2: Main Process\n\nBuild the Electron main process — the entry point, server spawning, window management, auto-updater, and preload bridge.\n\n**Files to create:**\n\n| File | Purpose |\n|------|---------|\n| `electron\u002Fsrc\u002Fmain\u002Findex.ts` | App lifecycle, dev\u002Fprod mode, single-instance lock, IPC handlers |\n| `electron\u002Fsrc\u002Fmain\u002Fbun-server.ts` | Spawn bundled Bun, port selection, health polling, env var injection |\n| `electron\u002Fsrc\u002Fmain\u002Fwindow.ts` | BrowserWindow config, bounds persistence, security settings, navigation guards |\n| `electron\u002Fsrc\u002Fmain\u002Fupdater.ts` | electron-updater setup, event forwarding to renderer |\n| `electron\u002Fsrc\u002Fpreload\u002Findex.ts` | contextBridge API with invoke\u002Fon patterns and unsubscribe support |\n\n**Key decisions:**\n- Dev mode uses `ELECTRON_DEV_URL` env var to connect to the external dev server (no internal Bun spawn)\n- `autoDownload: false` — let users choose when to download updates\n- Preload exposes only specific methods, never raw `ipcRenderer`\n- Window persists bounds via `electron-store`\n\n**Reference:** [main-process.md](references\u002Fmain-process.md)\n\n## Phase 3: Web App Adaptation\n\nAdapt the existing web app to detect and respond to the Electron environment while remaining fully functional as a standalone web app.\n\n**Changes to the web app:**\n\n| Change | Details |\n|--------|---------|\n| Electron detection utility | `isElectron()`, `getElectronPlatform()`, `isMacElectron()`, `applyElectronDocumentAttributes()` |\n| Type declarations | `window.electronAPI` with all properties optional |\n| CSS drag regions | `.app-window-drag`\u002F`.app-window-no-drag` classes, auto-exclude interactive elements |\n| Traffic light spacing | `--electron-traffic-left` CSS variable (72px on macOS, 0px elsewhere) |\n| Storage path | Env var for data directory, falling back to CWD |\n| Static asset serving | Env var for static dir in production mode |\n| Auto-update hook | `useElectronUpdater()` React hook with download\u002Finstall controls |\n| Update notification | Pill component showing available → downloading → ready states |\n| Feature gating | Disable demo mode, hosted features when in Electron |\n\n**Reference:** [web-adaptation.md](references\u002Fweb-adaptation.md)\n\n## Phase 4: Build & Distribution\n\nBundle everything, set up CI\u002FCD, and handle code signing.\n\n**Build pipeline:**\n1. Build web app (`bun run build`)\n2. Bundle server to single file (`Bun.build()` → `resources\u002Fserver\u002Findex.js`)\n3. Download platform-specific Bun binaries → `resources\u002Fbun\u002F{platform}-{arch}\u002F`\n4. Compile Electron TypeScript (two passes: main ESM + preload CJS)\n5. electron-builder packages everything with `extraResources`\n\n**CI\u002FCD:**\n- GitHub Actions triggered by version tags (e.g., `v*`, `clippy-v*`)\n- Matrix builds: macOS arm64\u002Fx64 on `macos-14`, Windows x64 on `windows-latest`\n- `--publish never` in build step, separate publish job creates draft GitHub release\n- Apple certificate import and notarization in CI\n\n**Code signing:**\n- macOS: Developer ID Application certificate, exported as base64 .p12\n- Notarization via Apple ID + app-specific password\n- 5 GitHub secrets required: `APPLE_CERTIFICATE`, `APPLE_CERTIFICATE_PASSWORD`, `APPLE_ID`, `APPLE_PASSWORD`, `APPLE_TEAM_ID`\n\n**Icons:**\n- macOS: `sips` + `iconutil` from source PNG → `.icns`\n- Windows: `png-to-ico` npm package → `.ico`\n\n**Reference:** [build-and-distribute.md](references\u002Fbuild-and-distribute.md)\n\n## Cutting a Release\n\n**Never build release artifacts locally.** CI has the signing certificates and notarization credentials. Local builds produce unsigned apps that macOS Gatekeeper will block.\n\n### Release workflow:\n\n1. **Bump version** in `electron\u002Fpackage.json`, commit, and merge to main\n2. **Find the tag pattern** the CI workflow expects:\n   ```bash\n   grep -A2 'tags:' .github\u002Fworkflows\u002F*.yml\n   ```\n3. **Tag the merged commit on main:**\n   ```bash\n   git tag \u003Cpattern>\u003Cversion> origin\u002Fmain\n   git push origin \u003Cpattern>\u003Cversion>\n   ```\n4. **Monitor CI:**\n   ```bash\n   gh run list --workflow=\u003Cworkflow>.yml --limit=1\n   ```\n5. **Review and publish** the draft release on GitHub\n\n### Common mistakes:\n- Running `electron-builder --publish always` locally — no notarization\n- Using `gh release create` with local artifacts — unsigned\n- Tagging before the version bump is merged — wrong version in build\n- Tagging a feature branch instead of `origin\u002Fmain`\n\nSee [pitfalls.md §13](references\u002Fpitfalls.md) for full details.\n\n## Critical Pitfalls\n\nQuick-reference list — see [pitfalls.md](references\u002Fpitfalls.md) for full details with symptoms and code examples.\n\n| # | Pitfall | One-line fix |\n|---|---------|-------------|\n| 1 | ESM\u002FCJS conflicts | `\"type\": \"module\"` + default import pattern for CJS packages |\n| 2 | Preload must be CJS | Separate tsconfig with `\"module\": \"CommonJS\"` |\n| 3 | `__dirname` unavailable | `fileURLToPath(import.meta.url)` polyfill |\n| 4 | Dev mode MIME errors | Connect to external dev server via `ELECTRON_DEV_URL` |\n| 5 | Bun version mismatch | Pin version in download script, match dev version |\n| 6 | nvm PATH issues | `bash -lc` for spawned processes |\n| 7 | Wrong storage path | Env var + `app.getPath(\"userData\")` |\n| 8 | White flash on open | `show: false` + `ready-to-show` + dark `backgroundColor` |\n| 11 | `${platform}` != `process.platform` | Put Bun `extraResources` in `mac:`\u002F`win:` sections with `darwin-`\u002F`win32-` prefixes |\n| 12 | Bun workspace hoists deps | Bundle main with esbuild + `createRequire` banner, or use npm for electron dir |\n| 13 | Local builds aren't notarized | Always release via CI tags, never `electron-builder --publish` locally |\n\n## Dev Workflow\n\nThe `electron:dev` command runs the full development environment:\n\n```\nnpm run dev\n  ├── concurrently\n  │   ├── dev:web    → cd .. && bun run dev          (Bun dev server with HMR)\n  │   └── dev:electron\n  │       ├── wait-on http:\u002F\u002Flocalhost:3005           (wait for dev server)\n  │       ├── npm run build                           (compile TS)\n  │       └── ELECTRON_DEV_URL=... electron .         (launch Electron)\n```\n\n- The web dev server runs with HMR — changes reflect instantly\n- Electron connects to the dev server instead of spawning its own Bun\n- Preload and main process changes require restarting `electron:dev`\n- Web app changes hot-reload automatically\n\nTo test production-like behavior locally:\n```bash\nbun run electron:pack    # builds everything, packages without installer\n# Output in electron\u002Frelease\u002F\n```\n\n## Customization Checklist\n\nWhen adapting this for a new project, update these project-specific values:\n\n- [ ] App name in `electron-builder.yml` (`productName`, `appId`)\n- [ ] Window title in `window.ts`\n- [ ] Dev server port in `dev:electron` script and `dev` script\n- [ ] Environment variable names (e.g., `APP_DATA_DIR`, `APP_STATIC_DIR`)\n- [ ] `backgroundColor` in window config to match your app's theme\n- [ ] `category` in `electron-builder.yml` mac section\n- [ ] Repository URL in `electron\u002Fpackage.json`\n- [ ] Bun version in `download-bun.ts`\n- [ ] Icon assets in `electron\u002Fassets\u002F`\n",{"name":5,"description":7},"main","c173cdffe08e788a99b91928a831b476b8434838","ecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper",0,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw","https:\u002F\u002Fportfolio-longleo.vercel.app\u002Flabs\u002Fomniclaw.html","https:\u002F\u002Fgithub.com\u002FLongLeo287","https:\u002F\u002Fwww.facebook.com\u002FResourceRookie2023","2026-09-30 00:58:05",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add LongLeo287\u002FOmniClaw --skill electron-wrapper",{"tool":64,"command":65},"bunx","bunx skills add LongLeo287\u002FOmniClaw --skill electron-wrapper",{"tool":67,"command":68},"pnpm","pnpm dlx skills add LongLeo287\u002FOmniClaw --skill electron-wrapper","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Fskill.md",true,[72,78,82,86,90,94,98],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"_DIR_IDENTITY.md","REFERENCE","参考文档",355,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002F_DIR_IDENTITY.md",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002F_DIR_IDENTITY.md",359,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002F_DIR_IDENTITY.md",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fbuild_and_distribute.md",14079,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002Fbuild_and_distribute.md",{"path":87,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fmain_process.md",14708,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002Fmain_process.md",{"path":91,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fpitfalls.md",13759,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002Fpitfalls.md",{"path":95,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fproject_setup.md",8393,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002Fproject_setup.md",{"path":99,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fweb_adaptation.md",9232,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fclaude_config\u002Fskills\u002Felectron_wrapper\u002Freferences\u002Fweb_adaptation.md",[103,142,164,191,206,233],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":121,"publishedAt":44},"01M6JR0KQP4MHT32TN40D9CBFX","UI-UX Pro Max","Advanced UI\u002FUX analysis and generation skills with data-driven patterns. Python scripts (core.py, search.py) for systematic UI pattern extraction, design system generation, and component search from curated data sources.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fui_ux_pro_max\u002FSKILL.md",[109,112,113,118],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":114,"categoryName":115,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":119,"categoryName":120,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000033","数据分析师",[122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141],"ux","ui","ui ux pro max","max","pro","ui ux","design","component","search","analysis","team","rd","ui-ux","active","systematic","scripts","pattern extraction","sources","advanced","data-driven",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":149,"publishedAt":44},"01M6JR0EF5AEQHP2FSTB57H05P","shadcn-ui","Expert guidance for integrating and building applications with shadcn\u002Fui components, including component discovery, installation, customization, and best practices.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002FSKILL.md",[148],{"categoryNo":114,"categoryName":115,"taxonomyType":116,"taxonomyTypeDesc":117},[150,123,151,152,129,153,154,155,156,132,157,158,159,135,160,161,162,163],"shadcn","shadcn ui","components","core","best practices","applications","discovery","customization","guidance","expert","installation","ui components","with","for",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":173,"publishedAt":44},"01M6JR08F51BEN17RHFYX65WVE","zustand_store_ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand_store_ts\u002FSKILL.md",[170],{"categoryNo":171,"categoryName":172,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[174,175,176,177,178,179,43,180,181,182,183,184,185,186,187,188,162,189,190],"zustand store ts","zustand","store","typescript","microsoft","react","state management","state","react state management","management","global","use","patterns","separation","middleware","action","implementing",{"skillNo":192,"name":175,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":196,"publishedAt":44},"01M6JR00TDMVAFFCZXZ04AN7Q7","Zustand state management guide. Use when working with store code (src\u002Fstore\u002F**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand\u002FSKILL.md",[],[175,197,180,42,181,198,199,183,200,185,201,202,203,176,162,204,205,189,190],"development","actions","src","guide","implementation","zustand state","triggers","questions","zustand state management",{"skillNo":207,"name":208,"nameZh":6,"description":209,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":210,"categories":211,"keywords":216,"publishedAt":44},"01M6JQZSWV4KWJP112G6XHEP44","youtube_summarizer","Automatically fetch YouTube video transcripts, generate structured summaries, and send full transcripts to messaging platforms. Detects YouTube URLs and provides metadata, key insights, and downloadable transcripts.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_summarizer\u002FSKILL.md",[212,215],{"categoryNo":213,"categoryName":214,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232],"youtube","youtube summarizer","summarizer","generate","metadata","messaging","Video","fetch","telegram","transcription","summarization","structured","full","insights","transcripts","summaries",{"skillNo":234,"name":235,"nameZh":6,"description":236,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":237,"categories":238,"keywords":239,"publishedAt":44},"01M6JQZN3QJB6B77JGKJD62DQT","youtube_clipper","YouTube 视频智能剪辑工具。下载视频和字幕，AI 分析生成精细章节（几分钟级别）， 用户选择片段后自动剪辑、翻译字幕为中英双语、烧录字幕到视频，并生成总结文案。 使用场景：当用户需要剪辑 YouTube 视频、生成短视频片段、制作双语字幕版本时。 关键词：视频剪辑、YouTube、字幕翻译、双语字幕、视频下载、clip video","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_clipper\u002FSKILL.md",[],[217,240,241,223,242,243,244,245,246,247,248,249,250,251,252,253,254],"clipper","youtube clipper","Bash","下载","视频","生成","关键词","翻译","read","write","clip","总结","工具","文案","sonnet"]