skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

managing-media

Implements file upload, image gallery, video player, audio player, and PDF viewer components.

1|Updated Feb 24, 2026
Search Tags:#accessibility#react#video player#file upload#media optimization#image gallery#pdf viewer
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill managing-media-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: managing-media
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/managing-media
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill managing-media-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-dropzone, react-image-gallery, video.js, wavesurfer.js, react-pdf, browser-image-compression, Pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building media-rich web interfaces requires solving recurring problems: drag-and-drop uploads, chunked transfers for large files, responsive image galleries, accessible video and audio players, and PDF rendering. This Skill provides decision frameworks, working code examples, and library recommendations so you don't have to research and implement these patterns from scratch. ## Core Features & Use Cases - File Upload Patterns: Basic drag-and-drop uploads under 10MB, chunked and resumable uploads for large files, and direct-to-cloud uploads via S3 pre-signed URLs. - Media Display Components: Image galleries with lightbox and lazy loading, carousels with touch support, custom video players with captions, audio players with waveform visualization, and PDF viewers with page navigation. - Optimization & Accessibility: Responsive images with srcset, WebP/AVIF conversion, lazy loading, CDN integration, plus WCAG 2.1 compliance patterns for alt text, captions, and transcripts. - Use Case: When building a dashboard that lets users upload product photos, use this Skill to implement a validated drag-and-drop upload zone with client-side compression, then display results in a responsive gallery with an accessible lightbox. ## Quick Start Ask the AI to implement a drag-and-drop image upload component with preview, validation, and progress tracking using the managing-media skill.

Frequently Asked Questions about managing-media

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

FAQPage Schema
How do I implement drag-and-drop file upload in React?▼

Use react-dropzone's useDropzone hook to create a drop zone with drag state feedback, file type validation, and size limits. The skill's basic-upload example shows a complete implementation accepting images up to 10MB with visual drag-active states.

How to upload large files over 100MB in a web app?▼

Split the file into 5MB chunks using Blob.slice and upload each chunk sequentially with an upload ID for tracking. This enables progress reporting and resume capability by tracking which chunks the server has already received.

What is the best React library for image galleries?▼

react-image-gallery offers a feature-complete gallery with mobile swipe, fullscreen, and lazy loading at around 30KB. LightGallery provides more features and plugins but has a larger bundle, while React Image Lightbox suits simple lightbox needs.

video.js vs Plyr for custom video players?▼

video.js is the industry standard with HLS/DASH streaming support, a plugin ecosystem, and excellent accessibility, making it best for professional video needs. Plyr offers a simpler setup with a polished default UI for embedded videos.

How do I make video content WCAG accessible?▼

Add synchronized captions using WebVTT track elements, provide a full text transcript, and ensure keyboard controls for play, seek, volume, and fullscreen. Avoid autoplay, or make it pausable, to meet WCAG 2.1 Level A requirements.

How to optimize images for web performance?▼

Serve responsive images with srcset and sizes attributes, convert to WebP or AVIF for 30-50% smaller files, and lazy load off-screen images. Client-side compression before upload and CDN delivery with edge caching further reduce load times.

Related Skills

Explore More Software Engineering Skills→
digirati-co-ukdigirati-co-uk
57

media-assets

Automate media upload, validation, storage, and thumbnail generation for Madoc TS assets.

Official
Intermediate
lgoodcodelgoodcode

image-pipeline

Automate image upload processing, moderation, and CDN delivery with Sharp and Gemini.

Community
Advanced
gizixgizix
2

streamlit-patterns

Provide standardized UI patterns for Streamlit app forms, file handling, and progress.

Community
Basic
ziyunliziyunli

archiving-clipping-media

Download external media from clippings into local storage with relative paths.

Community
Advanced