ui-debugging
OfficialCommunicate UI bugs, clearly and fast.
Design & Creative#screenshots#frontend#communication protocol#bug reporting#visual feedback#ui debugging#layout issues
AuthorChinchillaEnterprises
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Describing visual UI/layout bugs in screenshots often leads to ambiguity, requiring multiple rounds of clarification and slowing down the debugging process. This Skill provides a standardized, structured protocol for communicating visual problems, ensuring clarity on the first try and accelerating bug resolution.
Core Features & Use Cases
- Structured Screenshot Protocol: Guides on when to take full-page vs. viewport screenshots and what essential information to include in the description.
- Standardized Layout Issue Template: Provides a clear template for describing "What I See," "What I Expected," and "The Problem," along with layout layers and context.
- Visual Inspection Checklist: Ensures all necessary details are captured before sharing, preventing back-and-forth questions and speeding up communication.
Quick Start
Use the ui-debugging skill to describe this screenshot of a broken page layout.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: ui-debugging Download link: https://github.com/ChinchillaEnterprises/ChillSkills/archive/main.zip#ui-debugging Please download this .zip file, extract it, and install it in the .claude/skills/ directory.