skills.rest
jesusprodriguezUnir
jesusprodriguezUnirCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill player-photos-jesusprodriguezunir
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Michae2xlMichae2xl

get-ai-powered-match-predictions-for-premier-league-and-champion

Predict Premier League and Champions League match outcomes via the FootballBin MCP API.

Community
Intermediate
kensleDevkensleDev

svelte-deployment

Configure SvelteKit adapters for static, Node.js, and Cloudflare deployments.

Community
Intermediate
TechsioCZTechsioCZ
2

badge-usage

Render compact token-backed status labels with the @techsio/ui-kit Badge component.

Official
Intermediate
dejanvasic85dejanvasic85
1

sanity-cms

Configure Sanity CMS document types and GROQ queries for Next.js sites.

Community
Advanced