React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads.
Install Web Performance
$ npx skills add WrongStack/WrongStack --skill web-performance -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install WrongStack/WrongStack web-performance --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/core/skills/web-performance .claude/skills/web-performance && rm -rf skills-srcUse ~/.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/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .claude/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performanceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add WrongStack/WrongStack --skill web-performance -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install WrongStack/WrongStack web-performance --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/core/skills/web-performance .agents/skills/web-performance && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .agents/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add WrongStack/WrongStack --skill web-performance -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install WrongStack/WrongStack web-performance --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/core/skills/web-performance .cursor/skills/web-performance && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .cursor/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/WrongStack/WrongStack.git --path packages/core/skills/web-performance--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add WrongStack/WrongStack --skill web-performance -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install WrongStack/WrongStack web-performance --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/core/skills/web-performance .gemini/skills/web-performance && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .gemini/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install WrongStack/WrongStack web-performanceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add WrongStack/WrongStack --skill web-performance -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/core/skills/web-performance .github/skills/web-performance && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .github/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add WrongStack/WrongStack --skill web-performance -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install WrongStack/WrongStack web-performance --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/core/skills/web-performance .opencode/skills/web-performance && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-performance" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/web-performance into .opencode/skills/web-performance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-performance", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-performance- GitHub stars
- 371
- Token cost
- ~781 tokens
- SKILL.md length
- 304 words
- Files
- 1
- Skills in repo
- 100
- Repo updated
- First seen
- Licence
- MIT
At a glance
Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads.
- Works in 6 steps: Record route, commit/input state, build… → Trace the user's critical task before… → Prioritize the LCP resource, input… → …
- Diagnosing Core Web Vitals
- SKILL.md covers Selection card, Overview, Rules and Workflow, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Web Performance is an agent skill from WrongStack/WrongStack. Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads. Use when diagnosing Core Web Vitals, slow routes, bundle growth, long tasks or animation jank; preserve functionality and compare matched before/after conditions.
Its SKILL.md is about 780 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. The repository describes itself as: An AI coding agent that reads your code, edits files, runs commands, and reasons through bugs — across a terminal REPL, a full-screen TUI, and a browser UI, while you keep your… The licence is MIT.
When your agent uses it
- Diagnosing Core Web Vitals
- Preserve functionality and compare matched before/after conditions
Example prompts
- “/web-performance”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Record route, commit/input state, build mode, device, network, cache and data.
- Trace the user's critical task before proposing changes. Separate network,
- Prioritize the LCP resource, input blocking and unexpected layout shifts.
- Compare equivalent conditions with repeated measurements. Report distributions
- Keep analytics labels bounded and sensitive data out of performance telemetry.
- Set budgets from product/device needs and an observed baseline. Avoid one
What it can do on your machine
Read from SKILL.md and the folder at commit a744bdc. 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
No scripts in the folder and no shell commands in SKILL.md.
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
Web Performance loads about 781 tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 304 words of instructions outside code blocks.
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
The full file from WrongStack/WrongStack at commit a744bdc, republished under its MIT licence (© WrongStack). 304 words, ~781 tokens.
Download SKILL.mdSave it as
.claude/skills/web-performance/SKILL.md (or your agent's skills folder).- name
- web-performance
- description
- Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads. Use when diagnosing Core Web Vitals, slow routes, bundle growth, long tasks or animation jank; preserve functionality and compare matched before/after conditions.
- version
- 1.0.1
- trigger
- diagnosing Core Web Vitals, slow routes, bundle growth, long tasks or animation jank; preserve functionality and compare matched before/after conditions.
- required-capabilities
- filesystem.read, filesystem.write
- optional-capabilities
- verification.run, web.research
- metadata.routing-group
- frontend
Web Performance
Selection card
- Task: Measure and improve browser loading and interaction. / TR: Tarayıcı yüklenmesini ve etkileşimini ölçüp iyileştir.
- Start: Locate the affected route/component and its runtime/lockfile.
- Finish: apply the acceptance checks below; report observed results and unresolved constraints.
Overview
Optimize the measured bottleneck. Current Core Web Vitals are LCP, INP and CLS; good thresholds are at most 2.5 seconds, 200 milliseconds and 0.1 respectively at the 75th percentile. Field evidence and local lab runs answer different questions.
Rules
- Record route, commit/input state, build mode, device, network, cache and data. Development-server measurements are not production performance.
- Trace the user's critical task before proposing changes. Separate network, server, main-thread, layout and rendering delay.
- Prioritize the LCP resource, input blocking and unexpected layout shifts. Do not optimize a Lighthouse score while making the real interaction worse.
- Compare equivalent conditions with repeated measurements. Report distributions and variability rather than a best run or invented percentage.
- Keep analytics labels bounded and sensitive data out of performance telemetry.
- Set budgets from product/device needs and an observed baseline. Avoid one universal bundle-size or fps mandate.
Workflow
- Build/run production and exercise a representative cold/warm user journey. Gather browser traces, network waterfall and available field metrics.
- Identify the largest bottleneck with file/resource/call-stack evidence.
- Apply a narrow change: resource priority, image sizing, route splitting, caching, rendering work or long-task decomposition as indicated.
- Test the interaction, responsive behavior and accessibility after optimization.
- Repeat the same measurement and report sample count, conditions, results and tradeoffs. Run affected build/tests.
Sources
Web Vitals, reviewed 2026-10-09. Refresh thresholds and measurement tooling before consequential claims.
Acceptance checks
- Compare the same route and conditions before/after; verify observed user-visible improvement.
Skills in scope
- observability — field metrics and diagnostics.
- nextjs-modern — framework rendering/caching.
- motion-design — animated interaction cost.
- threejs-3d — canvas and asset profiling.
© WrongStack, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in packages/core/skills/web-performance of WrongStack/WrongStack.
Open the folder on GitHubat commit a744bdc
Compare with similar skills
Web Performance 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Performance this skillWrongStack/WrongStack | 371 | — | ~781 | Automated safety check: Pass | MIT | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Fixing Motion Performanceibelick/ui-skills | 9.6k | 5 repos | ~1.4k | Automated safety check: Pass | MIT | |
| GSAP Performance Tuninggreensock/gsap-skills | 16k | 3 repos | ~1k | Automated safety check: Pass | MIT | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT | |
| Web Quality Auditaddyosmani/web-quality-skills | 2.9k | — | ~2.6k | Automated safety check: Pass | MIT |
Similar skills
Fixing Motion Performance
ibelick/ui-skills
Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.
GSAP Performance Tuning
greensock/gsap-skills
Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
Web Quality Audit
addyosmani/web-quality-skills
Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.
SEO Google
AgriciDaniel/codex-seo
Google SEO APIs: Search Console (Search Analytics, URL Inspection, Sitemaps), PageSpeed Insights v5, CrUX field data with 25-week history, Indexing API v3, and GA4 organic traffic.
More from WrongStack/WrongStack
All 100 skills in this repoTech Stack
WrongStack/WrongStack
Validate and upgrade dependencies against live registries and official migration guides in any ecosystem.
Skill Creator
WrongStack/WrongStack
Create, improve and validate WrongStack SKILL.md bundles with precise discovery, progressive resources and current runtime contracts.
Bug Hunter
WrongStack/WrongStack
A skill your agent uses when scanning source code for bugs, anti-patterns, code smells, or quality issues in a codebase, or when running a proof-driven bug hunt that must find, prove, fix, and…
Design Craft
WrongStack/WrongStack
Design or substantially improve user-facing interfaces with a product-specific visual direction, content hierarchy, and rendered critique.
Design Critique
WrongStack/WrongStack
A skill your agent uses to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states…
Mailbox Bridge
WrongStack/WrongStack
A skill your agent uses when external coding agents (Claude Code, Aider, custom scripts) need to participate in the project's shared WrongStack mailbox, or when a user asks to "expose the mailbox"…
Related
Categories
Questions about Web Performance
What does Web Performance do?
Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads. Web Performance is an agent skill from WrongStack/WrongStack. Measure and improve web loading, responsiveness and visual stability with browser traces and representative workloads.
When should I use Web Performance?
Web Performance fits situations like: diagnosing Core Web Vitals; preserve functionality and compare matched before/after conditions.
How do I install Web Performance in Claude Code?
Run `npx skills add WrongStack/WrongStack --skill web-performance -a claude-code`. Or copy the skill folder (packages/core/skills/web-performance in WrongStack/WrongStack) into .claude/skills/web-performance in your project. Claude Code loads it when a task matches its description.
How do I install Web Performance in Codex?
Run `npx skills add WrongStack/WrongStack --skill web-performance -a codex`. Or copy the skill folder (packages/core/skills/web-performance in WrongStack/WrongStack) into .agents/skills/web-performance in your project. Codex loads it when a task matches its description.
Can I use Web Performance 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 WrongStack/WrongStack --skill web-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-performance, .gemini/skills/web-performance, .github/skills/web-performance and .opencode/skills/web-performance in your project.
What does Web Performance need to run?
SKILL.md names no scripts, command-line tools or credentials: Web Performance is instructions for the agent only.
Does Web Performance 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 Web Performance 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 Web Performance use?
Web Performance is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Performance use?
About 781 tokens (SKILL.md is roughly 3.1k 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 Web Performance?
Skills that share tags, products or a category with Web Performance: React Doctor (makeplane/plane, 61k stars), Fixing Motion Performance (ibelick/ui-skills, 9.6k stars), GSAP Performance Tuning (greensock/gsap-skills, 16k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Performance?
WrongStack (a GitHub organization) maintains it in WrongStack/WrongStack, which has 371 GitHub stars. The repository holds 100 skills in this directory. The repository was last updated on October 10, 2026.
Source: WrongStack/WrongStack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.