Detects and diagnoses layout shifts using Chrome's PerformanceObserver.
npx skills add https://github.com/markacianfrani/armor --skill layout-shift-qa
Please help me install this Agent Skill. Skill: layout-shift-qa Source: https://github.com/markacianfrani/armor/tree/main/skills/layout-shift-qa Command: npx skills add https://github.com/markacianfrani/armor --skill layout-shift-qa
This skill solves the problem of invisible or hard-to-reproduce layout shifts (CLS) that degrade user experience by providing a repeatable, instrumented QA loop for web interfaces.
Use the layout-shift-qa skill to instrument the current page and identify the root cause of any layout shifts occurring during the search interaction.
High-intent search queries and answers about installing and using this skill.
To detect Cumulative Layout Shift (CLS) issues during QA, this skill injects a PerformanceObserver into Chrome to capture layout-shift entries, recording node identifiers and bounding-rect deltas for precise diagnosis.
Layout shifts and UI jank are caused by state-driven content swaps, layout-affecting animations, async content arrival, and viewport-dependent reflows, which this skill maps observed shifts against for root cause analysis.
You automate Core Web Vitals optimization by integrating with chrome-devtools MCP tools to drive user interactions, allowing the PerformanceObserver to evaluate performance metrics and capture layout shifts in real-time.
Yes, you can validate layout shift fixes through A/B validation, which deliberately re-introduces bugs to confirm the PerformanceObserver instrumentation is active, accurate, and capturing the expected UI jank.
Yes, this layout shift instrumentation is specifically designed for browser-based QA workflows, targeting invisible or hard-to-reproduce content jumping and Core Web Vitals optimization directly within the Chrome environment.
Your web page content jumps when async content arrives because it triggers viewport-dependent reflows, a diagnostic category this skill identifies by mapping layout-shift entries to their underlying root causes.
mymx2Inspect DOM, network traffic, and screenshots via Chrome DevTools MCP.
sapdev-aiPatch SAP custom-code defects with ABAP unit tests in DEV.
Greenmamba29Audits web performance using Core Web Vitals and Lighthouse metrics.
rmarino550Run automated QA tests on web applications and generate structured reports.
