pf-component-structure

Fix misnested PatternFly React components by auditing your codebase for incorrect component hierarchy and applying the correct layout wrappers. This Skill detects missing wrappers across Page, Card, and Table families and references established patterns to correct structural nesting problems.

Common PatternFly layout anti-patterns include missing wrappers like CardBody, incorrect hierarchy within Page or Table families, and inconsistent layout primitives. These structural nesting issues lead to spacing problems and hard-to-maintain React code.

Audit a React codebase for incorrect PatternFly component hierarchy by checking component nesting against reference patterns. This Skill enforces proper hierarchy rules for Page, Card, Table, and DescriptionList families to identify and guide fixes for structural anti-patterns.

Yes, the PatternFly component structure audit works with DescriptionList and Table families. It checks for proper nesting and correct wrapper usage across these component families, ensuring consistent layout primitives and resolving spacing issues during UI assembly.

Audit your PatternFly React component nesting when you encounter spacing issues during UI assembly or notice missing layout wrappers. The Skill applies reference patterns to debug incorrect hierarchy and enforces proper component structure across Page, Card, and Table families.

The best way to ensure correct wrappers in PatternFly React components is to audit your code against established hierarchy reference patterns. This Skill detects missing wrappers and incorrect layout primitives, providing guidance to accelerate correct UI assembly.