К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

export-download-debugging — скилл для Claude Code: что делает

Помогает находить и чинить ошибки выгрузки файлов в браузерах и Electron, когда сохраняются пустые файлы в 0 КБ. Пригодится при сбоях File System Access API и blob-ссылок.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/export-download-debugging/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/export-download-debugging/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

create-design-md ibelick Генерирует и обновляет файл DESIGN.md на основе репозитория или открытого сайта. Нужен, чтобы передать кодинг-агентам точный дизайн-контекст интерфейса. Claude Code CX Codex Cursor +1 4 400установок debugging-streamlit streamlit Скилл запускает отладку приложений и компонентов Streamlit через команду make debug с горячей перезагрузкой, сбором логов и скриншотами через Playwright. Claude Code CX Codex Cursor +1 493установок design-dna zanwei Разбирает референсы на токены, стиль и визуальные эффекты, затем применяет профиль к макету. Нужен для работы со скриншотами, изображениями и URL. Claude Code CX Codex Cursor +1 6 500установок ui-ux-designer sickn33 Скилл помогает проектировать интерфейсы, пользовательские потоки и дизайн-системы с учётом исследований и доступности. Пригодится для редизайна и проверки состояний интерфейса. Claude Code CX Codex Cursor +1 3 100установок expo-design-system expo Помогает выстроить дизайн-систему в приложении на Expo: организовать токены, вынести общие компоненты и убрать расхождения в стилях. Claude Code CX Codex Cursor +1 16 500установок p5js SHL0MS, Hermes Agent Создаёт браузерные скетчи на p5.js: генеративное искусство, интерактивные визуализации, 3D-сцены с WebGL, audio-reactive графика. Экспорт в PNG, GIF, MP4 или SVG. Claude Code CX Codex Cursor +1 534установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой