Agent skill

Managing Media

by ancoleman in ancoleman/ai-design-components

Implements media and file management components including file upload (drag-drop, multi-file, resumable), image galleries (lightbox, carousel, masonry), video players (custom controls, captions…

MITAuto-check passedFrontend & Design

Install Managing Media

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/managing-media .claude/skills/managing-media && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .claude/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/managing-media .agents/skills/managing-media && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .agents/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/managing-media .cursor/skills/managing-media && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .cursor/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/ancoleman/ai-design-components.git --path skills/managing-media

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/managing-media .gemini/skills/managing-media && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .gemini/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/managing-media .github/skills/managing-media && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .github/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ancoleman/ai-design-components --skill managing-media -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install ancoleman/ai-design-components managing-media --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/managing-media .opencode/skills/managing-media && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "managing-media" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/managing-media into .opencode/skills/managing-media/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "managing-media", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: managing-media
GitHub stars: 526
Token cost: ~3.3k tokens
SKILL.md length: 1,106 words
Files: 43 (incl. scripts, references, assets)
Skills in repo: 75
Repo updated: Dec 11, 2025
First seen: Oct 7, 2026
Licence: MIT

At a glance

Implements media and file management components including file upload (drag-drop, multi-file, resumable), image galleries (lightbox, carousel, masonry), video players (custom controls, captions…

Works in 4 steps: Grid layout - CSS Grid with auto-fit… → Masonry layout - Pinterest-style with… → Carousel - Single image on mobile,… → …
Displaying media
SKILL.md covers Purpose, When to Use, Quick Decision Framework and File Upload Patterns, plus 7 more sections
Calls npm, python and node

What it does

Managing Media is an agent skill from ancoleman/ai-design-components. Implements 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, Office), and optimization strategies (compression, responsive images, lazy loading, CDN). Use when handling files, displaying media, or building rich content experiences.

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 44 other files, including scripts, reference files and assets (for example `README.md`, `assets/upload-config.json` and `outputs.yaml`).

It sits in Frontend & Design, covering File uploads and storage, Web performance and File organization. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

Displaying media
Building rich content experiences

Example prompts

“Use the managing-media skill to implement media and file management components including file upload (drag-drop, multi-file, resumable), image…”
“/managing-media”

Requirements

Python 3
Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

Grid layout - CSS Grid with auto-fit columns
Masonry layout - Pinterest-style with variable heights
Carousel - Single image on mobile, multiple on desktop
Stack - Vertical list on mobile, grid on desktop

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
- npm
- python
- node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Managing Media loads about 3.3k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 1,106 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~115
When it runs · the whole SKILL.md, loaded when a task matches: ~3.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~18k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 1,106 words, ~3,307 tokens.

Download SKILL.mdSave it as .claude/skills/managing-media/SKILL.md (or your agent's skills folder). This skill also uses 42 other files; get the full folder from GitHub.

name: managing-media
description: Implements 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, Office), and optimization strategies (compression, responsive images, lazy loading, CDN). Use when handling files, displaying media, or building rich content experiences.

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)

For large files requiring reliability:

Chunked uploads (resume on failure)
Parallel uploads for multiple files
Upload queue management
Cancel and retry controls
Client-side compression
Reference references/advanced-upload.md

Example: examples/chunked-upload.tsx

Image-Specific Upload

For image files with editing requirements:

Crop and rotate tools
Client-side resize before upload
Format conversion (PNG → WebP)
Alt text input field (accessibility)
Reference references/image-upload.md

Example: examples/image-upload-crop.tsx

Image Display Components

Image Gallery

For collections of images:

Grid or masonry layout
Lazy loading (native or custom)
Lightbox on click
Zoom and pan controls
Keyboard navigation (arrow keys)
Responsive design
Reference references/gallery-patterns.md

Example: examples/image-gallery.tsx

Carousel/Slider

For sequential image display:

Auto-play (optional, pausable for accessibility)
Dot or thumbnail navigation
Touch/swipe support
ARIA roles for accessibility
Infinite loop option
Reference references/carousel-patterns.md

Example: examples/carousel.tsx

Image Optimization

Essential optimization strategies:

Responsive images using srcset and sizes
Modern formats (WebP with JPG fallback)
Progressive JPEGs
Blur-up placeholders
CDN integration
Reference references/image-optimization.md

Video Components

Video Player

For custom video playback:

Custom controls or native
Play/pause, volume, fullscreen
Captions/subtitles (VTT format)
Playback speed control
Picture-in-picture support
Keyboard shortcuts
Reference references/video-player.md

Example: examples/video-player.tsx

Video Optimization

Performance strategies for video:

Adaptive streaming (HLS, DASH)
Thumbnail preview on hover
Lazy loading off-screen videos
Preload strategies (metadata, auto, none)
Multiple quality levels
Reference references/video-optimization.md

Audio Components

Audio Player

For audio playback:

Play/pause, seek, volume controls
Waveform visualization (optional)
Playlist support
Download option
Playback speed control
Visual indicators for accessibility
Reference references/audio-player.md

Example: examples/audio-player.tsx

Document Viewers

PDF Viewer

For PDF document display:

Page navigation (prev/next, jump to page)
Zoom in/out controls
Text search within document
Download and print options
Thumbnail sidebar
Reference references/pdf-viewer.md

Example: examples/pdf-viewer.tsx

Office Document Preview

For DOCX, XLSX, PPTX files:

Read-only preview or editable
Cloud-based rendering (Google Docs Viewer, Office Online)
Local rendering (limited support)
Download option
Reference references/office-viewer.md

Performance Optimization

File Size Guidelines

Validate client-side before upload:

Images: <5MB recommended
Videos: <100MB for web, larger for cloud
Audio: <10MB
Documents: <25MB
Provide clear error messages
Suggest compression tools

Image Optimization Checklist

bash

# Generate optimized image set
python scripts/optimize_images.py --input image.jpg --formats webp,jpg,avif

Strategies:

Compress before upload (client or server)
Generate multiple sizes (thumbnails, medium, large)
Use responsive srcset for device targeting
Convert to modern formats (WebP, AVIF)
Serve via CDN with edge caching

Reference references/performance-optimization.md for complete guide.

Video Optimization Checklist

Strategies:

Transcode to multiple qualities (360p, 720p, 1080p)
Implement adaptive bitrate streaming
Use CDN with edge caching
Lazy load videos outside viewport
Provide poster images

Accessibility Requirements

Images

Essential patterns:

Alt text required for meaningful images
Empty alt (alt="") for decorative images
Use <figure> and <figcaption> for context
Sufficient color contrast for overlays
Reference references/accessibility-images.md

Videos

Essential patterns:

Captions/subtitles for all speech
Transcript link provided
Keyboard controls (space, arrows, M for mute)
Pause auto-play (WCAG requirement)
Audio description track (if applicable)
Reference references/accessibility-video.md

Audio

Essential patterns:

Transcripts available
Visual indicators (playing, paused, volume)
Keyboard controls
ARIA labels for controls
Reference references/accessibility-audio.md

To validate accessibility:

bash

node scripts/validate_media_accessibility.js

For complete requirements, reference references/accessibility-patterns.md.

Library Recommendations

Image Gallery: react-image-gallery

Best for feature-complete galleries:

Mobile swipe support
Fullscreen mode
Thumbnail navigation
Lazy loading built-in
Responsive out of the box

bash

npm install react-image-gallery

See examples/gallery-react-image.tsx for implementation. Reference /xiaolin/react-image-gallery for documentation.

Alternative: LightGallery (more features, larger bundle)

Show full SKILL.md (438 more words)Show less

Video: video.js

Best for custom video players:

Plugin ecosystem
HLS and DASH support
Accessible controls
Theming support
Extensive documentation

bash

npm install video.js

See examples/video-js-player.tsx for implementation.

Audio: wavesurfer.js

Best for waveform visualization:

Beautiful waveform display
Timeline interactions
Plugin support
Responsive
Lightweight

bash

npm install wavesurfer.js

See examples/audio-waveform.tsx for implementation.

PDF: react-pdf

Best for PDF rendering in React:

Page-by-page rendering
Text selection support
Annotations (premium)
Worker-based for performance

bash

npm install react-pdf

See examples/pdf-react.tsx for implementation.

For detailed comparison, reference references/library-comparison.md.

Design Token Integration

All media components use the design-tokens skill for theming:

Color tokens for backgrounds, overlays, controls
Spacing tokens for padding and gaps
Border tokens for thumbnails and containers
Shadow tokens for elevation
Motion tokens for animations

Supports light, dark, high-contrast, and custom themes. Reference the design-tokens skill for theme switching.

Example token usage:

css

.upload-zone {
  border: var(--upload-zone-border);
  background: var(--upload-zone-bg);
  padding: var(--upload-zone-padding);
  border-radius: var(--upload-zone-border-radius);
}

.image-gallery {
  gap: var(--gallery-gap);
}

.video-player {
  background: var(--video-player-bg);
  border-radius: var(--video-border-radius);
}

Responsive Strategies

Image Galleries

Four responsive approaches:

Grid layout - CSS Grid with auto-fit columns
Masonry layout - Pinterest-style with variable heights
Carousel - Single image on mobile, multiple on desktop
Stack - Vertical list on mobile, grid on desktop

See examples/responsive-gallery.tsx for implementations.

Video Players

Responsive considerations:

16:9 aspect ratio container
Full-width on mobile
Constrained width on desktop
Picture-in-picture for multitasking
Touch-friendly controls (larger hit areas)

Reference references/responsive-media.md for patterns.

Cloud Storage Integration

Client-Side Direct Upload

For AWS S3, Cloudinary, etc.:

Request signed URL from backend
Upload directly to cloud storage
Notify backend of completion
Display uploaded media

Benefits:

Reduces server load
Faster uploads (direct to CDN)
No file size limits on your server

See examples/s3-direct-upload.tsx for implementation. Reference references/cloud-storage.md for setup.

Testing Tools

Generate mock media:

bash

# Generate test images
python scripts/generate_mock_images.py --count 50 --sizes thumb,medium,large

# Generate test video metadata
python scripts/generate_video_metadata.py --duration 300

Validate media accessibility:

bash

node scripts/validate_media_accessibility.js

Analyze performance:

bash

node scripts/analyze_media_performance.js --files images/*.jpg

Working Examples

Start with the example matching the requirements:

basic-upload.tsx              # Simple drag-drop upload
chunked-upload.tsx            # Large file upload with resume
image-upload-crop.tsx         # Image upload with cropping
image-gallery.tsx             # Grid gallery with lightbox
carousel.tsx                  # Image carousel/slider
video-player.tsx              # Custom video player
audio-player.tsx              # Audio player with controls
audio-waveform.tsx            # Audio with waveform visualization
pdf-viewer.tsx                # PDF document viewer
s3-direct-upload.tsx          # Direct upload to S3
responsive-gallery.tsx        # Responsive image gallery patterns

Resources

Scripts (Token-Free Execution)

scripts/optimize_images.py - Batch image optimization
scripts/generate_mock_images.py - Test image generation
scripts/validate_media_accessibility.js - Accessibility validation
scripts/analyze_media_performance.js - Performance analysis

References (Detailed Documentation)

references/upload-patterns.md - File upload implementations
references/gallery-patterns.md - Image gallery designs
references/video-player.md - Video player features
references/audio-player.md - Audio player patterns
references/pdf-viewer.md - Document viewer setup
references/accessibility-patterns.md - Media accessibility
references/performance-optimization.md - Optimization strategies
references/cloud-storage.md - Cloud integration guides
references/library-comparison.md - Library analysis

Examples (Implementation Code)

See examples/ directory for working implementations

Assets (Templates and Configs)

assets/upload-config.json - Upload constraints and settings
assets/media-templates/ - Placeholder images and icons

Cross-Skill Integration

This skill works with other component skills:

Forms: File input fields, validation, submission
Feedback: Upload progress, success/error messages
AI Chat: Image attachments, file sharing
Dashboards: Media widgets, thumbnails
Design Tokens: All visual styling via token system

Next Steps

Identify the media type (images, video, audio, documents)
Determine upload requirements (size, quantity, editing)
Choose display pattern (gallery, carousel, player, viewer)
Select library or implement custom solution
Implement accessibility requirements
Apply optimization strategies
Test performance and responsive behavior
Integrate with cloud storage (optional)

Files

SKILL.md and 42 other files (scripts, references, assets) in skills/managing-media of ancoleman/ai-design-components.

SKILL.md
README.md
assets/upload-config.json
examples/audio-player.tsx
examples/audio-waveform.tsx
examples/basic-upload.tsx
examples/carousel.tsx
examples/chunked-upload.tsx
examples/gallery-react-image.tsx
examples/image-gallery.tsx
examples/image-upload-crop.tsx
examples/pdf-react.tsx
examples/pdf-viewer.tsx
examples/responsive-gallery.tsx
examples/s3-direct-upload.tsx
examples/video-js-player.tsx
examples/video-player.tsx
outputs.yaml
references
… and 24 more

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Managing Media next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Managing Media compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Managing Media this skillancoleman/ai-design-components	526	—	~3.3k	Automated safety check: Pass	MIT	10 mo ago
Pretty Pagealexknowshtml/claude-skills	149	—	~2.2k	Automated safety check: Notes	None	3 mo ago
Paperclip Pagepaperclipai/paperclip	99k	—	~1k	Automated safety check: Pass	MIT	today
Jev SEOAgriciDaniel/jev-seo	539	—	~2.5k	Automated safety check: Notes	MIT	17 days ago
Paper2htmlQuZhan51496/paper2anything	469	—	~3.3k	Automated safety check: Notes	Apache-2.0	2 mo ago
Edit PDFSimplePDF/simplepdf-embed	407	—	~1.5k	Automated safety check: Pass	MIT	9 days ago

Similar skills

Pretty Page
alexknowshtml/claude-skills
Convert markdown to a beautifully styled, shareable HTML page and upload to S3-compatible storage
149 GitHub stars~2.2k tokensUpdated 3 mo ago
Frontend & DesignAuto-check: notes
Paperclip Page
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
99k GitHub stars~1k tokensUpdated today
Frontend & DesignAuto-check passed
Jev SEO
AgriciDaniel/jev-seo
Full live SEO audit of any website from its homepage URL, powered by Jev (TypeSafe's System One model).
539 GitHub stars~2.5k tokensUpdated 17 days ago
Documents & OfficeAuto-check: notes
Paper2html
QuZhan51496/paper2anything
Convert an academic paper PDF into a publish-ready, self-contained single-page project homepage (a self-contained index.html) — the kind of paper landing page researchers host on GitHub Pages.
469 GitHub stars~3.3k tokensUpdated 2 mo ago
Frontend & DesignAuto-check: notes
Edit PDF
SimplePDF/simplepdf-embed
Edit and fill PDF documents. An agent skill from SimplePDF/simplepdf-embed.
407 GitHub stars~1.5k tokensUpdated 9 days ago
Documents & OfficeAuto-check passed
PDF Vue3
hymhub/pdf-vue3
Use the pdf-vue3 Vue 3 component to render PDFs (URL, base64, or Uint8Array) with built-in virtual scrolling, crisp zoom, print, download, and page navigation.
123 GitHub stars~1k tokensUpdated 4 mo ago
Documents & OfficeAuto-check passed

Questions about Managing Media

What does Managing Media do?

Implements media and file management components including file upload (drag-drop, multi-file, resumable), image galleries (lightbox, carousel, masonry), video players (custom controls, captions…. Managing Media is an agent skill from ancoleman/ai-design-components. Implements 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, Office), and optimization strategies (compression, responsive images, lazy loading, CDN).

When should I use Managing Media?

Managing Media fits situations like: displaying media; building rich content experiences.

How do I install Managing Media in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill managing-media -a claude-code`. Or copy the skill folder (skills/managing-media in ancoleman/ai-design-components) into .claude/skills/managing-media in your project. Claude Code loads it when a task matches its description.

How do I install Managing Media in Codex?

Run `npx skills add ancoleman/ai-design-components --skill managing-media -a codex`. Or copy the skill folder (skills/managing-media in ancoleman/ai-design-components) into .agents/skills/managing-media in your project. Codex loads it when a task matches its description.

Can I use Managing Media in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill managing-media -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/managing-media, .gemini/skills/managing-media, .github/skills/managing-media and .opencode/skills/managing-media in your project.

What does Managing Media need to run?

Going by SKILL.md and its folder, Managing Media needs the command-line tools its instructions call (npm, python and node). Our summary lists: Python 3; Node.js.

Does Managing Media access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Managing Media safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Managing Media use?

Managing Media is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Managing Media use?

About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.

What are the alternatives to Managing Media?

Skills that share tags, products or a category with Managing Media: Pretty Page (alexknowshtml/claude-skills, 149 stars), Paperclip Page (paperclipai/paperclip, 99k stars), Jev SEO (AgriciDaniel/jev-seo, 539 stars) and Paper2html (QuZhan51496/paper2anything, 469 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Managing Media?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Managing Media

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Managing Media & Files

Purpose

When to Use

Quick Decision Framework

File Upload Patterns

Basic Upload (<10MB)

Advanced Upload (>10MB)

Image-Specific Upload

Image Display Components

Image Gallery

Carousel/Slider

Image Optimization

Video Components

Video Player

Video Optimization

Audio Components

Audio Player

Document Viewers

PDF Viewer

Office Document Preview

Performance Optimization

File Size Guidelines

Image Optimization Checklist

Video Optimization Checklist

Accessibility Requirements

Images

Videos

Audio

Library Recommendations

Image Gallery: react-image-gallery

Video: video.js

Audio: wavesurfer.js

PDF: react-pdf

Design Token Integration

Responsive Strategies

Image Galleries

Video Players

Cloud Storage Integration

Client-Side Direct Upload

Testing Tools

Working Examples

Resources

Scripts (Token-Free Execution)

References (Detailed Documentation)

Examples (Implementation Code)

Assets (Templates and Configs)

Cross-Skill Integration

Next Steps

Files

Compare with similar skills

Similar skills

More from ancoleman/ai-design-components

Related

Questions about Managing Media