Analyze DOM hierarchy to diagnose CSS layout constraint failures.
npx skills add https://github.com/brennancheung/CourseAI --skill css-expert-brennancheung
Please help me install this Agent Skill. Skill: css-expert Source: https://github.com/brennancheung/CourseAI/tree/main/codex/skills/css-expert Command: npx skills add https://github.com/brennancheung/CourseAI --skill css-expert-brennancheung
This Skill helps diagnose and fix complex CSS layout problems, such as incorrect sizing, overflow issues, and unexpected element behavior within parent-child hierarchies.
Use the css-expert skill to debug a layout issue on the element with class 'problematic-div'.
High-intent search queries and answers about installing and using this skill.
Debug CSS layout overflow by analyzing the DOM hierarchy to identify constraint propagation failures. A bottom-up methodology traces width constraints from the problematic element up to the root, isolating the specific child pushing boundaries.
A flexbox item may refuse to shrink due to implicit minimum width constraints overriding flex-shrink properties. Hypothesis-driven troubleshooting traces these sizing constraints up the DOM tree to locate the rigid ancestor or descendant causing the failure.
Tracing unexpected width constraints in a grid layout requires a systematic, bottom-up analysis of the DOM hierarchy. This method identifies exactly where constraint propagation fails between parent and child elements to pinpoint the root cause.
Fix an element that pushes the page wider by systematically analyzing its width constraints and overflow behavior. Hypothesis-driven debugging identifies the specific DOM node breaking the parent container's boundaries and applies known CSS patterns to resolve it.
You can diagnose parent-child hierarchy sizing problems using a structured, hypothesis-driven CSS debugging approach. This involves analyzing constraint propagation failures from the problem element upward to identify the exact layout violation.
Motion-CreativeBuild a reusable brand kit from website copy and computed DOM styles.
WanxiaJaneYangDiagnose CSS layout issues and propose fixes with Flexbox or Grid.
Luqman-Ud-DinDetect forced-colors accessibility failures in rendered web pages.
Higashi-KotaStandardize CSS styling with design tokens and grid-first layouts.
