sketch-upload-pipeline

Diagnose Sketch image upload failures and preview rendering errors.

Updated Dec 31, 2025
One-click install
npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-upload-pipeline
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sketch-upload-pipeline
Source: https://github.com/joelklabo/markdowntown-cli/tree/main/codex/skills/sketch-upload-pipeline
Command: npx skills add https://github.com/joelklabo/markdowntown-cli --skill sketch-upload-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill standardizes debugging for Sketch Magic upload failures and preview rendering issues, helping engineers quickly identify whether problems originate from client validation, HEIC conversion, preview lifecycle, or server constraints.

Core Features & Use Cases

  • Client validation checks: verify accepted MIME types (PNG, JPEG, HEIC/HEIF, WebP) and default size limits (10 MB).
  • HEIC conversion guidance: confirm client-side conversion to JPEG via heic2any and identify fallback behavior when conversion fails.
  • Preview lifecycle and server constraints: inspect object URL creation/revocation, ensure preview images load with naturalWidth > 0, and validate server body size limits and /api/convert handling.
  • Safe reporting: collect file type, size, and error codes only and avoid logging image bytes or any PII. Use case: troubleshoot a user-reported blank preview after uploading an HEIC file to a web app.

Quick Start

Diagnose a blank Sketch preview by checking client validation rules, HEIC conversion outcome, object URL lifecycle, and server upload limits.

Frequently Asked Questions about sketch-upload-pipeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does an HEIC image preview show up blank after upload in a Next.js app?

A blank HEIC preview often means client-side HEIC conversion failed or the object URL was not created properly. Verify the heic2any conversion succeeded, check object URL lifecycle, and ensure the preview image loads with naturalWidth greater than zero.

What is the default file size limit for image uploads during Sketch preview troubleshooting?

The default file size limit for image uploads is 10 MB. Troubleshooting image upload failures involves verifying the file does not exceed this size limit, checking accepted MIME types, and ensuring server body size limits accommodate the request.

How do I debug HEIC conversion failures for web image previews?

Debug HEIC conversion failures by confirming client-side conversion to JPEG via heic2any and identifying fallback behavior. Validate accepted MIME types like HEIC and HEIF, enforce the 10 MB size limit, and verify the object URL lifecycle for the preview image.

Does the image upload pipeline support WebP and PNG MIME types?

Yes, the image upload pipeline supports WebP and PNG MIME types alongside JPEG and HEIC. Client validation checks verify accepted MIME types including PNG, JPEG, HEIC, HEIF, and WebP before proceeding to preview rendering and server upload.

How do I safely report image upload errors without logging PII?

Safely report image upload errors by collecting only the file type, file size, and specific error codes. Enforce safe reporting practices by strictly avoiding logging actual image bytes or any personally identifiable information during the troubleshooting process.

What server-side constraints cause Sketch image upload failures?

Server-side constraints causing Sketch image upload failures include strict server body size limits and improper API convert endpoint handling. Troubleshooting requires validating these server upload limits and ensuring the API endpoint correctly processes the incoming file data.