Skip to content

feat: add patternfly component structure skill#31

Open
nicolethoen wants to merge 3 commits intopatternfly:mainfrom
nicolethoen:feat/patternfly-component-structure
Open

feat: add patternfly component structure skill#31
nicolethoen wants to merge 3 commits intopatternfly:mainfrom
nicolethoen:feat/patternfly-component-structure

Conversation

@nicolethoen
Copy link
Contributor

@nicolethoen nicolethoen commented Mar 19, 2026

Closes: #32
This skill provides AI agents and developers with the correct parent-child component hierarchies for PatternFly React components. Without it, users commonly skip intermediate wrapper components (like ToolbarContent, CardBody, PageSection, DrawerContentBody, etc.) that provide essential CSS classes for spacing, padding, and alignment. This leads to broken layouts that get "fixed" with custom CSS overrides instead of correcting the component tree. The skill covers 13 component families including Page, Masthead, Toolbar, Card, Modal, Drawer, Nav, Table, DataList, Tabs, EmptyState, DescriptionList, and Sidebar, with wrong/right code examples for the most common mistakes.

@@ -0,0 +1,331 @@
---
name: PatternFly Component Structure
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The directory name patternfly-component-structure is what determines the skill name — this name field is redundant and not kebab-case. Safe to just remove it.

@@ -0,0 +1,331 @@
---
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At 331 lines this is well over the 200-line guideline. You already have 4 reference files — could more of the component hierarchy details be moved there to keep the core instructions shorter?

@@ -0,0 +1,142 @@
---
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This agent has a "How to Run" workflow and produces a report — that reads more like a skill (task that produces a result) than an agent (domain knowledge the AI always follows). Meanwhile the SKILL.md reads more like reference knowledge. Are these two swapped?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add skill for aiding with pf-react component structures

2 participants