nexu-io/open-design
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.
npx skills add https://github.com/nexu-io/open-design --skill "skills/export-download-debugging"Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
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.
npx skills add https://github.com/nexu-io/open-design --skill "skills/export-download-debugging"The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.
354 source words · 4 usable sections
Implementation workflow
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
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.
Record the payload type, MIME type, byte length, object URL or data URL path,
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 or Electron's download manager instea…
Add or update tests for non-empty payload preparation, fallback save behavior,
Development checklist
The source section “Core rule” has been checked.
The source section “Evidence” has been checked.
The source section “Fix order” has been checked.
The source section “Validation” has been checked.
Static permission evidence
These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.
Choose a different workflow
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailGrounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailUse BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
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.
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "skills/export-download-debugging". Inspect the command and pinned source before running it.
Static rules flagged network in the source; the page lists the matching lines and excerpts.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.
Use BEFORE writing/changing tests, adding mocks, or test-only methods on production classes — vs mocking-the-mock, production pollution, partial mocks, and overfit/tautological assertions
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
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.
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.
showSaveFilePicker,
createWritable, <a download>, URL.createObjectURL, and URL revocation.will-download path: filename, MIME, file extension,
save dialog filters, cancellation, and final file size.showSaveFilePicker().createWritable() fails, is sandboxed, or creates empty
files, route to <a download> or Electron's download manager instead..png, .jpg, .jpeg, .webp) so users can choose a real image target.pnpm --filter @open-design/web typecheck.pnpm --filter @open-design/desktop typecheck.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.