skills.rest
dxos
dxosOFFICIAL
Explore all skills by this author →
Website𝕏@dxos_orgGitHub

debugging-ui

Diagnose UI rendering, layout, and interaction bugs in Composer plugins and React components.

518|49|Updated Apr 7, 2021
Search Tags:#UI#playwright#storybook#Tailwind#Debugging#reproduction#reAct
One-click install
npx skills add https://github.com/dxos/dxos --skill debugging-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debugging-ui
Source: https://github.com/dxos/dxos/tree/main/.agents/skills/debugging-ui
Command: npx skills add https://github.com/dxos/dxos --skill debugging-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI bugs like flicker, scroll jumps, wrong rendering, and focus failures are notoriously hard to pin down, and debugging sessions often waste user time with endless verification requests. This Skill enforces a disciplined, instrument-first debugging workflow that establishes a reproducible contract before any fix and verifies fixes in the actual reporting environment.

Core Features & Use Cases

  • Repro Contract Enforcement: Requires a three-slot repro contract (user repro, candidate repro, acceptance criteria) before any code change, so every fix claim is auditable.
  • Isolation Ladder: Guides systematic escalation from the running app down to Storybook stories and unit tests after repeated failed attempts, turning divergences between levels into diagnoses.
  • Instrument-First Verification: Prioritizes Playwright, browser MCP, frame traces, and computed-style inspection over asking the user, with a strict budget of 3 diagnostic asks per bug.
  • Use Case: A user reports a scroll jump in a Composer plugin. The Skill drives you to capture the user's repro, reproduce it in a Storybook fixture, test hypotheses with frame traces, and only declare the bug fixed once the symptom is verifiably gone in the real app.

Quick Start

Ask the agent to debug the reported UI bug using the debugging-ui workflow, starting with a repro contract before proposing any fix.

Frequently Asked Questions about debugging-ui

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

FAQPage Schema
How do I debug a UI rendering bug in a React component?▼

Start by establishing a repro contract with numbered steps and a measurable failure signal, then drive the bug yourself with Storybook stories or Playwright rather than asking the user to verify. Only claim a fix once the original symptom is gone in the reporting environment.

What tools should I use to reproduce browser UI bugs?▼

Use the cheapest instrument first: vitest unit tests for state logic, Storybook stories with play scripts for component behavior, then Playwright or browser MCP for gestures, frame traces, and screenshots against the running app.

Why does my Tailwind class not apply any styles after migration?▼

The tailwindcss-logical dialect classes like pis-*, pbs-*, and is-* were dropped in the Tailwind v4 migration and compile to nothing without errors. Confirm by reading the element's computed style in the browser rather than trusting the source.

Why does a bug pass in Storybook but still fail in the real app?▼

When two levels disagree, the divergence is the diagnosis: diff the environments for structure, attention traffic, scroll position, timing, and real versus synthetic input. Degrade one environment toward the other until the failure signatures match instead of patching the green level.

When should I step down from app-level debugging to unit tests?▼

Step down after 2-3 failed instrumented attempts at one level. Build a progressively smaller demo of the same behavior, such as a fixture-first Storybook story then a unit test, which also becomes the regression net.

Related Skills

Explore More Software Engineering Skills→
tyevanstyevans
14

bug

Create structured bug reports with reproduction steps and severity.

Community
Intermediate
VrooliVrooli
54

Bugfix Scope

Define bug fix boundaries to prevent scope creep and unrelated refactors.

Official
Basic
alexandrbasisalexandrbasis
12

dbg

Instrument code with targeted logging to analyze runtime execution evidence.

Community
Advanced
farsinkfarsink

systematic-debugging

Guide software debugging through a four-phase root cause analysis process.

Community
Advanced