Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

export-download-debugging — Claude Code skill: what it does

Diagnoses and resolves failed downloads, broken File System Access API calls, and 0 KB file exports in browsers and Electron shells.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code
Open on GitHub

What export-download-debugging does

This skill guides debugging when an export runs but leaves behind an empty or broken file. The core directive separates payload preparation from the actual save call. When a downloaded file sits at 0 KB on disk, the operating system usually created the file handle before the write stream failed.

The workflow validates payload bytes before showing any save dialog. Never trigger native pickers early. If showSaveFilePicker or createWritable fails inside an iframe or sandbox, the fix routes the output through standard <a download> tags or Electron's download manager. For PNG images under strict CSP policies, it switches from blob URLs to verified data URLs.

Verification requires running export tests alongside pnpm --filter @open-design/web typecheck. Electron changes also call for running desktop type checks and pnpm guard before opening a pull request.

What it helps with

  • fix 0 KB files generated by failed write streams
  • route failed createWritable calls to an <a download> fallback
  • replace failing blob URLs with data URLs under strict CSP rules
  • configure image extension filters for Electron Save As dialogs

Example prompts for the agent

  • Debug why image export produces a 0 KB file in the browser preview
  • Fix the createWritable error by adding an a-download fallback channel
  • Inspect the Electron will-download handler and add image extension filters

How to install export-download-debugging

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/export-download-debugging/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

create-design-md ibelick Creates or updates a DESIGN.md file from a code repository or website. It gives coding agents persistent UI context without altering application source code. Claude Code CX Codex Cursor +1 4,400installs debugging-streamlit streamlit Runs Streamlit full-stack debugging with hot-reload, dedicated session logs, and Playwright UI screenshot helpers for testing frontend and backend changes. Claude Code CX Codex Cursor +1 493installs design-dna zanwei Extracts design tokens, style and visual effects from references, then applies the profile to a design. Use it with screenshots, images, URLs or Design DNA JSON. Claude Code CX Codex Cursor +1 6,500installs ui-ux-designer sickn33 This skill supports interface design, user flows, and design systems with research and accessibility checks. Use it for redesigns, prototypes, and interaction reviews. Claude Code CX Codex Cursor +1 3,100installs expo-design-system expo Builds and audits a design system in Expo apps by centralizing design tokens, structuring reusable components, and eliminating hardcoded styles. Claude Code CX Codex Cursor +1 16,500installs p5js SHL0MS, Hermes Agent Produces p5.js sketches in the browser: generative art, interactive data viz, 3D WebGL scenes, audio-reactive visuals. Exports to PNG, GIF, MP4, or SVG. Claude Code CX Codex Cursor +1 534installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about export-download-debugging

How do I install export-download-debugging in Claude Code?

Run npx skills add nexu-io/open-design --skill export-download-debugging -a claude-code in your terminal.

What does export-download-debugging do?

It directs the coding agent to validate export payloads before triggering file pickers and provides fallback paths like <a download> when native file system APIs fail.

How does the skill handle 0 KB download bugs?

It keeps the Save action disabled until payload bytes are confirmed in memory, preventing the host OS from creating an empty target file prior to writing.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor