player-photos

Downloads and optimizes UEFA Champions League player photos into WebP assets.

Updated May 14, 2026

Search Tags:#webp #asset management #image download #sharp #champions league #uefa #player photos

Ready to run

npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill player-photos-jesusprodriguezunir

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: player-photos
Source: https://github.com/jesusprodriguezUnir/bracketMundial/tree/main/.agents/skills/player-photos
Command: npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill player-photos-jesusprodriguezunir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp.

What problem does it solve? Squads in the app show empty avatar placeholders when official player photos are missing, and manually sourcing, resizing, and registering hundreds of player images is slow and error-prone. ## Core Features & Use Cases - Gap Reporting: Runs `npm run ucl:report` to generate `docs/missing-assets.md`, listing which clubs have the most missing player photos. - Official Photo Download: Fetches player images directly from the official UEFA CDN and optimizes them with Sharp into 300px WebP files at quality 80. - Manifest Regeneration: Automatically rebuilds `src/data/player-photos.ts` so the `<squads-view>` component picks up new photos, validated by a strict TypeScript build. - Use Case: A user notices Real Madrid players show initials instead of photos, runs the report, downloads photos for the club with one command, and verifies the result with a production build. ## Quick Start Ask the assistant to check which Champions League clubs are missing player photos and download the photos for a specific club such as RMA.

Frequently Asked Questions about player-photos

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

FAQPage Schema

How do I download missing player photos for a Champions League club?▼

Run npm run ucl:photos followed by the club code, for example npm run ucl:photos -- RMA. The script fetches images from the official UEFA CDN, optimizes them to WebP, and regenerates the player-photos manifest automatically.

How do I check which clubs are missing player photos?▼

Run npm run ucl:report to generate docs/missing-assets.md, which lists clubs with the most missing player photos. Always start with this report before downloading so you can prioritize the clubs with the largest gaps.

Where do the player photos come from?▼

Photos are downloaded directly from the official UEFA image CDN at img.uefa.com. They are then optimized locally with Sharp to 300px-wide WebP files at quality 80 and stored under public/players/{CLUB}/.

What happens if a player has no official UEFA photo?▼

If a player lacks an official UEFA photo, the squads-view component automatically falls back to displaying the player's initials in a retro Panini style. No placeholder image or manual intervention is required.

Why does the build fail after downloading player photos?▼

The build runs strict TypeScript compilation, which fails if the regenerated player-photos.ts manifest has an incorrect format. Never edit src/data/player-photos.ts by hand; let the fetch script regenerate it.