Managing Media & Files

Purpose

This skill provides systematic patterns for implementing media and file management components across all formats (images, videos, audio, documents). It covers upload workflows, display patterns, player controls, optimization strategies, and accessibility requirements to ensure performant, accessible, and user-friendly media experiences.

When to Use

Activate this skill when:

• Implementing file upload (single, multiple, drag-and-drop)
• Building image galleries, carousels, or lightboxes
• Creating video or audio players
• Displaying PDF or document viewers
• Optimizing media for performance (responsive images, lazy loading)
• Handling large file uploads (chunked, resumable)
• Integrating cloud storage (S3, Cloudinary)
• Implementing media accessibility (alt text, captions, transcripts)
• Designing empty states for missing media

Quick Decision Framework

Select implementation based on media type and requirements:

Images                  → Gallery pattern + lazy loading + responsive srcset
Videos                  → Player with controls + captions + adaptive streaming
Audio                   → Player with waveform + playlist support
Documents (PDF)         → Viewer with navigation + search + download
File Upload (<10MB)     → Basic drag-drop with preview
File Upload (>10MB)     → Chunked upload with progress + resume
Multiple Files          → Queue management + parallel uploads

For detailed selection criteria, reference references/implementation-guide.md.

File Upload Patterns

Basic Upload (<10MB)

For small files with simple requirements:

• Drag-and-drop zone with visual feedback
• Click to browse fallback
• File type and size validation
• Preview thumbnails for images
• Progress indicator
• Reference references/upload-patterns.md

Example: examples/basic-upload.tsx

Advanced Upload (>10MB)