frontend-debug

Name: frontend-debug
Availability: InStock
Author: Acosmi

Capture performance baselines and re-run audits to verify frontend improvements.

6|Updated Feb 26, 2026

Search Tags:#performance #frontend #debug #browser #design-tokens #visual-regression #web-vitals

Ready to run

npx skills add https://github.com/Acosmi/CrabClaw --skill frontend-debug-acosmi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-debug
Source: https://github.com/Acosmi/CrabClaw/tree/main/docs/skills/operations/frontend-debug
Command: npx skills add https://github.com/Acosmi/CrabClaw --skill frontend-debug-acosmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend debugging for CrabCode often involves scattered tools and inconsistent baselines. This skill provides a repeatable loop to collect performance baselines, apply code changes, and verify results across Core Web Vitals, visuals, and styles.

Core Features & Use Cases

Baseline performance capture: gather Core Web Vitals, memory snapshot, and visual diffs to establish a stable reference.
Style and component localization: extract design tokens and component styles for targeted refinements.
End-to-end verification: re-run audits and visual diffs to confirm improvements and catch regressions.

Quick Start

Trigger the frontend-debug workflow on a CrabCode page to baseline performance, patch the code, and re-audit to verify improvements.

Frequently Asked Questions about frontend-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug frontend performance regressions and verify Core Web Vitals improvements?▼

To debug frontend performance regressions, you capture a baseline of Core Web Vitals and memory, apply targeted code changes, then re-run audits to verify measurable improvements and prevent regressions.

What is visual regression testing and how does it catch UI style changes?▼

Visual regression testing captures visual diffs against a baseline reference to detect UI changes. It compares component styles and design tokens before and after code modifications to catch unintended visual regressions.

How do I establish a performance baseline before optimizing web vitals?▼

You establish a performance baseline by gathering Core Web Vitals, taking a memory snapshot, and capturing visual diffs. This stable reference ensures subsequent code changes can be accurately measured for improvements.

Can I localize and extract design tokens for targeted component style refinements?▼

Yes, you can localize and extract design tokens and component styles for targeted refinements. This isolates specific style changes during frontend debugging to ensure accurate visual diff verification.

Does browser-based automated checking work for frontend memory snapshot analysis?▼

Browser-based automated checks enforce the debugging loop by capturing and analyzing memory snapshots. This ensures code changes produce measurable improvements across Core Web Vitals without introducing regressions.