skills.rest
LumaKernel
LumaKernelCOMMUNITY
Explore all skills by this author →
𝕏@lumc_GitHub

luma-web-real-bug

Diagnose and fix live browser bugs using console scripts and playwright-cli verification.

17|1|Updated Dec 29, 2019
Search Tags:#debugging#React#frontend#Playwright#e2e testing#browser#console script
One-click install
npx skills add https://github.com/LumaKernel/dotfiles --skill luma-web-real-bug-lumakernel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: luma-web-real-bug
Source: https://github.com/LumaKernel/dotfiles/tree/main/common/claude/skills/luma-web-real-bug
Command: npx skills add https://github.com/LumaKernel/dotfiles --skill luma-web-real-bug-lumakernel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Debugging a bug that only reproduces in a real user's browser is hard when static source analysis cannot reveal runtime state like DOM structure, computed styles, React internals, or event listeners. This Skill guides an investigation workflow that captures live runtime evidence and turns it into a verified fix with regression tests. ## Core Features & Use Cases - Runtime Evidence Collection: Generates comprehensive one-shot console scripts (DOM structure, getComputedStyle, React fiber state, event listeners, bounding boxes) for the caller to run in DevTools, plus polling log scripts for swipe/drag/scroll bugs. - Parallel Verification with playwright-cli: Reproduces the same page state in parallel, compares screenshots and DOM against the caller's output, and identifies why mechanical reproduction may fail. - Hypothesis-Driven Fixing: Traces state management and CSS inheritance from runtime evidence, presents hypotheses for confirmation before editing, and requires caller verification in the real browser. - Recurrence Prevention: Adds E2E tests, layout assertion tests, visual regression tests, debug operation functions on components, and CLAUDE.md/process updates. - Use Case: A user reports a swipe gesture breaking a carousel only on their machine. The Skill produces a 0.5-second polling console script, analyzes the logged state transitions, pinpoints a race condition in the transition handler, fixes it, and adds a Playwright test asserting element positions. ## Quick Start A bug is reproducing in my browser right now on this page — help me investigate it with a console script and fix it.

Frequently Asked Questions about luma-web-real-bug

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

FAQPage Schema
How do I debug a bug that only reproduces in a real browser?▼

Run a comprehensive console script in DevTools that captures DOM structure, computed styles, React internal state, event listeners, and element geometry in one pass. Paste the structured JSON output back so the runtime evidence can be traced to source code.

How to investigate swipe or drag bugs with console scripts?▼

Use a polling log script with setInterval at 0.5-second intervals that auto-stops after 5-10 seconds via setTimeout. Output flat one-line strings like touchActive, scrollY, and translateX values, perform the gesture immediately, then copy the full log.

Can playwright-cli reproduce every browser bug automatically?▼

No. Authentication state, specific data dependencies, race conditions, and browser-specific behavior can block mechanical reproduction. The workflow identifies the exact barrier and proposes fixtures, auth bypasses, or seed data to remove it.

What tests prevent UI layout bugs from recurring?▼

Assert layout invariants rather than pixel perfection: elements within the viewport, correct relative positioning between elements, reasonable size ratios, no unintended overlap, and visibility without scrolling. Combine with visual regression screenshots and Storybook component tests.

Why inspect React fiber state during browser debugging?▼

React fiber properties like __reactFiber$ and __reactProps$ expose component props, state, and hooks that the rendered DOM hides. Reading them in the console reveals mismatches between intended state and actual rendered output.

Related Skills

Explore More Software Engineering Skills→
arbiterForgearbiterForge
139

debug

Investigate unknown defects by forming hypotheses and gathering cited evidence.

Official
Advanced
xfz1987xfz1987
1

webapp-testing

Automate end-to-end, component, and visual regression tests for web applications using Playwright.

Community
Advanced
timurgaleevtimurgaleev
5

canary

Monitor post-deploy web apps for defects and performance regressions.

Community
Advanced
decninerdecniner

web-app-audit

Audit frontend web apps for bugs using static source analysis and live browser testing.

Community
Advanced