managing-media
installsforks
How to install managing-media?
ancoleman/ai-design-components/managing-media
$npx -y skills add ancoleman/ai-design-components --skill managing-mediaImplements media and file management components including file upload (drag-drop, multi-file, resumable), image galleries (lightbox, carousel, masonry), video players (custom controls, captions, adaptive streaming), audio players (waveform, playlists), document viewers (PDF, Offi
SKILL.md
| 1 | # Managing Media & Files |
| 2 | |
| 3 | ## Purpose |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## When to Use |
| 8 | |
| 9 | Activate this skill when: |
| 10 | - Implementing file upload (single, multiple, drag-and-drop) |
| 11 | - Building image galleries, carousels, or lightboxes |
| 12 | - Creating video or audio players |
| 13 | - Displaying PDF or document viewers |
| 14 | - Optimizing media for performance (responsive images, lazy loading) |
| 15 | - Handling large file uploads (chunked, resumable) |
| 16 | - Integrating cloud storage (S3, Cloudinary) |
| 17 | - Implementing media accessibility (alt text, captions, transcripts) |
| 18 | - Designing empty states for missing media |
| 19 | |
| 20 | ## Quick Decision Framework |
| 21 | |
| 22 | Select implementation based on media type and requirements: |
| 23 | |
| 24 | ``` |
| 25 | Images → Gallery pattern + lazy loading + responsive srcset |
| 26 | Videos → Player with controls + captions + adaptive streaming |
| 27 | Audio → Player with waveform + playlist support |
| 28 | Documents (PDF) → Viewer with navigation + search + download |
| 29 | File Upload (<10MB) → Basic drag-drop with preview |
| 30 | File Upload (>10MB) → Chunked upload with progress + resume |
| 31 | Multiple Files → Queue management + parallel uploads |
| 32 | ``` |
| 33 | |
| 34 | For detailed selection criteria, reference `references/implementation-guide.md`. |
| 35 | |
| 36 | ## File Upload Patterns |
| 37 | |
| 38 | ### Basic Upload (<10MB) |
| 39 | |
| 40 | For small files with simple requirements: |
| 41 | - Drag-and-drop zone with visual feedback |
| 42 | - Click to browse fallback |
| 43 | - File type and size validation |
| 44 | - Preview thumbnails for images |
| 45 | - Progress indicator |
| 46 | - Reference `references/upload-patterns.md` |
| 47 | |
| 48 | Example: `examples/basic-upload.tsx` |
| 49 | |
| 50 | ### Advanced Upload (>10MB) |
| 51 | |
| 52 | For large files requiring reliability: |
| 53 | - Chunked uploads (resume on failure) |
| 54 | - Parallel uploads for multiple files |
| 55 | - Upload queue management |
| 56 | - Cancel and retry controls |
| 57 | - Client-side compression |
| 58 | - Reference `references/advanced-upload.md` |
| 59 | |
| 60 | Example: `examples/chunked-upload.tsx` |
| 61 | |
| 62 | ### Image-Specific Upload |
| 63 | |
| 64 | For image files with editing requirements: |
| 65 | - Crop and rotate tools |
| 66 | - Client-side resize before upload |
| 67 | - Format conversion (PNG → WebP) |
| 68 | - Alt text input field (accessibility) |
| 69 | - Reference `references/image-upload.md` |
| 70 | |
| 71 | Example: `examples/image-upload-crop.tsx` |
| 72 | |
| 73 | ## Image Display Components |
| 74 | |
| 75 | ### Image Gallery |
| 76 | |
| 77 | For collections of images: |
| 78 | - Grid or masonry layout |
| 79 | - Lazy loading (native or custom) |
| 80 | - Lightbox on click |
| 81 | - Zoom and pan controls |
| 82 | - Keyboard navigation (arrow keys) |
| 83 | - Responsive design |
| 84 | - Reference `references/gallery-patterns.md` |
| 85 | |
| 86 | Example: `examples/image-gallery.tsx` |
| 87 | |
| 88 | ### Carousel/Slider |
| 89 | |
| 90 | For sequential image display: |
| 91 | - Auto-play (optional, pausable for accessibility) |
| 92 | - Dot or thumbnail navigation |
| 93 | - Touch/swipe support |
| 94 | - ARIA roles for accessibility |
| 95 | - Infinite loop option |
| 96 | - Reference `references/carousel-patterns.md` |
| 97 | |
| 98 | Example: `examples/carousel.tsx` |
| 99 | |
| 100 | ### Image Optimization |
| 101 | |
| 102 | Essential optimization strategies: |
| 103 | - Responsive images using `srcset` and `sizes` |
| 104 | - Modern formats (WebP with JPG fallback) |
| 105 | - Progressive JPEGs |
| 106 | - Blur-up placeholders |
| 107 | - CDN integration |
| 108 | - Reference `references/image-optimization.md` |
| 109 | |
| 110 | ## Video Components |
| 111 | |
| 112 | ### Video Player |
| 113 | |
| 114 | For custom video playback: |
| 115 | - Custom controls or native |
| 116 | - Play/pause, volume, fullscreen |
| 117 | - Captions/subtitles (VTT format) |
| 118 | - Playback speed control |
| 119 | - Picture-in-picture support |
| 120 | - Keyboard shortcuts |
| 121 | - Reference `references/video-player.md` |
| 122 | |
| 123 | Example: `examples/video-player.tsx` |
| 124 | |
| 125 | ### Video Optimization |
| 126 | |
| 127 | Performance strategies for video: |
| 128 | - Adaptive streaming (HLS, DASH) |
| 129 | - Thumbnail preview on hover |
| 130 | - Lazy loading off-screen videos |
| 131 | - Preload strategies (`metadata`, `auto`, `none`) |
| 132 | - Multiple quality levels |
| 133 | - Reference `references/video-optimization.md` |
| 134 | |
| 135 | ## Audio Components |
| 136 | |
| 137 | ### Audio Player |
| 138 | |
| 139 | For audio playback: |
| 140 | - Play/pause, seek, volume controls |
| 141 | - Waveform visualization (optional) |
| 142 | - Playlist support |
| 143 | - Download option |
| 144 | - Playback speed control |
| 145 | - Visual indicators for accessibility |
| 146 | - Reference `references/audio-player.md` |
| 147 | |
| 148 | Example: `examples/audio-player.tsx` |
| 149 | |
| 150 | ## Document Viewers |
| 151 | |
| 152 | ### PDF Viewer |
| 153 | |
| 154 | For PDF document display: |
| 155 | - Page navigation (prev/next, jump to page) |
| 156 | - Zoom in/out controls |
| 157 | - Text search within document |
| 158 | - Download and print options |
| 159 | - Thumbnail sidebar |
| 160 | - Reference `references/pdf-viewer.md` |
| 161 | |
| 162 | Example: `examples/pdf-viewer.ts |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
