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.

Utilize Chrome DevTools MCP to gain full visibility into live browser execution. This powerful tool allows agents to inspect the DOM, analyze console logs, monitor network requests, profile performance, capture screenshots, and verify complex UI rendering issues, bridging the gap between static code and real-time user experience.

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 enables advanced interaction with browser automation using the Chrome DevTools Protocol (CDP). Use it when the user needs to explicitly connect to a running browser instance, scan for available CDP ports, specify a fixed debug port, or share a single browser session across multiple tools. It is designed for advanced automation scenarios, distinct from simple browser launching.

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.