Diagnose CSS layout issues in Tailwind and React apps.
npx skills add https://github.com/majiayu000/spellbook --skill css-debug
Please help me install this Agent Skill. Skill: css-debug Source: https://github.com/majiayu000/spellbook/tree/main/skills/css-debug Command: npx skills add https://github.com/majiayu000/spellbook --skill css-debug
Diagnosing CSS and frontend layout issues can be time-consuming; this skill provides a structured approach to identify root causes, collect relevant context, and guide fixes.
Provide a structured CSS/layout diagnosis for a given page by collecting HTML structure, computed styles, and screenshots, then propose fixes.
High-intent search queries and answers about installing and using this skill.
Debug CSS layout issues by collecting the HTML structure, computed styles, and screenshots, then performing step-by-step checks to identify offending ancestors causing clipping. This structured approach locates root causes in positioning or overflow to guide specific fixes.
Tailwind layout visibility problems often stem from incorrect overflow settings, invalid z-index stacking contexts, or misconfigured positioning. Diagnose these rendering issues by inspecting computed styles and tracing ancestor containers to find the property causing the hidden or clipped content.
The best way to troubleshoot frontend rendering problems is to run guided debugging checks using browser debugging commands to inspect computed styles and DOM structure. This method identifies positioning and overflow discrepancies to provide actionable recommendations for cross-browser fixes.
Yes, you can fix z-index stacking and positioning in vanilla CSS. The diagnostic approach applies to positioning, overflow, and rendering visibility problems, supporting step-by-step debugging checks across Tailwind, React, and vanilla CSS environments.
When a CSS element is not displaying correctly on a responsive page, collect the HTML structure and computed styles, then run step-by-step debugging checks. Locate the offending ancestor affecting overflow or positioning to apply the necessary responsive layout adjustments.
Yes, CSS debugging works without external libraries or dependencies. It relies on collecting page context like HTML structure and screenshots, then applying guided checks and browser commands to diagnose rendering issues directly within your existing frontend environment.
chrismccoyRebuilds live webpages into semantic Tailwind utility classes preserving original appearance.
NweremizuAudit user interfaces for accessibility, performance, and responsive defects.
lucasmccombCapture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.
JansenAnalyticsAnalyze frontend screenshots to detect visual defects and generate structured reports.
