Skills
.Work. You
Rest

sketch-upload-pipeline

Community

Resolve Sketch image upload and preview failures.

Software Engineering#preview#nextjs#upload#image-processing#sketch#heic#file-validation
Authorjoelklabo
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: sketch-upload-pipeline
Download link: https://github.com/joelklabo/markdowntown-cli/archive/main.zip#sketch-upload-pipeline

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.