visual-researchlisted

Use when a question is better answered by looking than by reading - researching how websites or apps look, gathering design references, finding what a style or palette or typeface actually is in the wild, comparing competitors visually, or building a moodboard. Renders real sites and searches real images, then reads them as pictures.
ridelink0/ultimate-frontend-skills · ★ 6 · Web & Frontend · score 78

Install: claude install-skill ridelink0/ultimate-frontend-skills

# Visual research Most design questions are answered by looking at twenty examples, not by reading one article about them. This gets the pictures in front of you cheaply. ## Render real sites - the highest-signal source ```bash node "${CLAUDE_PLUGIN_ROOT}/scripts/webdesign.mjs" study <url> <url> ... node "${CLAUDE_PLUGIN_ROOT}/scripts/webdesign.mjs" study --list editorial ``` Renders each site at the top and one screen down in a real headless browser and tiles them into contact sheets - eight references become one image to read. Curated lists: `editorial`, `object`, `cinema`, `product`. **Read the contact sheet first**, then the individual PNGs only for the two or three worth a closer look. A sheet is roughly eight times cheaper than eight reads. Two things it cannot see, and it says so: WebGL sites render only their preloader, and Cloudflare-walled ones show a challenge page. For those, use the `-y900` tile (usually below any cookie modal) or find a video walkthrough. ## Find images on the open web Free and no key needed: | Source | Endpoint | Note | |---|---|---| | Openverse | `https://api.openverse.org/v1/images/?q=<q>` | ~600M CC images, no key for light use | | Wikimedia Commons | `https://commons.wikimedia.org/w/api.php?action=query&generator=search&gsrnamespace=6&gsrsearch=<q>&prop=imageinfo&iiprop=url&format=json` | canvas-safe, CORS `*` | | Art Institute of Chicago | `https://api.artic.edu/api/v1/artworks/search?q=<q>` then the IIIF URL | 60 req/min, CORS `*