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-debuggingHow to use export-download-debugging
- 1.Identify the export failure: check if the file is 0 KB, missing, or unopenable in an image viewer
- 2.Record the payload details: type, MIME type, byte length, URL path, and any error messages from the console
- 3.Check browser console and app logs for errors around showSaveFilePicker, createWritable, <a download>, and URL.createObjectURL
- 4.Validate that the export payload itself has non-zero bytes before investigating the save destination
- 5.Apply the fix order: prepare and validate the payload first, then choose the simplest stable save channel for your host environment
- 6.For Electron, inspect the will-download event and add explicit image extension filters to the Save As dialog
- 7.Test the fix with focused export tests and run typecheck to ensure no regressions
Use cases
- 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
- 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
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.
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.
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.
Inspect the filename, MIME type, file extension, save dialog filters, whether the download was cancelled, and the final file size on disk.
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-downloadpath: 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
- Prepare and validate the export payload first; disable Save until bytes are available.
- 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. - Avoid opening a native picker before the payload is ready. This prevents the host from creating an empty destination file on later write failure.
- For PNG fallback, prefer a verified non-empty data URL when blob URLs, revocation timing, CSP, or iframe sandboxing are suspicious.
- In Electron, add explicit Save As filters for exported image extensions
(
.png,.jpg,.jpeg,.webp) so users can choose a real image target. - 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.
Related skills
More from nexu-io/open-design and the wider catalog.

fal-3d
Generate 3D models from text or images via fal.ai for games, AR, and product design.

fal-generate
Generate images and videos with Flux, SDXL, Ideogram, and other fal.ai models.

fal-image-edit
AI-powered image editing with style transfer, background removal, object removal, and inpainting.

fal-kling-o3
Generate images and videos with Kling O3, Kling's most powerful model family, via fal.ai.

fal-lip-sync
Create talking head videos and lip sync audio to video via fal.ai

fal-realtime
Real-time streaming AI image generation via fal.ai for rapid creative iteration.