Are the media components accessible?

Yes, the skill enforces WCAG requirements including mandatory alt text for images, captions for video, and keyboard-accessible player controls.

Does it provide image optimization strategies?

Yes, it covers modern optimization techniques like WebP conversion, responsive srcset generation, and lazy loading placeholders.

Can I integrate this with cloud storage like AWS S3?

Absolutely. The skill provides detailed patterns for direct-to-cloud uploads using signed URLs for services like AWS S3 and Cloudinary.

Does this skill support large file uploads?

Yes, it includes specialized patterns for chunked and resumable uploads designed to handle files larger than 10MB reliably.

What frontend libraries does this skill recommend?

It provides implementation guides for industry-standard libraries such as video.js for video, wavesurfer.js for audio, and react-pdf for documents.

Managing Media & Files

Name: Managing Media & Files
Author: ancoleman

byancoleman

•

158

•

设计工具

Implements high-performance media components and secure file management workflows for modern web applications.

This skill provides comprehensive implementation patterns for managing diverse media types, including images, video, audio, and documents. It streamlines the creation of robust file upload systems, interactive galleries, and optimized players while ensuring cross-platform performance and accessibility compliance. By integrating best practices for lazy loading, CDN usage, and chunked uploads, it allows developers to build rich content experiences that are both scalable and user-friendly.

主要功能

01Integrated document viewers for PDF and Office files with search and navigation.

02Custom video and audio players with waveform visualization and adaptive streaming.

03Responsive image galleries with lightbox, masonry layouts, and lazy loading.

04158 GitHub stars

05Advanced file upload patterns including drag-and-drop, chunked, and resumable uploads.

06Performance optimization tools for image compression, responsive srcset, and CDN integration.

使用场景

01Building a user-driven content platform with complex file upload and processing requirements.

02Implementing document management systems with built-in PDF previews and secure cloud storage.

03Creating an accessible media library with high-performance video and audio playback capabilities.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components managing-media

For use in Claude.ai and ChatGPT

主要功能

01Integrated document viewers for PDF and Office files with search and navigation.

02Custom video and audio players with waveform visualization and adaptive streaming.

03Responsive image galleries with lightbox, masonry layouts, and lazy loading.

04158 GitHub stars

05Advanced file upload patterns including drag-and-drop, chunked, and resumable uploads.

06Performance optimization tools for image compression, responsive srcset, and CDN integration.

使用场景

01Building a user-driven content platform with complex file upload and processing requirements.

02Implementing document management systems with built-in PDF previews and secure cloud storage.

03Creating an accessible media library with high-performance video and audio playback capabilities.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components managing-media

For use in Claude.ai and ChatGPT