Loading...
Loading...
Found 156 Skills
Frontend website debugging toolkit using Chrome DevTools Protocol with Playwright/WebKit fallbacks. Use this skill when: (1) Debugging CSS, HTML, or JavaScript issues on a webpage, (2) Taking screenshots to verify visual changes, (3) Inspecting DOM structure or console errors, (4) Testing responsive layouts, (5) Extracting selectors for automation, (6) Self-debugging frontend work Claude has created, (7) User says "debug this page", "check my site", "why doesn't this look right", or "fix the frontend". Supports Chrome (primary) and Safari/WebKit (via Playwright). Designed for agent-driven debugging loops.
Analyze a Chrome DevTools Performance trace JSON file for performance anomalies, producing a structured audit report with critical issues, warnings, metrics, timeline hotspots, and actionable recommendations.
Expert guidance for R package development following best practices for devtools, testthat, roxygen2, and R ecosystem tools
Production-tested setup for Zustand state management in React. Includes patterns for persistence, devtools, and TypeScript patterns. Prevents hydration mismatches and render loops.
TanStack DevTools for debugging Query, Router, and Form state in React apps. Use when setting up devtools, debugging cache state, or inspecting route trees. Use for devtools, react-query-devtools, router-devtools, form-devtools, debug, inspect, cache-viewer.
Use SweetLink to connect your AI agent to a real browser tab. Like Playwright, but works in your current tab. Enables authentication, screenshots, smoke tests, and DevTools telemetry without headless automation.
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.
Use Chrome DevTools MCP to obtain and analyze web page data. This skill is used when users need to crawl web content, analyze web page structure, extract data, take screenshots, monitor network requests, or perform web automation tasks.
WeChat DevTools MCP —— Mini Program Building, Preview, Debugging and Automated Testing
Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page. Handles SPA scroll containers, lazy-loaded images, and very tall pages via Chrome DevTools Protocol with zero external dependencies.
Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.
MCP server for comprehensive Node.js debugging via Chrome DevTools Protocol with breakpoints, stepping, variable inspection, and source maps