Agent skill

Core Web Vitals

by theopenco in theopenco/llmgateway

Diagnose and improve Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift in this repository's Next.js App Router frontends.

Custom licenceAuto-check passedFrontend & Design

Install Core Web Vitals

skills CLI
$ npx skills add theopenco/llmgateway --skill core-web-vitals -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install theopenco/llmgateway core-web-vitals --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/theopenco/llmgateway.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/core-web-vitals .claude/skills/core-web-vitals && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
core-web-vitals
GitHub stars
1.7k
Token cost
~955 tokens
SKILL.md length
466 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
Custom licence

At a glance

Diagnose and improve Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift in this repository's Next.js App Router frontends.

  • Works in 4 steps: Identify the affected app and route.… → Record a baseline on a production build… → Use the trace to identify the cause → …
  • Auditing Core Web Vitals
  • SKILL.md covers Targets and evidence, Diagnose, Repository-specific fixes and Verify
  • Calls pnpm

What it does

Core Web Vitals is an agent skill from theopenco/llmgateway. Diagnose and improve Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift in this repository's Next.js App Router frontends. Use when auditing Core Web Vitals, investigating LCP, INP, or CLS regressions, or changing frontend loading, responsiveness, image, font, or layout behavior for performance.

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web performance. It works with Next.js and Contentful. The repository describes itself as: Route, manage, and analyze your LLM requests across multiple providers with a unified API interface.

When your agent uses it

  • Auditing Core Web Vitals
  • Investigating LCP
  • CLS regressions
  • Changing frontend loading

Example prompts

  • “/core-web-vitals”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Identify the affected app and route. Read its page, layout, loading boundary,
  2. Record a baseline on a production build with the same viewport, throttling,
  3. Use the trace to identify the cause
  4. Change the smallest cause supported by the trace.

What it can do on your machine

Read from SKILL.md and the folder at commit ba1f176. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • web.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Core Web Vitals loads about 955 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 466 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~86
When it runs · the whole SKILL.md, loaded when a task matches
~955

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 466 words (~955 tokens).

“Measure the affected route before changing it. Do not apply generic performance advice without identifying the actual LCP element, slow interaction, or layout shift.”

— opening of SKILL.md by theopenco, Custom licence
name
core-web-vitals

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/core-web-vitals of theopenco/llmgateway.

Open the folder on GitHubat commit ba1f176

Compare with similar skills

Core Web Vitals next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Core Web Vitals compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Core Web Vitals this skilltheopenco/llmgateway1.7k—~955Automated safety check: PassCustom licence
Core Web VitalsvmDeshpande/ai-agent-automation1784 repos~3.6kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
Senior Frontendalirezarezvani/claude-skills28k5 repos~3.9kAutomated safety check: PassMIT
Next.js DeveloperJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT
React ExpertJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT

Similar skills

  • Core Web Vitals

    vmDeshpande/ai-agent-automation

    Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking.

    178 GitHub starsUsed in 4 repos~3.6k tokens
    Frontend & DesignAuto-check passed
  • React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Senior Frontend

    alirezarezvani/claude-skills

    Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.

    28k GitHub starsUsed in 5 repos~3.9k tokens
    Frontend & DesignAuto-check passed
  • Next.js Developer

    Jeffallan/claude-skills

    Builds Next.js 14+ apps on the App Router with server components, server actions, explicit caching, SEO metadata, loading and error boundaries and Vercel deployment.

    12k GitHub stars~1.4k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • React Expert

    Jeffallan/claude-skills

    Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.

    12k GitHub stars~1.4k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed
  • Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.

    31k GitHub stars~1.5k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from theopenco/llmgateway

All 19 skills in this repo
  • Blog

    theopenco/llmgateway

    Write and validate an LLM Gateway marketing blog post in the repository's current house style, including structured frontmatter and a gpt-image-2 OpenGraph image.

    1.7k GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Model Benchmarks

    theopenco/llmgateway

    Run and report repository model or provider-mapping benchmarks.

    1.7k GitHub stars~1.1k tokensUpdated today
    Auto-check: notes
  • Skill Authoring

    theopenco/llmgateway

    Create, update, and audit repository-local agent skills against the current LLM Gateway codebase.

    1.7k GitHub stars~662 tokensUpdated today
    Auto-check passed
  • Security Audit

    theopenco/llmgateway

    Security best practices, vulnerability review, and full security audits for LLM Gateway.

    1.7k GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Changelog

    theopenco/llmgateway

    Write a new LLM Gateway changelog entry. An agent skill from theopenco/llmgateway.

    1.7k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Knowledge Base

    theopenco/llmgateway

    Write a new LLM Gateway docs Knowledge base page under apps/docs/content/(product)/learn with light and dark dashboard screenshots.

    1.7k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Questions about Core Web Vitals

What does Core Web Vitals do?

Diagnose and improve Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift in this repository's Next.js App Router frontends. Core Web Vitals is an agent skill from theopenco/llmgateway.js App Router frontends.

When should I use Core Web Vitals?

Core Web Vitals fits situations like: auditing Core Web Vitals; investigating LCP; CLS regressions; changing frontend loading.

How do I install Core Web Vitals in Claude Code?

Run `npx skills add theopenco/llmgateway --skill core-web-vitals -a claude-code`. Or copy the skill folder (.agents/skills/core-web-vitals in theopenco/llmgateway) into .claude/skills/core-web-vitals in your project. Claude Code loads it when a task matches its description.

How do I install Core Web Vitals in Codex?

Run `npx skills add theopenco/llmgateway --skill core-web-vitals -a codex`. Or copy the skill folder (.agents/skills/core-web-vitals in theopenco/llmgateway) into .agents/skills/core-web-vitals in your project. Codex loads it when a task matches its description.

Can I use Core Web Vitals in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add theopenco/llmgateway --skill core-web-vitals -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/core-web-vitals, .gemini/skills/core-web-vitals, .github/skills/core-web-vitals and .opencode/skills/core-web-vitals in your project.

What does Core Web Vitals need to run?

Going by SKILL.md and its folder, Core Web Vitals needs the command-line tools its instructions call (pnpm).

Does Core Web Vitals access the network?

SKILL.md names 1 domain. As links in the text: web.dev. This is read from the text; nothing was executed.

Is Core Web Vitals safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Core Web Vitals use?

Core Web Vitals has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Core Web Vitals use?

About 955 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Core Web Vitals?

Skills that share tags, products or a category with Core Web Vitals: Core Web Vitals (vmDeshpande/ai-agent-automation, 178 stars), React Best Practices (ryokun6/ryos, 1.3k stars), Senior Frontend (alirezarezvani/claude-skills, 28k stars) and Next.js Developer (Jeffallan/claude-skills, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Core Web Vitals?

theopenco (a GitHub organization) maintains it in theopenco/llmgateway, which has 1,677 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 9, 2026.

Source: theopenco/llmgateway on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.