PluginBench
Skill
Pass
Audit score 90

export-download-debugging

nexu-io/open-design

Diagnose and fix browser, preview, or Electron export/download failures, especially image export issues.

What is export-download-debugging?

This skill helps you troubleshoot export and download operations that appear to succeed but produce empty, missing, or unusable files. It covers browser previews, iframe capture, Electron shells, and issues involving the File System Access API, Blob/Data URLs, and native file pickers.

  • Separate capture from save to identify whether the export payload has non-zero bytes before debugging the destination
  • Diagnose 0 KB files by checking native picker behavior, write failures, and blocking issues
  • Validate payload type, MIME type, byte length, and object/data URL paths with error tracking
  • Debug showSaveFilePicker, createWritable, <a download>, and URL.createObjectURL failures
  • Route exports to fallback save channels (data URLs, <a download>, Electron download manager) when primary methods fail
  • Add explicit Save As filters for image extensions in Electron to ensure proper file targeting

How to install export-download-debugging

npx skills add https://github.com/nexu-io/open-design --skill export-download-debugging
Claude Code
Cursor
Windsurf
Cline

How to use export-download-debugging

  1. 1.Identify the export failure: check if the file is 0 KB, missing, or unopenable in an image viewer
  2. 2.Record the payload details: type, MIME type, byte length, URL path, and any error messages from the console
  3. 3.Check browser console and app logs for errors around showSaveFilePicker, createWritable, <a download>, and URL.createObjectURL
  4. 4.Validate that the export payload itself has non-zero bytes before investigating the save destination
  5. 5.Apply the fix order: prepare and validate the payload first, then choose the simplest stable save channel for your host environment
  6. 6.For Electron, inspect the will-download event and add explicit image extension filters to the Save As dialog
  7. 7.Test the fix with focused export tests and run typecheck to ensure no regressions

Use cases

Good for
  • An image export runs without error but creates a 0 KB file on disk
  • A browser preview's Save As dialog fails or produces an empty file due to CSP or iframe sandboxing
  • An Electron app's download manager receives a file with incorrect MIME type or extension
  • A blob URL revocation or timing issue causes the exported image to become unavailable
  • A user selects a save location but the write operation fails silently
Who it's for
  • Frontend developers building export/download features in web apps or Electron apps
  • QA engineers debugging file export failures in browser previews or design tools
  • Full-stack developers integrating File System Access API or native file pickers

export-download-debugging FAQ

What does 'separate capture from save' mean?

It means proving the export payload (image data, blob, or data URL) is non-zero and valid before debugging the file-writing step. A 0 KB file usually indicates the native picker created the target file but the write failed or was blocked.

When should I use a data URL fallback instead of a blob URL?

Use a data URL fallback when blob URLs, revocation timing, CSP, or iframe sandboxing are suspicious. Data URLs are more portable across sandboxed contexts but larger in size.

How do I prevent the native picker from creating an empty destination file?

Avoid opening the native picker (showSaveFilePicker) before the payload is ready. Validate the export payload first, then open the picker only when bytes are available.

What should I check in Electron's will-download event?

Inspect the filename, MIME type, file extension, save dialog filters, whether the download was cancelled, and the final file size on disk.

Do I need to update tests when fixing an export issue?

Yes. Add or update tests for non-empty payload preparation, fallback save behavior, file extension/MIME mapping, and UI disabled/error states.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.


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.