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

photos-from-image

Extracts player and coach face crops from lineup images into WebP avatar files.

Updated May 14, 2026
Search Tags:#webp#sharp#bounding box#image cropping#node script#avatar extraction#football lineup
One-click install
npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill photos-from-image-jesusprodriguezunir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: photos-from-image
Source: https://github.com/jesusprodriguezUnir/bracketMundial/tree/main/.agents/skills/photos-from-image
Command: npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill photos-from-image-jesusprodriguezunir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp.

What problem does it solve? Filling player and coach photo slots for teams with little or no coverage in official photo APIs is slow and manual. This Skill turns a single lineup image (Instagram post, screenshot, infographic) into ready-to-use avatar files for the app in one pass. ## Core Features & Use Cases - Visual face detection and bbox estimation: The AI analyzes the image, reads player surnames, and maps them to squad numbers from the team's squad data file. - Automated cropping with sharp: A Node script crops each bounding box with configurable padding, resizes to 300px width, and saves optimized WebP files to public/players/{TEAM}/{n}.webp and public/coaches/{TEAM}.webp. - Manifest regeneration: Automatically rebuilds src/data/player-photos.ts and src/data/coach-photos.ts after extraction. - Use Case: A national team like JOR has no API photo coverage. Paste a lineup screenshot from Instagram, and the Skill extracts 11+ player avatars plus the coach photo in a single run, with a --dry-run preview before writing files. ## Quick Start Extract the player faces from this lineup screenshot and save them as avatars for team SWE.

Frequently Asked Questions about photos-from-image

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

FAQPage Schema
How do I extract player faces from a lineup image?▼

Provide the image file and the team's three-letter code. The AI visually identifies each face, matches surnames to squad numbers from the team's squad data file, and a Node script crops each bounding box with sharp into individual WebP avatars.

How to crop faces from an image using sharp in Node?▼

The extract-from-image script takes a JSON spec of bounding boxes in 0-1 proportions, expands each by a configurable padding (default 15%), crops with sharp, resizes to 300px width, and saves as WebP at quality 85.

Can I use an Instagram post URL directly as the image source?▼

Instagram often blocks public HTML for logged-out users, so the reliable flow is saving the image locally and pasting it into the chat. Alternatively, fetch the post's og:image meta tag and download that JPG with a short Node script.

What image quality is needed for good avatar crops?▼

Faces should be reasonably large and sharp in the source image, since output is resized to 300px wide. Low-quality images or very small faces produce blurry results, so the Skill warns before processing poor sources.

How do I fix a bad crop without redoing everything?▼

Edit only the affected items in the JSON spec file and re-run the extraction command with the --force flag to overwrite existing files. You can also adjust the padding with --pad, for example --pad 0.05 for tight infographics.

Related Skills

Explore More Software Engineering Skills→
NEXUZ-SYSNEXUZ-SYS

image-fetcher

Acquire web images, Playwright screenshots, and user files into a reference folder.

Official
Intermediate
lrbjklrbjk

unity-project

Retrieve Unity project configuration, settings, and asset lists for audits.

Community
Intermediate
moonlight-lupinmoonlight-lupin
15

pexels-stock-photos

Search the Pexels API for stock photos and download them in selected sizes.

Community
Basic
Pixazo-AIPixazo-AI

firered-image-edit

Edit images from text prompts using the FireRed Image Edit API via Pixazo.

Official
Intermediate