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 thisisAhsanIqbal/nextjs-seo-audit --skill core-web-vitalsgit clone --depth 1 https://github.com/thisisAhsanIqbal/nextjs-seo-auditWrote 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/thisisahsaniqbal/nextjs-seo-audit/core-web-vitals)<a href="https://agentmods.dev/skills/thisisahsaniqbal/nextjs-seo-audit/core-web-vitals"><img src="https://agentmods.dev/badge/skills/thisisahsaniqbal/nextjs-seo-audit/core-web-vitals/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/thisisahsaniqbal/nextjs-seo-audit/core-web-vitals"><img src="https://agentmods.dev/badge/skills/thisisahsaniqbal/nextjs-seo-audit/core-web-vitals.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00055 | $0.01472 |
| Opus 5 | $0.00028 | $0.00736 |
| Sonnet 5 | $0.00011 | $0.00294 |
| Haiku 4.5 | $0.00006 | $0.00147 |
Grade A, and why
core-web-vitals 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 11d 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 — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Core Web Vitals
Audit HTML for patterns that negatively impact Core Web Vitals — the performance metrics Google uses as a ranking signal.
Overview
| Metric | Full name | Good threshold | What it measures |
|---|---|---|---|
| LCP | Largest Contentful Paint | ≤ 2.5s | Loading — time until the largest visible element renders |
| CLS | Cumulative Layout Shift | ≤ 0.1 | Visual stability — unexpected layout movement |
| INP | Interaction to Next Paint | ≤ 200ms | Responsiveness — delay between user input and visual update |
1. LCP (Largest Contentful Paint) checks
Identify the likely LCP element and check for blockers:
Identify LCP candidate
The LCP element is typically the largest visible element above the fold:
- Hero image (
<img>near top of<body>) - Hero background image (CSS
background-image) - Large heading (
<h1>) with significant text - Video poster image
LCP blockers to flag
| Check | Status |
|---|---|
Hero/banner <img> missing fetchpriority="high" |
⚠️ WARN "Add fetchpriority=high to LCP image" |
Hero image uses loading="lazy" |
❌ FAIL "Never lazy-load the LCP element" |
LCP image not preloaded (<link rel="preload" as="image">) |
⚠️ WARN "Preload LCP image for faster rendering" |
Render-blocking CSS in <head> (stylesheets without media attribute) |
⚠️ WARN |
Render-blocking JS in <head> (scripts without async/defer) |
⚠️ WARN |
| LCP image served in legacy format (JPG/PNG instead of WebP/AVIF) | ⚠️ WARN |
| No render-blocking resources | ✅ PASS |
Font loading
| Check | Status |
|---|---|
Custom fonts without <link rel="preload" as="font"> |
⚠️ WARN "Preload critical fonts" |
No font-display: swap or font-display: optional in @font-face |
⚠️ WARN "Add font-display to prevent invisible text" |
| Fonts preloaded properly | ✅ PASS |
2. CLS (Cumulative Layout Shift) checks
Identify HTML patterns that cause layout shift:
| Check | Status |
|---|---|
<img> without width and height attributes |
❌ FAIL "Missing dimensions cause layout shift" |
<video> or <iframe> without width/height |
⚠️ WARN |
| Ads/embeds without reserved space (no explicit dimensions) | ⚠️ WARN "Reserve space for dynamic content" |
Web fonts causing FOIT (Flash of Invisible Text) — no font-display |
⚠️ WARN |
| Content injected above existing content (banners, cookie notices without reserved space) | ⚠️ WARN |
| All images have dimensions | ✅ PASS "No layout shift from images" |
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.
- 11d ago First seen · 131 lines · 55 tokens per session scan A 17dba0c6c3c9
core-web-vitals is a skill published in the GitHub repository thisisAhsanIqbal/nextjs-seo-audit (7 stars, last pushed 6mo ago), licensed MIT. It adds 55 tokens to every session and 1,472 once invoked, about $0.0003 per session on Opus 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-08-31.
Other skills, from other repositories
gsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is…
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
gsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
gsap-timeline
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).
svg-character-animation
Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.
apply-mantel-styles
Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding.