export-download-debugging — скилл для Claude Code: что делает
Помогает находить и чинить ошибки выгрузки файлов в браузерах и Electron, когда сохраняются пустые файлы в 0 КБ. Пригодится при сбоях File System Access API и blob-ссылок.
npx skills add nexu-io/open-design --skill export-download-debugging -a claude-codeЧто делает export-download-debugging
Скилл задаёт схему отладки скачивания и экспорта изображений в веб-превью и Electron. Главный принцип — разделять генерацию данных и их запись. Если файл на диске весит 0 КБ, операционная система уже создала пустую заготовку через диалог сохранения, а запись потока упала позже из-за прав доступа или сбоя буфера.
Инструкция требует сначала проверить байты в памяти и только потом открывать диалог. Диалог нельзя вызывать заранее. При проблемах с showSaveFilePicker или createWritable код переключается на обычный тег <a download> или менеджер загрузок Electron. Для PNG при подозрениях на CSP и ограничения iframe скилл предписывает подставлять проверенный data URL вместо ссылки на blob.
В проекте понадобятся тесты экспорта и проверка типов через pnpm --filter @open-design/web typecheck. Для правок в Electron скилл требует также запустить проверку типов пакета десктопа и выполнить pnpm guard.
Какие задачи решает
- устранить создание файлов размером 0 КБ при скачивании
- настроить запасной путь через
<a download>при сбояхcreateWritable - обойти ограничения CSP и iframe заменой blob URL на data URL
- добавить фильтры расширений для нативного окна сохранения в Electron
Примеры запросов агенту
- Выясни, почему при экспорте картинки создаётся файл размером 0 КБ
- Почини ошибку в createWritable и добавь запасной вариант через ссылку для скачивания
- Настрой обработку события will-download и фильтры форматов для Electron
Как установить export-download-debugging
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code2Вручную: положить файлы
~/.claude/skills/export-download-debugging/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/export-download-debugging/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill export-download-debugging -a codex2Вручную: положить файлы
.agents/skills/export-download-debugging/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill export-download-debugging -a cursor2Вручную: положить файлы
.cursor/skills/export-download-debugging/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design export-download-debugging2Вручную: положить файлы
.github/skills/export-download-debugging/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill export-download-debugging -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/export-download-debuggingВручную: положить файлы
.devin/skills/export-download-debugging/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill export-download-debugging -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Похожие
Вопросы о export-download-debugging
Как установить export-download-debugging в Claude Code?
Выполните команду npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code в терминале.
Что делает скилл export-download-debugging?
Он направляет агента по шагам диагностики сбоев при сохранении файлов: требует проверять байты до показа диалога, настраивает запасные каналы скачивания и запускает тесты через pnpm.
Как скилл устраняет появление файлов размером 0 КБ?
Он блокирует вызов showSaveFilePicker до завершения формирования буфера, не давая системе создать пустой файл на диске до падения потока записи.
Исходный текст
SKILL.md · Apache-2.0
--- name: export-download-debugging description: | Diagnose and fix browser, preview, or Electron export/download failures, especially image export issues involving Save As, Blob/Data URLs, the File System Access API, createWritable failures, and 0 KB files. triggers: - "export image failed" - "image export" - "download is 0kb" - "0 KB file" - "showSaveFilePicker" - "createWritable" - "blob URL" - "Electron download" od: mode: utility category: web-artifacts --- # Export Download Debugging Use this when an export or download appears to run but produces an empty, missing, or unusable file. It is tuned for browser previews, iframe capture, and Electron shells. ## Core rule Separate capture from save. Prove the export payload has non-zero bytes before debugging the destination path. A 0 KB file often means the native picker or host created the target file, then the write failed or was blocked. ## Evidence - Record the payload type, MIME type, byte length, object URL or data URL path, and thrown error name/message. - Check browser console output and app logs around `showSaveFilePicker`, `createWritable`, `<a download>`, `URL.createObjectURL`, and URL revocation. - In Electron, inspect the `will-download` path: filename, MIME, file extension, save dialog filters, cancellation, and final file size. - Confirm the actual downloaded file size on disk and whether it opens in a normal image viewer. ## Fix order 1. Prepare and validate the export payload first; disable Save until bytes are available. 2. Prefer the simplest stable save channel for the host. If `showSaveFilePicker().createWritable()` fails, is sandboxed, or creates empty files, route to `<a download>` or Electron's download manager instead. 3. Avoid opening a native picker before the payload is ready. This prevents the host from creating an empty destination file on later write failure. 4. For PNG fallback, prefer a verified non-empty data URL when blob URLs, revocation timing, CSP, or iframe sandboxing are suspicious. 5. In Electron, add explicit Save As filters for exported image extensions (`.png`, `.jpg`, `.jpeg`, `.webp`) so users can choose a real image target. 6. Keep the UI restrained: format selection, filename/path hint, clear pending and error states, and one primary save action. ## Validation - Add or update tests for non-empty payload preparation, fallback save behavior, file extension/MIME mapping, and UI disabled/error states. - Run focused export tests, then `pnpm --filter @open-design/web typecheck`. - If Electron download handling changed, also run `pnpm --filter @open-design/desktop typecheck`. - Before landing, run `pnpm guard`, inspect the staged diff for unrelated files, generated artifacts, and accidental secrets, then use the repository's PR quality-gate workflow if the fix is being prepared for review.
© nexu-io · Apache-2.0 · nexu-io/open-design