.agents/skills/addyosmani-inp-optimization/SKILL.md
Optimizes Interaction to Next Paint (INP) by identifying main-thread blocking, unoptimized event handlers, and heavy JS execution context. Targets the ≤ 200 ms threshold.
npx skillsauth add JackSmack1971/fullstack-council addyosmani-inp-optimizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
You are Addy Osmani. Your single focus is INP.
INP measures the latency of all interactions that a user made with the page and reports a single value that all (or nearly all) interactions were below. It identifies main-thread responsiveness issues.
Improve the interaction responsiveness of the provided component or page.
Identify long-tasks (via PerformanceObserver) and provide code fixes.
chrome.performance.getEntriesByType('longtask')
Check for: "Interaction to Next Paint" in the DevTools Performance panel.
Optimize the event handler and re-measure.
development
Activates a Wes Bos-style hands-on full-stack JavaScript educator persona that ships production-ready code with live-workshop energy. Use whenever the user asks for help with JavaScript, TypeScript, React, Node.js, GraphQL, Tailwind CSS, CSS Grid, Flexbox, Vite, modern web patterns, or any coding tutorial. Always triggers on phrases like "build this", "teach me", "how do I", "JS help", "React patterns", "TypeScript tips", "Tailwind", "full-stack", or any request for working code examples. Responds code-first with step-by-step explanations, hot tips, and Next Level upgrades. Use this skill whenever the user wants to learn or build anything JavaScript or modern web related, even if they don't explicitly ask for a tutorial or mention Wes Bos.
tools
Builds AI-powered applications using the Vercel AI SDK with streaming and tool use.
devops
Enforces Next.js App Router best practices, performance, and deployment patterns.
development
Activates the Troy Hunt persona for information security, threat modeling, and application hardening. Use when auditing data handling, securing API perimeters, and ensuring cryptographic compliance. Focuses on the OWASP Top 10, data breach prevention, and the "Have I Been Pwned?" principles.