Agent SKILLs#61
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Converts the 46 JS snippets into actionable SKILL.md files for AI agents (Claude Code, Cursor, Copilot). Each skill contains a snippet index, execution instructions for Chrome DevTools MCP, thresholds, and links to further reading. Snippet code stays in scripts/ to be read on demand, keeping SKILL.md concise. Skills generated: - skills/webperf/ meta-skill router (46 snippets, 5 categories) - skills/webperf-core-web-vitals/ 7 snippets: LCP, CLS, INP... - skills/webperf-loading/ 27 snippets: TTFB, FCP, fonts, scripts... - skills/webperf-interaction/ 8 snippets: LoAF, LongTask, scroll... - skills/webperf-media/ 3 snippets: images, video, SVG - skills/webperf-resources/ 1 snippet: network bandwidth Run: npm run generate-skills
- Add install-skills.js script for local Claude Code installation - Add install-global.js script for global skills setup - Update generate-skills.js to copy snippets to .claude/skills/ - Update all SKILL.md files with improved descriptions and compatibility notes - Add SKILLS.md documentation for agent skills usage - Configure .claude/settings.json with all webperf skills - Update README with agent skills section
Detects client-side redirects that impact Core Web Vitals, particularly LCP. Helps identify unnecessary JavaScript-based redirects that should be replaced with server-side 301/302 redirects for better performance. Features: - Detects same-origin document navigations (potential client-side redirects) - Filters out third-party iframes (analytics, ads, GTM) - Calculates performance impact and overhead - Provides contextual recommendations with Nginx config examples - Auto-detects language-based redirect patterns - Distinguishes between problematic redirects and acceptable SPA routing Based on analysis identifying client-side redirects as critical LCP optimization opportunity (potential 81% improvement when replaced with server-side redirects).
Regenerates webperf skills to include the new Client-Side Redirect Detection snippet in the webperf-loading skill category. Changes: - webperf-loading: 27 → 28 snippets - Total snippets: 46 → 47 - Added Client-Side-Redirect-Detection.js to skill scripts The snippet is now available for use via MCP/agent skills to detect client-side redirects impacting Core Web Vitals.
Implements a persistent system for defining workflows and decision trees
that guide AI agents through autonomous performance analysis.
ARCHITECTURE:
- Workflows stored in snippets/{Category}/WORKFLOWS.md (source of truth)
- generate-skills.js reads and injects workflows into generated SKILL.md
- Workflows persist across regenerations (not lost on rebuild)
LOADING SKILL ENHANCEMENTS:
- 8 Common Workflows covering major use cases:
* Complete loading performance audit (6-snippet sequence)
* Server/backend performance investigation
* Font loading optimization
* Script performance deep dive
* Resource hints & priority optimization
* CSS optimization workflow
* Image loading audit
* SSR/framework performance analysis
- 16 Decision Trees with conditional logic:
* If TTFB > 600ms → run TTFB-Sub-Parts.js
* If FCP > 1.8s → run render-blocking + critical CSS analysis
* If many third-party scripts → run timing + execution analysis
* And 13 more threshold-based triggers
BENEFITS:
- Agents can autonomously execute multi-snippet audits
- Progressive diagnosis based on measurement results
- Context-aware snippet selection
- Reduces need for user to know specific snippet names
DOCUMENTATION:
- snippets/README.md: explains workflow system architecture
- README.md: highlights intelligent features in skills section
- SKILLS.md: documents workflow capabilities and development process
Files changed:
- scripts/generate-skills.js: workflow injection logic
- snippets/Loading/WORKFLOWS.md: source workflows (NEW)
- snippets/README.md: architecture documentation (NEW)
- skills/webperf-loading/SKILL.md: generated with workflows
- .claude/skills/webperf-loading/SKILL.md: installed with workflows
- README.md: updated skills section with workflow examples
- SKILLS.md: added workflow documentation and examples
Updated all skill descriptions to highlight intelligent automation features: - Core Web Vitals: Automated workflows with decision trees for LCP deep dive (5 phases), CLS investigation (loading vs interaction), and INP debugging (latency breakdown + attribution) - Loading: Automated TTFB breakdown (DNS/connection/server), script loading anti-pattern detection (async/defer/preload conflicts), render-blocking identification, and resource hints validation - Interaction: Automated script attribution when long frames detected, input latency phase breakdown, and layout shift correlation with interactions - Media: Decision trees that detect LCP images and trigger format/lazy-loading analysis, identify layout shift risks, and flag lazy loading issues - Resources: Connection-aware performance budgets and adaptive loading strategies based on network type (2g/3g/4g), RTT, and save-data mode Enhanced generate-skills.js to automatically copy generated skills to .claude/skills/ directory, eliminating manual rsync step.
nucliweb
force-pushed
the
feat/agent-skills
branch
from
6d80039 to
926744c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Transforms the 46 JavaScript web performance snippets into actionable agent skills for AI assistants (Claude Code, Cursor, GitHub Copilot). Each skill provides a structured interface with snippet metadata, execution instructions for Chrome DevTools MCP, performance thresholds, and educational resources.
What are Agent Skills?
Agent skills enable AI coding assistants to autonomously run web performance diagnostics using Chrome DevTools. When installed, agents can:
Changes
New: Agent Skills System
Created 6 skill packages organized by category:
Meta-skill (Router):
skills/webperf/- Main entry point that routes to category-specific skillsCategory Skills:
skills/webperf-core-web-vitals/- 7 snippets (LCP, CLS, INP, LCP Sub-Parts, LCP Trail, LCP Image Entropy, LCP Video Candidate)skills/webperf-loading/- 27 snippets (TTFB, FCP, render-blocking resources, fonts, scripts, service workers, etc.)skills/webperf-interaction/- 8 snippets (Long Animation Frames, LongTask, scroll performance, interactions, etc.)skills/webperf-media/- 3 snippets (image audit, video audit, SVG bitmap analysis)skills/webperf-resources/- 1 snippet (network bandwidth and connection quality)Each skill directory contains:
SKILL.md- Agent instructions with snippet index, thresholds, execution steps (optimized for LLMs without unnecessary external links)scripts/*.js- Executable JavaScript snippets for Chrome DevToolsNew: Build Scripts
scripts/generate-skills.jsskills/(for repo) and.claude/skills/(for local use)npm run generate-skillsscripts/install-skills.js.claude/skills/and configures.claude/settings.jsonnpm run install-skillsscripts/install-global.js~/.claude/skills/for use across all projectsnpm run install-globalNew: Documentation
SKILLS.mdComprehensive guide covering:
README.mdupdatesNew: Claude Code Configuration
.claude/settings.jsonPre-configured with all 6 webperf skills for immediate use in this project.
.claude/skills/Local copy of all skills for project-specific usage.
Skill Structure
Each SKILL.md follows this format:
Note: Skills are optimized for LLM consumption. External "Further Reading" links have been removed to keep focus on actionable execution instructions and thresholds.
Requirements
For full functionality, users need:
Skills work in two modes:
Commits
Commit 1: Initial agent skills system
generate-skills.js) to automate generationskills/*/scripts/directoriesCommit 2: Enhanced installation and documentation
install-skills.jsandinstall-global.jsfor easy setupSKILLS.mddocumentation.claude/settings.jsonwith all skillsTest Plan
npm run generate-skillsskills/*/scripts/and.claude/skills/*/scripts/npm run install-skills.claude/settings.jsoncontains all skillsnpm run install-globalImpact
This change enables AI assistants to become autonomous web performance auditors, capable of:
The skills leverage existing snippets (no changes to core functionality) while making them accessible to the growing ecosystem of AI-powered development tools. By removing external reference links and focusing on execution instructions, the skills are optimized for LLM consumption and action rather than documentation browsing.