Loading...
Loading...
Found 195 Skills
React performance optimization specialist. Expert in DevTools Profiler, memoization, Core Web Vitals, bundle optimization, and virtualization. Use this skill for performance bottlenecks, slow renders, large bundles, or memory issues in React applications.
Analyze any website's UI style using ChromeDevTools to extract precise CSS tokens, animations, and interaction states. Handles complex sites and anti-bot measures by guiding the user. Triggers on "analyze this site", "extract UI style", "create design system from [URL]", or "learn visual style".
Runs comprehensive WCAG-oriented web accessibility audits using Chrome DevTools MCP (Lighthouse desktop and mobile, custom evaluate_script heuristics, keyboard focus and modals, a11y snapshot vs DOM parity, 320px reflow, touch targets, structured markdown reports). Use when auditing websites for accessibility, WCAG, a11y, inclusive design, Lighthouse or axe findings, screen reader parity, focus visibility, or Chrome DevTools MCP audit workflows.
Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user wants to debug a failed run, audit network/console/DOM activity, attach a trace to an in-progress session, or feed structured per-page summaries back into an agent loop so its next iteration learns from the last one.
Use when implementing Zustand middleware for persistence, dev tools, immutability, and other enhanced store functionality. Covers persist, devtools, immer, and custom middleware.
React render performance patterns including React Compiler integration, memoization strategies, TanStack Virtual, and DevTools profiling. Use when debugging slow renders, optimizing large lists, or reducing unnecessary re-renders.
Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool
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.
Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
devtools usage for alova. Use this skill whenever the user mentions alova openapi configuration, @alova/wormhole, API code generation, OpenAPI/Swagger with alova integration, alova devtools, or the alova VSCode extension. Trigger even for questions like "how do I use OpenAPI with alova" or "how do I generate API code with alova".
Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.
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.