debug-optimize-lcp 是做什么的？
指导如何使用 Chrome DevTools MCP 工具调试和优化最大内容绘制 (LCP)。当用户询问 LCP 性能、页面加载缓慢、Core Web Vitals 优化，或想了解为何页面主内容加载过慢时，请使用此技能。当用户提到“最大内容绘制”、“页面加载速度”、“CWV”，或希望改进英雄图片或主要内容的渲染速度时，也应使用此技能。
指导如何使用 Chrome DevTools MCP 工具调试和优化最大内容绘制 (LCP)。
此技能专注于使用 Chrome DevTools 的 MCP 工具来调试和优化最大内容绘制（LCP）。LCP 是衡量页面主要内容加载速度的关键 Core Web Vitals 指标。当用户询问 LCP 性能、页面加载缓慢、Core Web Vitals 优化，或想了解主内容为何延迟显示时，应使用此技能。该技能支持 Chrome DevTools 平台，通过逐步引导用户分析 LCP 元素、排查资源加载问题、优化图片和文本渲染，从而提升页面加载速度。它涵盖从识别 LCP 候选元素到应用最佳实践（如预加载、压缩和 CDN 加速）的完整流程。
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp/tree/main/skills/debug-optimize-lcpInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
指导如何使用 Chrome DevTools MCP 工具调试和优化最大内容绘制 (LCP)。当用户询问 LCP 性能、页面加载缓慢、Core Web Vitals 优化，或想了解为何页面主内容加载过慢时，请使用此技能。当用户提到“最大内容绘制”、“页面加载速度”、“CWV”，或希望改进英雄图片或主要内容的渲染速度时，也应使用此技能。
This repo contains 6 individual skills — each has its own dedicated page.
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).
Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.
Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.
Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.
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.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.