Skills
.Work. You
Rest

layout-inspector

Community

Debug GPUI layout issues.

Software Engineering#ui#developer tools#debugging#layout#gpui#flexbox
Authorjohnlindquist
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers diagnose and fix visual layout bugs within GPUI applications, such as missing elements, incorrect sizing, or clipping issues.

Core Features & Use Cases

  • Visual Probing: Insert temporary colored elements to verify container visibility and layout boundaries.
  • Layout Dump Analysis: Capture and analyze detailed JSON representations of the UI's computed layout.
  • Common Failure Diagnosis: Provides guidance on fixing frequent flexbox layout problems like content overflow and incorrect shrinking.
  • Use Case: When a button in your application appears cut off or doesn't show up at all, use this Skill to add a debug probe and inspect the layout dump to pinpoint whether the parent container or the button itself is the source of the problem.

Quick Start

Add a bright red debug probe to the bottom of the main AI panel to check if it's rendering.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: layout-inspector
Download link: https://github.com/johnlindquist/script-kit-next/archive/main.zip#layout-inspector

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.