New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Debugging UI

by dxos in dxos/dxos

A skill your agent uses when debugging any UI bug — wrong rendering, layout or scroll jumps, flicker/flash, styling, interaction, focus/attention, or reactivity failures — in Composer plugins…

Custom licenceAuto-check passedDevelopment

Install Debugging UI

skills CLI
$ npx skills add dxos/dxos --skill debugging-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dxos/dxos debugging-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dxos/dxos.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/debugging-ui .claude/skills/debugging-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
debugging-ui
GitHub stars
525
Token cost
~3.9k tokens
SKILL.md length
2,161 words
Files
1
Skills in repo
41
Repo updated
First seen
Licence
Custom licence

At a glance

A skill your agent uses when debugging any UI bug — wrong rendering, layout or scroll jumps, flicker/flash, styling, interaction, focus/attention, or reactivity failures — in Composer plugins…

  • Works in 3 steps: Outcome — do we understand what this… → Quality — regardless of whether it… → Complexity — are we adding complexity to…
  • Debugging any UI bug — wrong rendering
  • SKILL.md covers Core principle, The golden rule — assess after…, The repro is the contract —… and Step 0 — Inventory your…, plus 9 more sections
  • Calls git and bash

What it does

Debugging UI is an agent skill from dxos/dxos. Use when debugging any UI bug — wrong rendering, layout or scroll jumps, flicker/flash, styling, interaction, focus/attention, or reactivity failures — in Composer plugins, react-ui components, storybook stories, or the running app. Applies from the first symptom report, before proposing any fix.

Its SKILL.md is about 3.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Debugging. It works with Storybook and React. The repository describes itself as: TypeScript implementation of the DXOS protocols, SDK, toolchain and Composer.

When your agent uses it

  • Debugging any UI bug — wrong rendering
  • Focus/attention
  • Reactivity failures — in Composer plugins
  • React-ui components

Example prompts

  • “/debugging-ui”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Outcome — do we understand what this change did, and can we measure it?
  2. Quality — regardless of whether it resolves the bug, does EVERY change
  3. Complexity — are we adding complexity to solve the problem? Added

What it can do on your machine

Read from SKILL.md and the folder at commit 2e6b92a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git
    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Debugging UI loads about 3.9k tokens when it runs. Until then it costs about 78 tokens; SKILL.md has 2,161 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~3.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 2,161 words (~3,927 tokens).

“The user is the most expensive and least available instrument you have. Every verification you can perform yourself — running a test, driving a browser, reading a frame trace — is strictly cheaper than asking the user to look. A…”

— opening of SKILL.md by dxos, Custom licence
name
debugging-ui

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/debugging-ui of dxos/dxos.

Open the folder on GitHubat commit 2e6b92a

Compare with similar skills

Debugging UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Debugging UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Debugging UI this skilldxos/dxos525—~3.9kAutomated safety check: PassCustom licence
Electron Heap Snapshot Analysiskeybase/client9.3k—~875Automated safety check: PassBSD-3-Clause
Electron DevTools Trace Analysiskeybase/client9.3k—~809Automated safety check: PassBSD-3-Clause
React DevTools Profile Analyzerkeybase/client9.3k—~978Automated safety check: PassBSD-3-Clause
Jazz UI Developmentgarden-co/classic-jazz2.5k—~1.7kAutomated safety check: PassMIT
Implement GitHub FeatureAgnosticUI/agnosticui827—~1.6kAutomated safety check: PassApache-2.0

Similar skills

  • Electron Heap Snapshot Analysis

    keybase/client

    Analyzes V8, Chrome and Electron .heapsnapshot files with Node scripts to find memory leaks, detached DOM nodes and the retainer paths that keep objects alive.

    9.3k GitHub stars~875 tokensUpdated today
    DevelopmentAuto-check passed

  • Electron DevTools Trace Analysis

    keybase/client

    Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.

    9.3k GitHub stars~809 tokensUpdated today
    DevelopmentAuto-check passed

  • React DevTools Profile Analyzer

    keybase/client

    Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.

    9.3k GitHub stars~978 tokensUpdated today
    DevelopmentAuto-check passed

  • Jazz UI Development

    garden-co/classic-jazz

    A skill your agent uses when building, debugging, or optimizing Jazz applications.

    2.5k GitHub stars~1.7k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Implement GitHub Feature

    AgnosticUI/agnosticui

    Design and implement a new feature or component from a GitHub issue.

    827 GitHub stars~1.6k tokensUpdated today
    DevelopmentAuto-check passed

  • Renderdoc GPU Debug

    rudybear/renderdoc-skill

    GPU frame debugging with RenderDoc via rdc-cli. An agent skill from rudybear/renderdoc-skill.

    212 GitHub stars~4k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed

More from dxos/dxos

All 41 skills in this repo

  • Agentic Review

    dxos/dxos

    Run the rule-driven agentic code review — discover rule blocks in the repo's .mdl files, prepare per-rule review groups (full project by default; diff-only with --pr-only), spawn one focused Sonnet…

    525 GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Composer Forensics

    dxos/dxos

    Forensically inspect and repair Composer browser profiles — offline (Chrome OPFS / SQLite extract) or live via /recovery.html debug port.

    525 GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • Migrate Oxfmt

    dxos/dxos

    Guide for migrating a project from Prettier or Biome to Oxfmt.

    525 GitHub starsUsed in 3 repos~2.2k tokens
    Auto-check passed

  • Moon

    dxos/dxos

    This skill should be used when the user asks to "configure moon", "set up moonrepo", "create moon tasks", "run moon commands", "configure moon workspace", "add moon project", "moon ci setup", "moon…

    525 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Subduction Policy

    dxos/dxos

    Reference for SubductionPolicy (the four hooks authorizeConnect, authorizeFetch, authorizePut, filterAuthorizedFetch passed via Subduction.hydrate(..., policy) or new Repo({ subductionPolicy })).

    525 GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Autocue

    dxos/dxos

    Record a demo of the running app that the agent drives itself — a .mdl QA test or an ad-hoc walkthrough — as a captioned .webm (or a screenshot), trimmed of dead air and ready to attach.

    525 GitHub stars~12k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Debugging UI

What does Debugging UI do?

A skill your agent uses when debugging any UI bug — wrong rendering, layout or scroll jumps, flicker/flash, styling, interaction, focus/attention, or reactivity failures — in Composer plugins…. Debugging UI is an agent skill from dxos/dxos. Use when debugging any UI bug — wrong rendering, layout or scroll jumps, flicker/flash, styling, interaction, focus/attention, or reactivity failures — in Composer plugins, react-ui components, storybook stories, or the running app.

When should I use Debugging UI?

Debugging UI fits situations like: debugging any UI bug — wrong rendering; focus/attention; reactivity failures — in Composer plugins; React-ui components.

How do I install Debugging UI in Claude Code?

Run `npx skills add dxos/dxos --skill debugging-ui -a claude-code`. Or copy the skill folder (.agents/skills/debugging-ui in dxos/dxos) into .claude/skills/debugging-ui in your project. Claude Code loads it when a task matches its description.

How do I install Debugging UI in Codex?

Run `npx skills add dxos/dxos --skill debugging-ui -a codex`. Or copy the skill folder (.agents/skills/debugging-ui in dxos/dxos) into .agents/skills/debugging-ui in your project. Codex loads it when a task matches its description.

Can I use Debugging UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dxos/dxos --skill debugging-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/debugging-ui, .gemini/skills/debugging-ui, .github/skills/debugging-ui and .opencode/skills/debugging-ui in your project.

What does Debugging UI need to run?

Going by SKILL.md and its folder, Debugging UI needs the command-line tools its instructions call (git and bash).

Does Debugging UI access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Debugging UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Debugging UI use?

Debugging UI has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Debugging UI use?

About 3.9k tokens (SKILL.md is roughly 16k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Debugging UI?

Skills that share tags, products or a category with Debugging UI: Electron Heap Snapshot Analysis (keybase/client, 9.3k stars), Electron DevTools Trace Analysis (keybase/client, 9.3k stars), React DevTools Profile Analyzer (keybase/client, 9.3k stars) and Jazz UI Development (garden-co/classic-jazz, 2.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Debugging UI?

dxos (a GitHub organization) maintains it in dxos/dxos, which has 525 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on October 9, 2026.

Source: dxos/dxos on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.