Front-End Checklist is a collection of front-end web development rules organized as a practical review and quality workflow for people and AI agents. Developers use it to audit projects and pull requests, check implementation details, and find guidance for remediation and verification. The catalogue entries provide skills, instructions, MCP tools, and a plugin for using the checklist in agent workflows.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add thedaviddias/Front-End-Checklist --skill image-file-sizegit clone --depth 1 https://github.com/thedaviddias/Front-End-ChecklistWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/thedaviddias/front-end-checklist/image-file-size)<a href="https://agentmods.dev/skills/thedaviddias/front-end-checklist/image-file-size"><img src="https://agentmods.dev/badge/skills/thedaviddias/front-end-checklist/image-file-size/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/thedaviddias/front-end-checklist/image-file-size"><img src="https://agentmods.dev/badge/skills/thedaviddias/front-end-checklist/image-file-size.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00052 | $0.00733 |
| Opus 5.5 | $0.00021 | $0.00293 |
| Sonnet 5.5 | $0.00010 | $0.00147 |
| Haiku 4.5 | $0.00005 | $0.00073 |
Grade A, and why
image-file-size scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 46 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Keep image file sizes within recommended limits
Images account for over 50% of average page weight according to HTTP Archive data. Oversized images waste user bandwidth (costly on mobile data plans), delay Largest Contentful Paint (LCP), and increase bounce rates. A 1-second delay in mobile page load can reduce conversions by up to 20% according to Google research.
Quick Reference
- Photos: target under 200KB (WebP 80% quality); under 400KB for full-bleed hero images
- Graphics/icons: target under 50KB; use SVG for vector graphics
- WebP is typically 25-35% smaller than equivalent-quality JPEG (per web.dev)
- AVIF is typically 40-50% smaller than equivalent-quality JPEG (per web.dev)
Check
Audit all image assets in this project. For each image: 1) Check the file size in bytes. 2) Flag any photo (JPEG/WebP/AVIF) over 200KB. 3) Flag any graphic/icon (PNG/SVG) over 100KB. 4) Flag any hero or full-width image over 400KB. 5) Flag any thumbnail (under 200px wide) over 30KB. Also check if Lighthouse reports 'Properly size images' or 'Efficiently encode images' as opportunities. Report each oversized image with its path, current size, and an estimated target size.
Fix
For each oversized image: 1) Convert JPEG/PNG to WebP at 80% quality using Squoosh, Sharp, or ImageOptim—this typically yields 25-35% size reduction over optimised JPEG. 2) Try AVIF at 60% quality for further reduction (often 40-50% smaller than JPEG). 3) Strip metadata (EXIF/IPTC) from images served on the web. 4) For PNGs, run through oxipng or pngquant for lossless or near-lossless compression. 5) For SVGs, run through SVGO. 6) Implement multiple srcset sizes so mobile users download smaller files.
Explain
Explain how oversized images impact web performance. Images are typically the largest assets on a page—HTTP Archive data consistently shows images account for 40-60% of total page weight. Each KB saved reduces transfer time, especially on mobile networks (4G averages 20Mbps, with significant latency). Large images also delay Largest Contentful Paint (LCP), the primary Core Web Vitals metric. Google's Lighthouse flags images that could be reduced by more than 4KB as an opportunity.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed f6abba476b01
- 2mo ago First seen · 46 lines · 52 tokens per session scan A f7a8078fe4d3
image-file-size is a skill published in the GitHub repository thedaviddias/Front-End-Checklist (74,658 stars, last pushed 6d ago), licensed MIT. It adds 52 tokens to every session and 733 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
image-file-size compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| image-file-sizethedaviddias/Front-End-Checklist | Skill | 75k | 6d ago | MIT | A | 52 | Claude Code, Codex |
| scalar-design-systemscalar/scalar | Skill | 16k | yesterday | MIT | A | 68 | Claude Code, Codex |
| citation-verificationGalaxy-Dawn/claude-scholar | Skill | 6.0k | 18d ago | MIT | A | 63 | Claude Code |
| stopoversborski/travel-hacking-toolkit | Skill | 895 | yesterday | MIT | A | 62 | Claude Code |
| flight-search-strategyborski/travel-hacking-toolkit | Skill | 895 | yesterday | MIT | A | 48 | Claude Code |
| alliancesborski/travel-hacking-toolkit | Skill | 895 | yesterday | MIT | A | 39 | Claude Code |
| design-loopericrisco/rsc-harness | Skill | 503 | 2d ago | MIT | A | 79 | Claude Code, Codex |