AgentToolHub
Skill

webperf-interaction

webperf-interaction — a Claude Code skill from nucliweb/webperf-snippets

Features

  • ✓JavaScript snippets for Web Performance
  • ✓Directly measure in browser's DevTools console
  • ✓Core Web Vitals metrics (LCP, CLS, INP)
  • ✓Debug slow loading and interaction issues
  • ✓Automate workflow with agents (SKILLS.md)

Installation Guide

Option 1: Using skills CLI (recommended)

bash
npx skills add nucliweb/webperf-snippets

Installs directly from GitHub repository to ~/.claude/skills/.

Option 2: Install locally (project-specific)

bash
git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-skills

This installs skills to .claude/skills/ in your project directory.

Option 3: Install globally (for contributors)

bash
git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-global

This installs skills to ~/.claude/skills/ for use across any project.

Available Skills

| Skill | Snippets | Description |
| ------------------------- | -------- | ---------------------------------------------------------------- |
| webperf | 47 | Main entry point for all web performance analysis |
| webperf-core-web-vitals | 7 | LCP, CLS, INP measurements with detailed breakdowns |
| webperf-loading | 28 | TTFB, FCP, script/font analysis, resource hints, service workers |
| webperf-interaction | 8 | Long tasks, animation frames, scroll jank, INP debugging |
| webperf-media | 3 | Image/video audits, lazy loading validation, SVG analysis |
| webperf-resources | 1 | Network bandwidth, connection quality, adaptive loading |

Intelligent Workflows & Decision Trees

Skills include built-in workflows and decision trees that enable autonomous performance analysis:

Workflows - Predefined sequences for common scenarios:

  • Complete loading audit (6 snippets)

  • Server performance investigation (4 snippets)

  • Font loading optimization (3 snippets)

  • Script performance deep dive (6 snippets)

  • And more...

    • Decision Trees - Conditional logic based on results:

  • If TTFB > 600ms → automatically run TTFB-Sub-Parts.js

  • If FCP > 1.8s → run render-blocking resource analysis

  • If many third-party scripts detected → analyze timing and impact

  • And 15+ more intelligent triggers

    • Example interaction:

    text
    User: "Analyze loading performance"

Agent:
1. Runs TTFB.js → detects 750ms (slow)
2. Follows decision tree → runs TTFB-Sub-Parts.js
3. Identifies DNS + server time issues
4. Runs Service-Worker-Analysis.js
5. Provides consolidated report with specific fixes

    Usage

    Skills activate automatically when matched:

    text
    Audit this page for Core Web Vitals
Analyze loading performance
Check for image optimization issues
Debug slow LCP
Why is my TTFB so high?

    Skills are compatible with Chrome DevTools MCP for automated browser-based performance auditing.

    Supported agents: Claude Code, Cursor, OpenCode, Gemini CLI, VS Code extensions, and many more.

    Reviews