Skill UI

Controls Chrome via the DevTools MCP to navigate pages, interact with elements, inspect console and network data, capture snapshots/screenshots, and record performance traces for live web debugging and profiling tasks.

Comprehensive Go guidance for browser automation and web scraping using Rod’s direct Chrome DevTools Protocol integration plus stealth anti-detection patterns, ideal for headless SPA testing, concurrent scraping, and request interception.

This guide establishes a comprehensive and rapid development loop for Obsidian plugins. It covers the entire workflow, from setup (cloning templates, symlinking) to advanced features, including running esbuild in watch mode, achieving hot-reloading (via Ctrl+R or automatic methods), deep debugging with Chrome DevTools, and running unit tests with vitest. Essential for developers seeking fast feedback and reliable plugin iteration.

A comprehensive guide for optimizing Obsidian plugin performance, especially when dealing with large knowledge vaults (10,000+ files). Learn advanced techniques such as profiling bottlenecks with DevTools, implementing lazy initialization to speed up startup, processing files in manageable batches with UI yielding, and utilizing LRU caches for bounded memory management. Essential for creating stable, high-performance plugins.

A comprehensive guide covering the entire web performance optimization lifecycle. Learn how to measure Core Web Vitals (LCP, INP, CLS), identify bottlenecks using specialized tools like Lighthouse and DevTools, and apply advanced techniques such as code splitting, lazy loading, and memory leak fixes to ensure fast, stable, and high-quality user experiences.

A comprehensive guide to diagnosing and resolving performance bottlenecks in React applications. This skill teaches advanced techniques like state isolation, memoization (using `useMemo`, `useCallback`, and `React.memo`), and list virtualization. It guides users through profiling using React DevTools to identify render hotspots, ensuring components render efficiently and maintain high application responsiveness.

This tool enables deep inspection and validation of web applications by connecting to the browser's DevTools Protocol (MCP). It allows agents to perform tasks like DOM inspection, capturing console logs, monitoring network requests, profiling performance, and taking screenshots in a live environment. Essential for debugging UIs, validating API integrations, and performing end-to-end automated testing.

This skill provides expert-level control over a live Chrome browser. It enables full web automation (clicking, form filling, navigation), deep debugging (analyzing console logs, network requests), visual inspection (screenshots, snapshots), and detailed performance profiling. Ideal for QA engineers, web scraping, and front-end development testing.

This skill establishes an autonomous, iterative build loop for continuous website development. It functions as an agent that reads tasks from a 'baton' file, utilizes the Stitch MCP tools to generate structured web pages, integrates the generated HTML assets into the main site structure, and finally updates the baton file with the next required task. It supports end-to-end, programmatic site building and includes optional visual verification using Chrome DevTools.

Captures complete, full-page screenshots of any modern web page using the Chrome DevTools Protocol (CDP). Unlike standard tools, this utility handles Single Page Applications (SPAs), scrolling content, lazy-loaded images, and complex scroll containers, ensuring the entire visible content is captured in a single, high-fidelity PNG file. Ideal for documenting complex web flows and testing.

This skill drives an existing browser instance using the Chrome DevTools Protocol (CDP). It is essential for complex web automation tasks that require visible interaction, JavaScript execution, or handling authenticated, stateful sessions. Use it when static data fetching is insufficient, such as simulating user logins, interacting with iframes, or performing visual verification. Supports headless and remote environments.

This skill enables authorized reverse engineering of Chrome and Firefox browser extensions. It involves analyzing manifest files, background workers, and content scripts to investigate credential handling, data exposure, and malicious behavior. Suitable for security audits, supply chain poisoning investigations, and understanding extension logic through static and dynamic analysis using tools like DevTools and Frida.