css-layout-debugger
CommunityDebug CSS layout and styling issues.
Authordtsong
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps developers diagnose and fix visual bugs related to CSS layout, styling, and responsiveness in Next.js applications, ensuring a consistent and correct user interface.
Core Features & Use Cases
- Comprehensive Diagnosis: Analyzes CSS issues through a 6-phase pipeline mirroring browser rendering.
- Multi-Framework Support: Handles Tailwind CSS, CSS Modules, styled-components, and vanilla CSS.
- Use Case: A user reports that a button is misaligned on mobile devices and its background color isn't changing in dark mode. This Skill can pinpoint whether the issue stems from incorrect Tailwind classes, CSS specificity conflicts, or viewport-related styling.
Quick Start
Use the css-layout-debugger skill to diagnose a styling issue on the '/dashboard' route, providing the symptom 'elements are overlapping' and a screenshot.
Dependency Matrix
Required Modules
None requiredComponents
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: css-layout-debugger Download link: https://github.com/dtsong/claude-code-windows-setup/archive/main.zip#css-layout-debugger Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.