document.body }}>
+```
+
+### Performance Issues
+- **1000+ rows**: Use virtualization with react-window
+- **Large datasets**: Implement pagination
+- **Slow rendering**: Memoize components with React.memo
+
+### Selection Issues
+- **Use Set not Array**: More efficient for selection state
+- **Handle indeterminate**: For "select all" checkbox state
+- **Provide feedback**: Show selected count and bulk actions
+
+## Quick Reference
+- **[Table Component](https://www.patternfly.org/components/table)** - Official table documentation
+- **[Toolbar Component](https://www.patternfly.org/components/toolbar)** - Toolbar with filters
+- **[Dropdown Component](https://www.patternfly.org/components/menus/dropdown)** - Dropdown positioning
+
+## Using the Data View Component
+
+The `@patternfly/react-data-view` component is a powerful, opinionated tool for building consistent data-driven tables and lists. It composes standard PatternFly components like `Table`, `Toolbar`, and `Pagination` into a single, streamlined API.
+
+### When to Use Data View
+- β
**Use for standard list pages**: When you need to display a list of resources with common functionality like filtering, sorting, selection, and actions.
+- β
**To enforce consistency**: Use it across your application to ensure all data tables look and behave the same.
+- β **Not for highly custom layouts**: If your layout deviates significantly from a standard table or list view, composing individual PatternFly components may be a better approach.
+
+## Data view documentation
+- **[Data view](https://www.patternfly.org/extensions/data-view/overview)** - Official data view documentation
+- **[Table Component](https://www.patternfly.org/extensions/data-view/table)** - Data view's table documentation and examples
+- **[Toolbar Component](https://www.patternfly.org/extensions/data-view/toolbar/)** - Data view's toolbar documentation and examples
+
+### Required Setup
+
+1. **Installation**:
+ ```bash
+ npm install @patternfly/react-data-view
+ ```
+
+2. **CSS Import**:
+ ```jsx
+ // Import required CSS in your application's entrypoint
+ import '@patternfly/react-data-view/dist/css/main.css';
+ ```
+
+3. **Component Import**:
+ ```jsx
+ // Use dynamic imports for better performance
+ import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
+ ```
+
+### Best Practices
+
+- **Provide stable data and columns**: For performance, memoize the `data` and `columns` props passed to `DataView`, especially if they are derived from other state.
+ ```jsx
+ const columns = useMemo(() => [...], []);
+ const data = useMemo(() => [...], [sourceData]);
+
+
+
+
+ Name
+ Email
+
+
+
+ {data.map(item => (
+
+ {item.name}
+ {item.email}
+
+ ))}
+
+
+```
+
+## Sorting Rules
+- β
**Use sort prop on Th components** - Configure sorting via the `sort` prop
+- β
**Manage sort state with useState** - Track sortBy state
+- β
**Use useMemo for sorted data** - Performance optimization
+
+```jsx
+// β
Required sorting pattern
+const [sortBy, setSortBy] = useState({});
+
+
+ Name
+
+```
+
+## Selection Rules
+- β
**Use Set for selection state** - More efficient than arrays
+- β
**Handle indeterminate state** - For "select all" checkbox
+- β
**Use proper ARIA labels** - For accessibility
+
+```jsx
+// β
Required selection pattern
+const [selectedItems, setSelectedItems] = useState(new Set());
+
+const isAllSelected = selectedItems.size === data.length && data.length > 0;
+const isPartiallySelected = selectedItems.size > 0 && selectedItems.size < data.length;
+
+` component to specify column widths as a percentage of the table's total width.
+
+- β
**Use `width(percentage)`**: Best for flexible, responsive layouts.
+- β **Avoid fixed pixel widths**: Can break responsiveness.
+
+```jsx
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { width } from '@patternfly/react-table';
+
+
+
+
+ User ID
+ Name
+ Email
+
+
+
+ {/* ... */}
+
+
+```
+
+### Controlling Text and Column Width
+In addition to setting explicit widths, you can control how text behaves within cells using the `modifier` prop on ` ` and ` ` components. This influences column dimensions and text overflow.
+
+Key text modifiers include:
+- **`truncate`**: Truncates text with an ellipsis.
+- **`wrap`**: Forces text to wrap, which is useful for long header text.
+- **`nowrap`**: Prevents text from wrapping.
+- **`breakWord`**: Forces long, unbreakable strings (like URLs) to break.
+- **`fitContent`**: Shrinks the column to fit its content.
+
+For detailed usage and code examples, see the official PatternFly documentation and the example in the PatternFly React repository.
+
+- [**Controlling Text in Tables (PatternFly Docs)**](https://www.patternfly.org/components/table/controlling-text)
+- [**TableControllingText.tsx Example on GitHub**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/components/Table/examples/TableControllingText.tsx)
+
+### Sticky Headers and Columns
+For tables that scroll horizontally or vertically, you can make the header, specific columns, or the action column "sticky."
+
+- **`isStickyHeader`**: Add this prop to the `` component to make the header row stick to the top during vertical scrolling.
+- **`isSticky`**: Add this prop to a `` or ` ` component to make an entire column sticky during horizontal scrolling. This is commonly used for the first column (e.g., selection checkbox or ID), or last column (e.g. columns containing actions menus).
+
+```jsx
+// β
Sticky header, first column, and action column
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+
+
+
+ ID
+ Name
+ {/* ... more columns */}
+ Actions
+
+
+
+ {data.map(item => (
+
+ {item.id}
+ {item.name}
+ {/* ... more cells */}
+
+
+
+ ))}
+
+
+```
+
+## Performance Rules
+- β
**Use Skeleton for loading states** - Provide visual feedback
+- β
**Ensure responsive behavior** - Test on multiple screen sizes
+- β
**Use pagination for large datasets** - Better UX than virtualization
+- β
**Memoize table rows** - React.memo for performance
+- β
**Use useCallback for handlers** - Stable references
+
+```jsx
+// β
Required for large datasets
+import { Pagination } from '@patternfly/react-core';
+
+// For better UX, use pagination
+ document.body }}>
+```
+
+### Selection Issues
+- **Use Set not Array**: More efficient for selection state
+- **Handle indeterminate**: For "select all" checkbox state
+- **Provide feedback**: Show selected count and bulk actions
+
+## Quick Reference
+- **[Table Component](https://www.patternfly.org/components/table)** - Official table documentation
\ No newline at end of file
diff --git a/ai-documentation/components/layout/README.md b/ai-documentation/components/layout/README.md
new file mode 100644
index 00000000..6d437530
--- /dev/null
+++ b/ai-documentation/components/layout/README.md
@@ -0,0 +1,169 @@
+# Layout Components
+
+This section covers PatternFly layout components and page structure patterns for building consistent application layouts.
+
+> **Note:** For up-to-date code examples, this documentation now links directly to the official PatternFly documentation and the PatternFly React GitHub repository. Inline code has been replaced with links to ensure you always see the latest patterns and best practices. **All layout examples should use PatternFly React layout components (e.g., Grid, GridItem, Flex, FlexItem) instead of divs with utility classes.**
+
+## Introduction
+
+PatternFly layout components provide the foundation for structuring application pages and organizing content. These components ensure consistent spacing, responsive behavior, and proper semantic structure across your application.
+
+## Reference Documentation
+
+- [PatternFly Layouts on PatternFly.org](https://www.patternfly.org/layouts)
+- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)
+
+> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.
+
+## Related Files
+
+- [**Page Sections**](./page-sections.md) - PageSection component usage and patterns
+- [**Grid System**](./grid-system.md) - Grid layout and responsive design
+- [**Component Architecture**](../../guidelines/component-architecture.md) - Component structure patterns
+- [**Styling Standards**](../../guidelines/styling-standards.md) - Layout styling guidelines
+
+## Core Layout Components
+
+### PageSection Component
+
+The [`PageSection`](https://www.patternfly.org/components/page/page-section) component is the primary building block for page content structure. It is highly versatile and supports multiple variants, padding options, and responsive configurations.
+
+For detailed examples of all its features, refer to the official documentation.
+
+- [**PageSection Official Docs**](https://www.patternfly.org/components/page/page-section)
+- [**PageSection Code Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/PageSection/examples)
+
+## Common Layout Patterns
+
+This section describes common page layout patterns and links to their official documentation and examples.
+
+### Standard Page Layout
+A standard page layout typically consists of a page title, an optional toolbar for actions, and a main content area.
+
+- [**Page Layout Documentation**](https://www.patternfly.org/layouts/page)
+- [**Page Component Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/Page/examples)
+
+### Dashboard Layout
+A dashboard is used to display a high-level overview of system status and key metrics using a grid of cards and charts.
+
+- [**Dashboard Layout Documentation**](https://www.patternfly.org/layouts/dashboard)
+- [**Grid Layout Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/layouts/Grid/examples)
+
+### Form Layout
+Forms should be presented clearly within a card or a dedicated page section, often in a two-column layout on larger screens to separate the form from supplementary help text.
+
+- [**Form Component Documentation**](https://www.patternfly.org/components/form)
+- [**Form Code Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/Form/examples)
+
+## Grid System Integration
+
+The PatternFly `Grid` and `GridItem` components are used to create flexible, responsive layouts. For detailed examples of basic and responsive grid patterns, refer to the official documentation.
+
+- [**Grid Layout Documentation**](https://www.patternfly.org/layouts/grid)
+- [**Grid Code Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/layouts/Grid/examples)
+
+## Responsive Design Considerations
+
+Use the `Flex` and `FlexItem` components along with breakpoint modifiers to create layouts that adapt to different screen sizes. A mobile-first approach is recommended, where the default layout is for mobile and is enhanced for larger screens.
+
+- [**Flex Layout Documentation**](https://www.patternfly.org/layouts/flex)
+- [**Flex Code Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/layouts/Flex/examples)
+- [**Responsive Utilities Documentation**](https://www.patternfly.org/utilities/responsive)
+
+## Accessibility Considerations
+
+### Semantic Structure
+Always use the correct heading hierarchy (``, ``, ``, etc.) to structure your page content logically. Use the `component` prop on PatternFly components to render the correct HTML element.
+
+### Skip to Content and Back to Top
+For accessible and user-friendly navigation on long pages, PatternFly provides the `SkipToContent` and `BackToTop` components, which are integrated directly into the `Page` component.
+
+- **`SkipToContent`**: Allows keyboard users to bypass navigation and jump directly to the main content area.
+- **`BackToTop`**: Allows all users to quickly return to the top of the page after scrolling.
+
+**Best Practices**:
+- β
Use `SkipToContent` on every page with navigation, linking its `href` to the main content `id`.
+- β
Use `BackToTop` on any page that requires significant scrolling, linking `scrollableSelector` to the main content `id`.
+- β
Assign the `mainContainerId` on the `Page` component to ensure both helpers work correctly.
+
+```jsx
+// β
Correct: Use SkipToContent and BackToTop together
+import { Page, PageSection, SkipToContent, BackToTop } from '@patternfly/react-core';
+
+const AppLayout = () => {
+ const mainContentId = "main-content";
+
+ return (
+ Skip to content}
+ backToTop={
+ {/* ... long content that requires scrolling ... */}
+
+
+ );
+};
+```
+
+**Reference Documentation**:
+- [SkipToContent Component Docs](https://www.patternfly.org/components/skip-to-content)
+- [BackToTop Component Docs](https://www.patternfly.org/components/back-to-top)
+
+### ARIA Landmarks
+Use ARIA landmarks to define regions of a page like `main`, `aside`, `nav`, etc. This can be done by passing the `component` prop to `PageSection`.
+
+- [**ARIA Landmarks in PatternFly**](https://www.patternfly.org/accessibility/aria-landmarks)
+
+## Performance Optimization
+
+### Lazy Loading and Conditional Rendering
+For performance-critical applications, use standard React patterns like lazy loading and conditional rendering to defer loading of non-critical components or sections of the page.
+
+- [**React Docs: Code-Splitting and Lazy Loading**](https://react.dev/reference/react/lazy)
+- [**React Docs: Conditional Rendering**](https://react.dev/learn/conditional-rendering)
+
+## Best Practices
+
+- β
Use PageSection for all major page areas
+- β
Follow consistent page structure patterns
+- β
Implement responsive design from mobile-first
+- β
Use proper semantic HTML structure
+- β
Maintain consistent spacing with PatternFly utilities
+- β
Test layouts across different screen sizes
+- β
Use hasBodyWrapper for standard content padding
+
+- β Skip PageSection for page structure
+- β Mix layout systems inconsistently
+- β Ignore responsive design requirements
+- β Use custom CSS when PatternFly layout classes exist
+- β Create overly complex nested layouts
+- β Forget accessibility considerations
+- β Hardcode spacing values instead of using utilities
+
+## Common Layout Issues
+
+For troubleshooting, see [Common Issues](../../troubleshooting/common-issues.md#layout-issues).
+
+## Valid PatternFly Page Layout (v6+)
+
+A valid PatternFly v6+ application layout is built by composing the `Page`, `Masthead`, `PageSidebar`, and `PageSection` components. The `Page` component acts as the root, and other major elements like the masthead and sidebar are passed in as props.
+
+For a complete, working example of a full application layout, refer to the official PatternFly documentation.
+
+- [**Page Component Documentation & Examples**](https://www.patternfly.org/components/page)
+- [**Page Component Code Examples on GitHub**](https://github.com/patternfly/patternfly-react/tree/main/packages/react-core/src/components/Page/examples)
+
+### Layout Summary Table
+
+| Layout Element | PatternFly Component(s) | Notes |
+|---------------|------------------------|-------|
+| Root | `Page` | Use `masthead`, `sidebar`, `breadcrumb` props |
+| Masthead | `Masthead`, `MastheadMain`, `MastheadBrand`, etc. | Compose for logo, toggles, user menu |
+| Sidebar | `PageSidebar`, `PageSidebarBody`, `Nav` | Use for navigation |
+| Main Content | `PageSection`, `Title`, `Content` | Use for each page/view |
+| Breadcrumbs | `Breadcrumb` | Pass as `breadcrumb` prop to `Page` |
+| Page Header | *No `PageHeader`* | Use `PageSection` + `Title` instead |
+
+> **Note:** `PageHeader` is not a PatternFly component in v6+. Use `PageSection`, `Title`, and layout components instead.
diff --git a/ai-documentation/guidelines/README.md b/ai-documentation/guidelines/README.md
new file mode 100644
index 00000000..a8e9d11d
--- /dev/null
+++ b/ai-documentation/guidelines/README.md
@@ -0,0 +1,83 @@
+# PatternFly Guidelines
+
+Core development rules for AI coders building PatternFly React applications.
+
+## Related Files
+
+- [**Component Rules**](./component-architecture.md) - Component structure requirements
+- [**Styling Rules**](./styling-standards.md) - CSS and styling requirements
+- [**Layout Rules**](../components/layout/README.md) - Page structure requirements
+
+## Essential Rules
+
+### Version Requirements
+
+- β
**ALWAYS use PatternFly v6** - Use `pf-v6-` prefixed classes only
+- β **NEVER use legacy versions** - No `pf-v5-`, `pf-v4-`, or `pf-c-` classes
+- β
**Match component and CSS versions** - Ensure compatibility
+
+### Component Usage Rules
+
+- β
**Use PatternFly components first** - Before creating custom solutions
+- β
**Compose components** - Build complex UIs by combining PatternFly components
+- β **Don't override component internals** - Use provided props and APIs
+
+### Text Components (v6+)
+```jsx
+// β
Correct
+import { Content } from '@patternfly/react-core';
+Title
+
+// β Wrong - Don't use old Text components
+Title
+```
+
+### Icon Usage
+```jsx
+// β
Correct - Wrap with Icon component
+import { Icon } from '@patternfly/react-core';
+import { UserIcon } from '@patternfly/react-icons';
+
+ {user.name}
+
+ {user.email}
+ Edit
+
+
+);
+```
+
+### Component Hierarchy
+Structure your application in a clear hierarchy:
+1. **Page Components**: Top-level page structure.
+2. **Section Components**: Major page sections, often corresponding to a `PageSection`.
+3. **Feature Components**: Components that encapsulate a specific piece of functionality.
+4. **PatternFly Components**: The base building blocks from `@patternfly/react-core`.
+
+### Data Display
+For displaying labeled data or key-value pairs, always use PatternFly's `DescriptionList` components for clarity and accessibility.
+- **See**: [DescriptionList Documentation](https://www.patternfly.org/components/description-list)
+
+## 2. State Management
+
+### Local vs. Shared State
+- **Local State (`useState`)**: Use for component-specific UI state like form inputs or toggles.
+- **Shared State (`useContext`)**: Use for state that needs to be accessed by multiple components in a tree.
+- **Complex State (`useReducer`)**: Use for state with complex update logic.
+
+Keep state as local as possible and only lift it when necessary.
+
+## 3. Common Patterns
+
+For detailed guidance and code examples on common UI patterns, refer to the specific documentation:
+
+- **Selectable Tables**: See [Table Component Rules](../components/data-display/table.md).
+- **Dropdown Actions**: See the [Dropdown Documentation](https://www.patternfly.org/components/menus/dropdown).
+- **Toolbar with Filters**: See the [Toolbar Documentation](https://www.patternfly.org/components/toolbar).
+
+## 4. Error Handling and Data States
+
+Always account for different data states in your components:
+- β
**Loading State**: Show a `Spinner` or `Skeleton` while data is fetching.
+- β
**Error State**: Display a clear error message, often using `EmptyState`.
+- β
**Empty State**: Provide a message when there is no data to display.
+
+```jsx
+// β
Required: Handle all data states
+import { EmptyState, Spinner } from '@patternfly/react-core';
+
+if (isLoading) return .github.io/`.
+
+ ```json
+ {
+ "name": "my-react-app",
+ "homepage": "https://my-username.github.io/my-react-app",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "deploy": "gh-pages -d dist",
+ "preview": "vite preview"
+ },
+ // ... other package.json contents
+ }
+ ```
+
+3. **Deploy**:
+ First, build your application, then run the new `deploy` script.
+ ```bash
+ # 1. Build the app
+ npm run build
+
+ # 2. Deploy to GitHub Pages
+ npm run deploy
+ ```
+ This will create a new `gh-pages` branch in your repository and publish the contents of your `dist` folder to it. After a minute or two, your prototype will be live at the URL you specified in the `homepage` field.
\ No newline at end of file
diff --git a/ai-documentation/guidelines/styling-standards.md b/ai-documentation/guidelines/styling-standards.md
new file mode 100644
index 00000000..20ff15ef
--- /dev/null
+++ b/ai-documentation/guidelines/styling-standards.md
@@ -0,0 +1,221 @@
+# Styling Standards
+
+Essential CSS and styling rules for PatternFly React applications.
+
+## Related Files
+- [**PatternFly Guidelines**](./README.md) - Core development principles
+- [**Component Rules**](./component-architecture.md) - Component structure patterns
+- [**Layout Rules**](../components/layout/README.md) - Page layout styling
+
+## Class Naming Rules
+
+### PatternFly v6 Requirements
+- β
**ALWAYS use `pf-v6-` prefix** - All PatternFly v6 classes
+- β **NEVER use legacy prefixes** - No `pf-v5-`, `pf-v4-`, or `pf-c-`
+
+```css
+/* β
Correct v6 classes */
+.pf-v6-c-button /* Components */
+.pf-v6-u-margin-md /* Utilities */
+.pf-v6-l-grid /* Layouts */
+
+/* β Wrong - Don't use these */
+.pf-v5-c-button
+.pf-c-button
+```
+
+## Utility-First Rules
+
+> **No inline styles:** Use PatternFly layout and spacing utilities instead of `style` props or custom CSS for layout and spacing.
+
+### Use PatternFly Utilities First
+```jsx
+// β
Correct - Use PatternFly utilities
+
+
+// β Wrong - Custom CSS when utilities exist
+
+```
+
+### Common Utility Patterns
+```css
+/* Spacing */
+.pf-v6-u-margin-{xs|sm|md|lg|xl}
+.pf-v6-u-padding-{xs|sm|md|lg|xl}
+.pf-v6-u-margin-top-md
+.pf-v6-u-padding-left-lg
+
+/* Typography */
+.pf-v6-u-text-align-{left|center|right}
+.pf-v6-u-font-weight-{light|normal|bold}
+.pf-v6-u-font-size-{sm|md|lg}
+
+/* Colors */
+.pf-v6-u-color-{primary|secondary|success|warning|danger}
+.pf-v6-u-background-color-primary
+```
+
+## Design Token Rules
+
+### Use Semantic PatternFly Tokens for Custom CSS
+- β
**Use semantic tokens** (e.g., `--pf-v6-global--primary-color--light`) for custom CSS. These tokens do not end in numbers and are intended for application-level styling.
+- β **Don't use base tokens** (which end in numbers, e.g., `--pf-v6-global--Color--100`) for custom CSS. Base tokens are for internal PatternFly use and may change.
+
+```css
+.custom-component {
+ /* β
Correct - Use semantic tokens */
+ color: var(--pf-v6-global--primary-color--light);
+ margin: var(--pf-v6-global--spacer--md);
+
+ /* β Wrong - Hardcoded values or base tokens */
+ /* color: #333333; */
+ /* color: var(--pf-v6-global--Color--100); */
+ /* margin: 16px; */
+}
+```
+
+### Essential Token Categories
+```css
+/* Semantic Colors */
+--pf-v6-global--primary-color--light
+--pf-v6-global--primary-color--dark
+--pf-v6-global--background-color--light
+
+/* Spacing */
+--pf-v6-global--spacer--{xs|sm|md|lg|xl}
+
+/* Typography */
+--pf-v6-global--FontFamily--text
+--pf-v6-global--FontSize--md
+```
+
+## Responsive Design Rules
+
+### Use PatternFly Responsive Utilities
+```css
+/* Mobile-first responsive patterns */
+.pf-v6-u-display-none-on-sm /* Hide on small screens */
+.pf-v6-u-display-block-on-md /* Show on medium+ */
+.pf-v6-u-text-align-center-on-lg /* Center on large+ */
+```
+
+### Grid Layout Patterns
+```jsx
+
+
+ Responsive content
+
+
+```
+
+## Component Styling Rules
+
+> **No emojis or raw icons:** Always use PatternFly's React icon components (from `@patternfly/react-icons`) for all icons, including status, trend, and navigation icons.
+>
+> **No direct HTML headings or paragraphs:** Use PatternFly's `Title` for headings and `Content` with `component="p"` for paragraphs.
+
+### Button Styling
+```jsx
+// β
Use PatternFly variants
+
Primary
+
Secondary
+
+// β
Add utilities for spacing
+
Save
+```
+
+### Form Styling
+```jsx
+
+```
+
+## Performance Rules
+
+### CSS Efficiency
+- β
**Use single utility classes** - More efficient than custom CSS
+- β
**Import only needed CSS** - Tree shake unused styles
+- β **Don't create custom classes** - When PatternFly utilities exist
+
+## Troubleshooting Rules
+
+### Common Issues
+1. **Missing styles** - Ensure PatternFly CSS is imported
+2. **Class conflicts** - PatternFly classes should not be overridden
+3. **Version mismatches** - All PatternFly packages must use same version
+
+### Debug Tools
+- **Browser DevTools** - Inspect applied PatternFly classes
+- **PatternFly DevTools** - Browser extension for debugging
+
+## Utility Class Usage Guidance
+
+> **Caution:** Avoid over-relying on utility classes to style components. Prefer using the component's own props and API for layout and appearance, as these are designed for recommended use cases. Use utility classes only when necessary, and add a comment explaining why the utility class is required. This approach helps ensure your code remains maintainable and aligned with future PatternFly updates.
+
+## Essential Do's and Don'ts
+
+### β
Do's
+- Use PatternFly v6 classes exclusively
+- Prefer component props and API for styling before using utility classes
+- Use utility classes minimally, with comments explaining their necessity
+- Use PatternFly design tokens for custom styles
+- Test responsive behavior on different screen sizes
+- Follow mobile-first responsive patterns
+
+### β Don'ts
+- Over-rely on utility classes to force component appearance
+- Mix PatternFly versions
+- Override PatternFly component internals
+- Use hardcoded values instead of design tokens
+- Create custom CSS when utilities exist
+- Ignore responsive design requirements
+
+## Quick Reference
+- **[PatternFly Utilities](https://www.patternfly.org/utilities)** - Complete utility documentation
+- **[Design Tokens](https://www.patternfly.org/tokens)** - Available design tokens
+- **[Responsive Design](https://www.patternfly.org/layouts)** - Layout and responsive patterns
+
+## Do/Don't Examples
+
+### No Inline Styles
+**Do:**
+```jsx
+// Use PatternFly utility classes
+
Content
+```
+**Don't:**
+```jsx
+// Avoid style props for layout/spacing
+
Content
+```
+
+### No Emojis or Raw Icons
+**Do:**
+```jsx
+import ArrowUpIcon from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
+
+```
+**Don't:**
+```jsx
+
π
+```
+
+### No Direct HTML Headings or Paragraphs
+**Do:**
+```jsx
+import { Title, Content } from '@patternfly/react-core';
+
Dashboard
+
This is a PatternFly app.
+```
+**Don't:**
+```jsx
+
Dashboard
+
This is a PatternFly app.
+```
+
+---
+
+> **Note:** `PageHeader` is not a PatternFly component in v6+. Use `PageSection`, `Title`, and layout components instead.
\ No newline at end of file
diff --git a/ai-documentation/resources/external-links.md b/ai-documentation/resources/external-links.md
new file mode 100644
index 00000000..874262a8
--- /dev/null
+++ b/ai-documentation/resources/external-links.md
@@ -0,0 +1,217 @@
+# External References
+
+This document provides links to official PatternFly documentation, repositories, and helpful external resources for AI coders working with PatternFly React applications.
+
+## Introduction
+
+External resources are essential for staying current with PatternFly updates, finding implementation examples, and troubleshooting issues. This curated list provides direct access to the most important PatternFly resources and community support channels.
+
+## Related Files
+
+- [**Code Examples**](./code-examples.md) - Curated, reusable code snippets.
+- [**PatternFly Guidelines**](../guidelines/README.md) - Core development principles.
+- [**Setup Guide**](../setup/README.md) - Initial project setup resources
+- [**Troubleshooting**](../troubleshooting/common-issues.md) - Problem-solving resources
+
+## Official PatternFly Documentation
+
+### Primary Documentation
+- **[PatternFly.org](https://www.patternfly.org/)** - Main documentation site with component APIs and examples
+- **[PatternFly Design Guidelines](https://www.patternfly.org/get-started/design)** - Design principles and patterns
+- **[PatternFly React Components](https://www.patternfly.org/components)** - Complete component library documentation
+- **[PatternFly Layouts](https://www.patternfly.org/layouts)** - Layout system and grid documentation
+
+### Component-Specific Documentation
+- **[Button Component](https://www.patternfly.org/components/button)** - Button variants and usage
+- **[Table Component](https://www.patternfly.org/components/table)** - Composable table implementation
+- **[Dropdown Component](https://www.patternfly.org/components/menus/dropdown)** - Dropdown and menu patterns
+- **[Toolbar Component](https://www.patternfly.org/components/toolbar)** - Toolbar with filters and actions
+- **[Page Component](https://www.patternfly.org/components/page)** - Page layout and structure
+- **[Icon Component](https://www.patternfly.org/components/icon)** - Icon usage and sizing
+
+### Specialized Features
+- **[PatternFly Charts](https://www.patternfly.org/charts/about)** - Data visualization guidelines
+- **[PatternFly AI - Chatbot](https://www.patternfly.org/patternfly-ai/chatbot/overview)** - AI chatbot components
+- **[Accessibility Guidelines](https://www.patternfly.org/accessibility/accessibility-fundamentals)** - WCAG compliance and best practices
+
+## Official Repositories
+
+### Core Repositories
+- **[PatternFly React](https://github.com/patternfly/patternfly-react)** - Main React component library
+- **[PatternFly Core](https://github.com/patternfly/patternfly)** - HTML/CSS foundation
+- **[PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed)** - Starter template for new projects
+
+### Specialized Packages
+- **[PatternFly Charts Repository](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts)** - Charts package source and examples
+- **[PatternFly Icons](https://github.com/patternfly/patternfly-react/tree/main/packages/react-icons)** - Icon library source
+- **[PatternFly Tokens](https://github.com/patternfly/patternfly-react/tree/main/packages/react-tokens)** - Design tokens package
+
+### Example Applications
+- **[PatternFly Demo App](https://github.com/patternfly/patternfly-react-demo-app)** - Complete demo application
+- **[PatternFly Quickstarts](https://github.com/patternfly/patternfly-quickstarts)** - Interactive tutorials and guides
+
+## Component Examples and Code Snippets
+
+### "View Code" Sections
+Most PatternFly component pages include "View Code" sections that provide working examples:
+- Navigate to any component page on [patternfly.org](https://www.patternfly.org/)
+- Look for the "View Code" button or link
+- Copy and adapt the provided code snippets
+- Use these as starting points for your implementations
+
+### Repository Examples
+Find practical examples in the PatternFly repositories:
+- **Component Examples**: `patternfly-react/packages/react-core/src/components/[ComponentName]/examples/`
+- **Demo Files**: `*.tsx` and `*.jsx` files in component directories
+- **Test Files**: Component test files often contain usage examples
+
+### Useful Repository Paths
+```
+patternfly-react/
+βββ packages/react-core/src/components/
+β βββ Button/examples/
+β βββ Table/examples/
+β βββ Dropdown/examples/
+β βββ [ComponentName]/examples/
+βββ packages/react-table/src/components/
+βββ packages/react-charts/src/components/
+```
+
+## Charts and Visualization Resources
+
+### PatternFly Charts
+- **[Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage guide
+- **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Underlying charting library
+- **[ECharts Documentation](https://echarts.apache.org/)** - Alternative charting library
+
+### Chart Examples
+- **[Chart Component Examples](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts/src/components)** - Source code examples
+- **[PatternFly Chart Demos](https://www.patternfly.org/charts)** - Interactive chart examples
+
+## Chatbot Resources
+
+### PatternFly Chatbot
+- **[Chatbot Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview)** - Main chatbot documentation
+- **[Basic Chatbot Demo](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo/basic-chatbot)** - Simple chatbot implementation
+- **[Embedded Chatbot Demo](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo/embedded-chatbot)** - Embedded chatbot pattern
+- **[Chatbot Demos Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview/demo)** - All chatbot demo variations
+
+### Implementation Resources
+- **Demo Source Code**: Available on each demo page via "View Code" sections
+- **Component API**: Detailed props and usage information
+- **Integration Examples**: How to integrate with existing PatternFly applications
+
+## Community and Support
+
+### GitHub Resources
+- **[Issues](https://github.com/patternfly/patternfly-react/issues)** - Bug reports and feature requests
+- **[Discussions](https://github.com/patternfly/patternfly-react/discussions)** - Community Q&A and discussions
+- **[Pull Requests](https://github.com/patternfly/patternfly-react/pulls)** - Code contributions and reviews
+
+### Communication Channels
+- **[PatternFly Slack](https://patternfly.slack.com/)** - Real-time community support
+- **[PatternFly Forum](https://forum.patternfly.org/)** - Long-form discussions and help
+- **[Stack Overflow](https://stackoverflow.com/questions/tagged/patternfly)** - Technical Q&A with `patternfly` tag
+
+## Development Tools and Extensions
+
+### Browser Extensions
+- **[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/)** - React component debugging
+- **[PatternFly DevTools](https://github.com/patternfly/patternfly-devtools)** - PatternFly-specific debugging tools
+
+### IDE Extensions
+- **[VS Code PatternFly Snippets](https://marketplace.visualstudio.com/search?term=patternfly)** - Code snippets for VS Code
+- **[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)** - React development shortcuts
+
+## Learning Resources
+
+### Tutorials and Guides
+- **[Getting Started Guide](https://www.patternfly.org/get-started/develop)** - Development setup and first steps
+- **[Migration Guides](https://www.patternfly.org/get-started/upgrade)** - Upgrading between PatternFly versions
+- **[Design System Principles](https://www.patternfly.org/get-started/design)** - Understanding PatternFly design philosophy
+
+### Video Resources
+- **[PatternFly YouTube Channel](https://www.youtube.com/c/PatternFly)** - Tutorials and presentations
+- **[Red Hat Developer](https://www.youtube.com/c/RedHatDeveloper)** - Related development content
+
+## Version-Specific Resources
+
+### PatternFly v6 (Current)
+- **[v6 Documentation](https://www.patternfly.org/)** - Current version documentation
+- **[v6 Migration Guide](https://www.patternfly.org/get-started/upgrade)** - Upgrading from v5 to v6
+- **[v6 Release Notes](https://github.com/patternfly/patternfly-react/releases)** - Latest changes and updates
+
+### Legacy Versions
+- **[v5 Documentation](https://v5.patternfly.org/)** - Previous version (for reference only)
+- **[v4 Documentation](https://v4.patternfly.org/)** - Older version (for legacy projects)
+
+## API References
+
+### Node.js and npm
+- **[Node.js Downloads](https://nodejs.org/)** - Official Node.js installation
+- **[npm Documentation](https://docs.npmjs.com/)** - Package manager documentation
+- **[nvm (Node Version Manager)](https://github.com/nvm-sh/nvm)** - Managing multiple Node.js versions
+
+### React Ecosystem
+- **[React Documentation](https://react.dev/)** - Official React documentation
+- **[React Router](https://reactrouter.com/)** - Client-side routing
+- **[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)** - Component testing
+
+## Accessibility Resources
+
+### WCAG Guidelines
+- **[WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)** - Web accessibility standards
+- **[ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)** - ARIA implementation patterns
+- **[WebAIM](https://webaim.org/)** - Accessibility evaluation and guidance
+
+### Testing Tools
+- **[axe DevTools](https://www.deque.com/axe/devtools/)** - Accessibility testing browser extension
+- **[WAVE](https://wave.webaim.org/)** - Web accessibility evaluation tool
+- **[Lighthouse](https://developers.google.com/web/tools/lighthouse)** - Performance and accessibility auditing
+
+## Performance Resources
+
+### Optimization Guides
+- **[React Performance](https://react.dev/learn/render-and-commit)** - React rendering optimization
+- **[Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)** - Bundle size analysis
+- **[Web Vitals](https://web.dev/vitals/)** - Core web performance metrics
+
+### Monitoring Tools
+- **[React DevTools Profiler](https://react.dev/blog/2018/09/10/introducing-the-react-profiler)** - Component performance profiling
+- **[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)** - Browser performance tools
+
+## Best Practices for Using External Resources
+
+### Documentation Strategy
+1. **Start with Official Docs**: Always check [patternfly.org](https://www.patternfly.org/) first
+2. **Use "View Code" Sections**: Copy working examples from component pages
+3. **Check Repository Examples**: Look at `*.tsx`/`*.jsx` files in PatternFly repos
+4. **Provide Context to AI**: Share links and code snippets when asking for help
+
+### Staying Current
+1. **Follow Release Notes**: Monitor [GitHub releases](https://github.com/patternfly/patternfly-react/releases)
+2. **Join Community Channels**: Participate in Slack or forum discussions
+3. **Subscribe to Updates**: Watch PatternFly repositories for notifications
+4. **Regular Documentation Review**: Periodically review component documentation for updates
+
+### Troubleshooting Approach
+1. **Search Issues First**: Check GitHub issues for similar problems
+2. **Consult Multiple Sources**: Cross-reference documentation with examples
+3. **Test Incrementally**: Isolate problems with minimal examples
+4. **Share Specific Context**: Provide version numbers and code snippets when seeking help
+
+## Quick Reference Links
+
+### Most Frequently Used
+- [PatternFly Components](https://www.patternfly.org/components)
+- [PatternFly React Repository](https://github.com/patternfly/patternfly-react)
+- [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed)
+- [Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)
+- [Chatbot Overview](https://www.patternfly.org/patternfly-ai/chatbot/overview)
+
+### Emergency Resources
+- [GitHub Issues](https://github.com/patternfly/patternfly-react/issues)
+- [Stack Overflow PatternFly Tag](https://stackoverflow.com/questions/tagged/patternfly)
+- [PatternFly Slack](https://patternfly.slack.com/)
+
+Remember: **Always consult the official PatternFly documentation for your project's specific package versions.** Providing AI assistants with working code snippets or links to versioned documentation is highly effective for getting accurate implementation guidance.
\ No newline at end of file
diff --git a/ai-documentation/setup/README.md b/ai-documentation/setup/README.md
new file mode 100644
index 00000000..24084b6f
--- /dev/null
+++ b/ai-documentation/setup/README.md
@@ -0,0 +1,81 @@
+# Setup Guide
+
+This section covers the initial setup and configuration for PatternFly React development projects.
+
+## Introduction
+
+The setup process for PatternFly React applications involves several key steps including environment preparation, project initialization, and dependency management. This guide provides comprehensive instructions for AI coders to establish a proper development environment.
+
+## Related Files
+
+- [**Quick Start**](./quick-start.md) - Step-by-step project initialization
+- [**Development Environment**](./development-environment.md) - Environment configuration and tools
+- [**PatternFly Guidelines**](../guidelines/README.md) - Core development principles
+- [**Troubleshooting Setup Issues**](../troubleshooting/common-issues.md#setup-issues) - Common setup problems
+
+## Prerequisites
+
+Before starting any PatternFly React project, ensure the following requirements are met:
+
+### Required Software
+
+#### Node.js & npm
+- **Requirement**: Node.js and npm must be installed and available in PATH
+- **Verification**: Run `node --version && npm --version` to confirm installation
+- **Installation**: Download from [https://nodejs.org/](https://nodejs.org/)
+- **AI Note**: AI can verify these commands and guide installation if needed
+
+#### Optional: Node Version Manager (nvm)
+- **Purpose**: Manage multiple Node.js versions
+- **Usage**: If using nvm, ensure it's loaded and the correct Node version is active
+- **Verification**: Run `nvm use node` to activate the latest version
+- **AI Note**: Check if nvm is being used before proceeding with npm commands
+
+### System Requirements
+
+- **Operating System**: Windows, macOS, or Linux
+- **Memory**: Minimum 4GB RAM (8GB recommended for development)
+- **Storage**: At least 1GB free space for dependencies
+- **Network**: Internet connection for package downloads
+
+## Project Initialization Methods
+
+### Method 1: PatternFly React Seed (Recommended)
+
+The PatternFly React Seed provides a complete scaffolding solution with:
+- Pre-configured layout components
+- Routing setup
+- Build and test tools
+- Development server configuration
+
+**Repository**: [patternfly-react-seed](https://github.com/patternfly/patternfly-react-seed)
+
+### Method 2: Manual Setup
+
+For custom project structures or specific requirements, manual setup allows full control over:
+- Package selection
+- Build configuration
+- Project structure
+- Development workflow
+
+## Next Steps
+
+1. Follow the [Quick Start Guide](./quick-start.md) for immediate project setup
+2. Configure your [Development Environment](./development-environment.md)
+3. Review [PatternFly Guidelines](../guidelines/README.md) for coding standards
+4. Explore [Component Documentation](../components/) for implementation guidance
+
+## Best Practices
+
+- Always verify Node.js and npm versions before starting
+- Use the PatternFly React Seed for new projects unless specific customization is required
+- Keep dependencies up to date with PatternFly releases
+- Follow semantic versioning for project dependencies
+- Document any custom setup steps for team collaboration
+
+## Common Setup Scenarios
+
+- **New Project**: Use PatternFly React Seed
+- **Existing React App**: Add PatternFly dependencies manually
+- **Enterprise Environment**: Consider proxy and security requirements
+- **Team Development**: Ensure consistent Node.js versions across team members
\ No newline at end of file
diff --git a/ai-documentation/setup/development-environment.md b/ai-documentation/setup/development-environment.md
new file mode 100644
index 00000000..9eccccae
--- /dev/null
+++ b/ai-documentation/setup/development-environment.md
@@ -0,0 +1,237 @@
+# Development Environment
+
+This guide covers the configuration of development tools and environment settings for optimal PatternFly React development.
+
+## Introduction
+
+A properly configured development environment enhances productivity and ensures consistent code quality when working with PatternFly React applications. This guide covers IDE setup, debugging tools, and development workflow optimization.
+
+## Related Files
+
+- [**Setup Guide**](./README.md) - Initial project setup
+- [**Quick Start**](./quick-start.md) - Project initialization steps
+- [**Styling Standards**](../guidelines/styling-standards.md) - CSS and styling configuration
+- [**Performance Optimization**](../troubleshooting/performance.md) - Development performance tips
+
+## Development Server Configuration
+
+### Default Configuration
+- **Port**: `9000` (default for PatternFly React Seed)
+- **Hot Reload**: Enabled by default
+- **Source Maps**: Available for debugging
+- **Proxy Settings**: Configurable for API integration
+
+### Server Management
+```bash
+# Start development server
+npm run start:dev
+
+# Start in background (recommended for AI development)
+npm run start:dev &
+
+# Stop server (if running in foreground)
+Ctrl+C
+```
+
+### Environment Variables
+Create a `.env` file in the project root for environment-specific settings:
+```env
+# Development server port
+PORT=9000
+
+# API endpoint configuration
+REACT_APP_API_URL=http://localhost:3001
+
+# Enable/disable specific features
+REACT_APP_DEBUG_MODE=true
+```
+
+## IDE and Editor Configuration
+
+### Recommended Extensions (VS Code)
+- **ES7+ React/Redux/React-Native snippets**: React development shortcuts
+- **Auto Rename Tag**: Automatic HTML/JSX tag renaming
+- **Bracket Pair Colorizer**: Visual bracket matching
+- **GitLens**: Enhanced Git integration
+- **Prettier**: Code formatting
+- **ESLint**: Code linting
+
+### TypeScript Configuration
+If using TypeScript with PatternFly:
+```json
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "es6"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}
+```
+
+## Debugging Configuration
+
+### Browser DevTools Setup
+1. **React Developer Tools**: Install browser extension for React debugging
+2. **PatternFly DevTools**: Use browser inspector to examine PatternFly classes
+3. **Network Tab**: Monitor API calls and resource loading
+4. **Console**: Check for PatternFly-specific warnings or errors
+
+### VS Code Debugging
+Create `.vscode/launch.json` for debugging:
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome",
+ "request": "launch",
+ "type": "pwa-chrome",
+ "url": "http://localhost:9000",
+ "webRoot": "${workspaceFolder}/src",
+ "breakOnLoad": true,
+ "sourceMapPathOverrides": {
+ "webpack:///src/*": "${webRoot}/*"
+ }
+ }
+ ]
+}
+```
+
+## Build and Testing Environment
+
+### Build Scripts
+```bash
+# Development build
+npm run build:dev
+
+# Production build
+npm run build
+
+# Analyze bundle size
+npm run analyze
+```
+
+### Testing Configuration
+```bash
+# Run tests
+npm test
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run tests in watch mode
+npm run test:watch
+```
+
+## Package Management
+
+### Dependency Management
+- **Core Dependencies**: PatternFly React components
+- **Peer Dependencies**: React, React-DOM
+- **Dev Dependencies**: Build tools, testing utilities
+
+### Version Compatibility
+Ensure compatible versions between:
+- React and PatternFly React
+- PatternFly Core CSS and PatternFly React
+- Node.js and npm versions
+
+### Update Strategy
+```bash
+# Check for outdated packages
+npm outdated
+
+# Update PatternFly packages
+npm update @patternfly/react-core @patternfly/react-table
+
+# Verify compatibility after updates
+npm test
+```
+
+## Performance Optimization
+
+### Development Performance
+- **Code Splitting**: Implement lazy loading for large components
+- **Bundle Analysis**: Regular bundle size monitoring
+- **Memory Management**: Monitor for memory leaks during development
+
+### Hot Module Replacement (HMR)
+- Enabled by default in PatternFly React Seed
+- Preserves component state during development
+- Faster development iteration cycles
+
+## Environment-Specific Configuration
+
+### Development Environment
+- Source maps enabled
+- Detailed error messages
+- Hot reloading active
+- Debug mode available
+
+### Production Environment
+- Minified bundles
+- Optimized assets
+- Error boundaries
+- Performance monitoring
+
+## Workflow Integration
+
+### Git Hooks
+Set up pre-commit hooks for code quality:
+```json
+{
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx}": [
+ "eslint --fix",
+ "prettier --write"
+ ]
+ }
+}
+```
+
+### Continuous Integration
+Configure CI/CD for:
+- Automated testing
+- Build verification
+- Dependency security scanning
+- Performance regression testing
+
+## Troubleshooting Development Environment
+
+### Common Issues
+- **Port conflicts**: Change port in package.json or environment variables
+- **Memory issues**: Increase Node.js memory limit
+- **Slow builds**: Optimize webpack configuration
+- **Hot reload failures**: Clear cache and restart development server
+
+### Performance Monitoring
+- Monitor build times
+- Track bundle size changes
+- Profile component rendering
+- Analyze network requests
+
+## Best Practices
+
+1. **Keep dependencies updated** but test thoroughly
+2. **Use environment variables** for configuration
+3. **Enable source maps** for debugging
+4. **Configure linting and formatting** for consistency
+5. **Set up proper debugging tools** for efficient development
+6. **Monitor performance** during development
+7. **Use version control** for environment configuration files
\ No newline at end of file
diff --git a/ai-documentation/setup/quick-start.md b/ai-documentation/setup/quick-start.md
new file mode 100644
index 00000000..a1380410
--- /dev/null
+++ b/ai-documentation/setup/quick-start.md
@@ -0,0 +1,129 @@
+# Quick Start Guide
+
+This guide provides step-by-step instructions to get a PatternFly React application running quickly using the PatternFly React Seed.
+
+## Introduction
+
+The Quick Start process uses the official PatternFly React Seed repository to scaffold a complete application with pre-configured components, routing, and build tools. This is the fastest way to begin PatternFly development.
+
+## Related Files
+
+- [**Setup Guide**](./README.md) - Prerequisites and setup overview
+- [**Development Environment**](./development-environment.md) - Environment configuration
+- [**PatternFly Guidelines**](../guidelines/README.md) - Development best practices
+- [**Common Issues**](../troubleshooting/common-issues.md) - Troubleshooting setup problems
+
+## Step-by-Step Instructions
+
+### Step 1: Clone the Repository
+
+```bash
+git clone https://github.com/patternfly/patternfly-react-seed
+```
+
+**AI Note**: This command can be executed by AI assistants to initialize the project.
+
+### Step 2: Navigate to Project Directory
+
+```bash
+cd patternfly-react-seed
+```
+
+**Important**: All subsequent npm commands must be run from this directory.
+
+### Step 3: Install Dependencies
+
+```bash
+npm install
+```
+
+**AI Note**:
+- AI can run this command after verifying Node.js and npm are properly installed
+- This step downloads all required PatternFly and React dependencies
+- May take several minutes depending on network speed
+
+### Step 4: Start Development Server
+
+```bash
+npm run start:dev
+```
+
+**Important Considerations**:
+- **User Recommendation**: Run this command in a separate terminal to keep it active
+- **Default URL**: Development server typically runs at `http://localhost:9000`
+- **Additional Information**: Check the project's [README.md](../../README.md) for server configuration details
+
+## Verification Steps
+
+After completing the setup:
+
+1. **Check Server Status**: Ensure the development server starts without errors
+2. **Access Application**: Open `http://localhost:9000` in a web browser
+3. **Verify Components**: Confirm PatternFly components are rendering correctly
+4. **Test Hot Reload**: Make a small change to verify live reloading works
+
+## What You Get
+
+The PatternFly React Seed includes:
+
+### Pre-configured Components
+- Page layout structure
+- Navigation components
+- Basic routing setup
+- Example PatternFly components
+
+### Development Tools
+- Webpack configuration
+- Hot module replacement
+- Development server
+- Build scripts
+
+### Testing Setup
+- Jest configuration
+- Testing utilities
+- Example test files
+
+## Next Steps
+
+1. **Explore the Codebase**: Review the generated file structure
+2. **Read Documentation**: Check [PatternFly Guidelines](../guidelines/README.md)
+3. **Start Development**: Begin building your application components
+4. **Configure Environment**: Set up [Development Environment](./development-environment.md) tools
+
+## Common Post-Setup Tasks
+
+### Customizing the Application
+- Update application name and metadata
+- Configure routing for your specific needs
+- Add custom components and pages
+
+### Development Workflow
+- Set up version control (if not already done)
+- Configure IDE/editor for PatternFly development
+- Install additional development tools
+
+### Team Setup
+- Share environment configuration
+- Document custom setup steps
+- Establish coding standards and practices
+
+## Troubleshooting Quick Start
+
+If you encounter issues during setup:
+
+1. **Verify Prerequisites**: Ensure Node.js and npm are properly installed
+2. **Check Network**: Confirm internet connectivity for package downloads
+3. **Clear Cache**: Try `npm cache clean --force` if installation fails
+4. **Port Conflicts**: If port 9000 is in use, check for alternative ports
+5. **Permission Issues**: On Unix systems, avoid using `sudo` with npm
+
+For detailed troubleshooting, see [Common Issues](../troubleshooting/common-issues.md).
+
+## Success Indicators
+
+You've successfully completed the Quick Start when:
+- β
Repository is cloned without errors
+- β
Dependencies install successfully
+- β
Development server starts and runs
+- β
Application loads in browser at `http://localhost:9000`
+- β
PatternFly components are visible and styled correctly
\ No newline at end of file
diff --git a/ai-documentation/troubleshooting/common-issues.md b/ai-documentation/troubleshooting/common-issues.md
new file mode 100644
index 00000000..8cb770b0
--- /dev/null
+++ b/ai-documentation/troubleshooting/common-issues.md
@@ -0,0 +1,566 @@
+# Common Issues
+
+This document covers frequently encountered problems and their solutions when working with PatternFly React applications.
+
+## Introduction
+
+PatternFly development can present various challenges ranging from setup issues to component-specific problems. This guide provides systematic approaches to diagnosing and resolving common issues that AI coders encounter when building PatternFly applications.
+
+## Related Files
+
+- [**Component Issues**](./component-issues.md) - Component-specific troubleshooting
+- [**Performance Optimization**](./performance.md) - Performance-related problems and solutions
+- [**Setup Guide**](../setup/README.md) - Initial setup troubleshooting
+- [**External References**](../resources/external-links.md) - Additional troubleshooting resources
+
+## Setup Issues
+
+### Node.js and npm Problems
+
+#### Issue: Command not found errors
+```bash
+# Error messages
+'node' is not recognized as an internal or external command
+'npm' is not recognized as an internal or external command
+```
+
+**Solutions**:
+1. **Verify Installation**:
+ ```bash
+ # Check if Node.js is installed
+ node --version
+ npm --version
+ ```
+
+2. **Reinstall Node.js**:
+ - Download from [https://nodejs.org/](https://nodejs.org/)
+ - Choose LTS version for stability
+ - Restart terminal after installation
+
+3. **PATH Configuration**:
+ ```bash
+ # Windows: Add to PATH environment variable
+ C:\Program Files\nodejs\
+
+ # macOS/Linux: Add to shell profile
+ export PATH="/usr/local/bin/node:$PATH"
+ ```
+
+#### Issue: npm permission errors
+```bash
+# Error message
+EACCES: permission denied, access '/usr/local/lib/node_modules'
+```
+
+**Solutions**:
+1. **Use nvm (Recommended)**:
+ ```bash
+ # Install nvm
+ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+
+ # Install and use Node.js
+ nvm install node
+ nvm use node
+ ```
+
+2. **Fix npm permissions**:
+ ```bash
+ # Create global directory
+ mkdir ~/.npm-global
+ npm config set prefix '~/.npm-global'
+
+ # Add to PATH
+ export PATH=~/.npm-global/bin:$PATH
+ ```
+
+### Project Setup Issues
+
+#### Issue: Git clone failures
+```bash
+# Error message
+fatal: repository 'https://github.com/patternfly/patternfly-react-seed' not found
+```
+
+**Solutions**:
+1. **Check Network Connection**: Verify internet connectivity
+2. **Use HTTPS instead of SSH**:
+ ```bash
+ git clone https://github.com/patternfly/patternfly-react-seed
+ ```
+3. **Check Repository URL**: Verify the repository exists and URL is correct
+
+#### Issue: npm install failures
+```bash
+# Error messages
+npm ERR! network request failed
+npm ERR! peer dep missing
+```
+
+**Solutions**:
+1. **Clear npm cache**:
+ ```bash
+ npm cache clean --force
+ ```
+
+2. **Delete node_modules and reinstall**:
+ ```bash
+ rm -rf node_modules package-lock.json
+ npm install
+ ```
+
+3. **Check npm registry**:
+ ```bash
+ npm config get registry
+ # Should return: https://registry.npmjs.org/
+ ```
+
+4. **Install with legacy peer deps**:
+ ```bash
+ npm install --legacy-peer-deps
+ ```
+
+### Development Server Issues
+
+#### Issue: Port already in use
+```bash
+# Error message
+Error: listen EADDRINUSE: address already in use :::9000
+```
+
+**Solutions**:
+1. **Find and kill process**:
+ ```bash
+ # Windows
+ netstat -ano | findstr :9000
+ taskkill /PID
/F
+
+ # macOS/Linux
+ lsof -ti:9000 | xargs kill -9
+ ```
+
+2. **Use different port**:
+ ```bash
+ PORT=3001 npm run start:dev
+ ```
+
+3. **Update package.json**:
+ ```json
+ {
+ "scripts": {
+ "start:dev": "webpack serve --port 3001"
+ }
+ }
+ ```
+
+#### Issue: Development server not starting
+```bash
+# Error message
+Module not found: Error: Can't resolve 'webpack-dev-server'
+```
+
+**Solutions**:
+1. **Reinstall dependencies**:
+ ```bash
+ rm -rf node_modules package-lock.json
+ npm install
+ ```
+
+2. **Check webpack configuration**:
+ ```javascript
+ // Verify webpack.config.js exists and is properly configured
+ ```
+
+3. **Install missing dependencies**:
+ ```bash
+ npm install webpack webpack-dev-server --save-dev
+ ```
+
+## Import and Module Issues
+
+### PatternFly Component Import Errors
+
+#### Issue: Module not found errors
+```bash
+# Error message
+Module not found: Can't resolve '@patternfly/react-core'
+```
+
+**Solutions**:
+1. **Install PatternFly packages**:
+ ```bash
+ npm install @patternfly/react-core @patternfly/react-table @patternfly/react-icons
+ ```
+
+2. **Check import syntax**:
+ ```jsx
+ // Correct imports
+ import { Button, Card } from '@patternfly/react-core';
+ import { Table, Thead, Tbody } from '@patternfly/react-table';
+ import { UserIcon } from '@patternfly/react-icons';
+ ```
+
+3. **Verify package.json dependencies**:
+ ```json
+ {
+ "dependencies": {
+ "@patternfly/react-core": "^6.x.x",
+ "@patternfly/react-table": "^6.x.x",
+ "@patternfly/react-icons": "^6.x.x"
+ }
+ }
+ ```
+
+#### Issue: Charts module not found
+```bash
+# Error message
+Module not found: Can't resolve '@patternfly/react-charts/victory'
+```
+
+**Solutions**:
+1. **Install charts dependencies**:
+ ```bash
+ npm install @patternfly/react-charts victory
+ ```
+
+2. **Use correct import paths**:
+ ```jsx
+ // Correct chart imports
+ import { ChartDonut, ChartLine } from '@patternfly/react-charts/victory';
+ ```
+
+3. **Clear cache and reinstall**:
+ ```bash
+ rm -rf node_modules package-lock.json
+ npm install
+ ```
+
+#### Issue: Chatbot module not found
+```bash
+# Error message
+Module not found: Can't resolve '@patternfly/chatbot/dist/dynamic/Chatbot'
+```
+
+**Solutions**:
+1. **Install chatbot package**:
+ ```bash
+ npm install @patternfly/chatbot
+ ```
+
+2. **Import CSS**:
+ ```jsx
+ import '@patternfly/chatbot/dist/css/main.css';
+ ```
+
+3. **Use correct import paths**:
+ ```jsx
+ import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+ ```
+
+## Styling Issues
+
+### CSS and Class Problems
+
+#### Issue: PatternFly styles not applied
+```bash
+# Symptoms: Components appear unstyled or with default browser styles
+```
+
+**Solutions**:
+1. **Import PatternFly CSS**:
+ ```jsx
+ // In your main App.js or index.js
+ import '@patternfly/react-core/dist/styles/base.css';
+ ```
+
+2. **Check CSS import order**:
+ ```jsx
+ // PatternFly CSS should be imported before custom CSS
+ import '@patternfly/react-core/dist/styles/base.css';
+ import './custom-styles.css';
+ ```
+
+3. **Verify webpack CSS handling**:
+ ```javascript
+ // webpack.config.js
+ module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ }
+ ]
+ }
+ };
+ ```
+
+#### Issue: Wrong PatternFly version classes
+```jsx
+// Problem: Using old class names
+ // v4 class
+
// v5 class
+```
+
+**Solutions**:
+1. **Use PatternFly v6 classes**:
+ ```jsx
+ // Correct v6 classes
+
+
+ ```
+
+2. **Update class references**:
+ ```bash
+ # Find and replace old classes
+ grep -r "pf-c-" src/
+ grep -r "pf-v5-" src/
+ ```
+
+3. **Use PatternFly components instead**:
+ ```jsx
+ // Instead of manual classes, use components
+ import { Button } from '@patternfly/react-core';
+
Click me
+ ```
+
+### Layout and Responsive Issues
+
+#### Issue: Components not responsive
+```jsx
+// Problem: Fixed widths and heights
+
+```
+
+**Solutions**:
+1. **Use PatternFly responsive utilities**:
+ ```jsx
+
+ ```
+
+2. **Implement responsive patterns**:
+ ```jsx
+
+ ```
+
+3. **Use container-based sizing**:
+ ```jsx
+ const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+ useEffect(() => {
+ const updateDimensions = () => {
+ if (containerRef.current) {
+ const { width, height } = containerRef.current.getBoundingClientRect();
+ setDimensions({ width, height });
+ }
+ };
+
+ updateDimensions();
+ window.addEventListener('resize', updateDimensions);
+ return () => window.removeEventListener('resize', updateDimensions);
+ }, []);
+ ```
+
+## Component-Specific Issues
+
+### Dropdown Clipping Issues
+
+#### Issue: Dropdown menu gets clipped
+```jsx
+// Problem: Dropdown appears cut off in scrollable containers
+```
+
+**Solutions**:
+1. **Use appendTo prop**:
+ ```jsx
+
document.body,
+ position: 'right',
+ enableFlip: true
+ }}
+ >
+ ```
+
+2. **Configure positioning**:
+ ```jsx
+
+ ```
+
+### Table Performance Issues
+
+#### Issue: Slow rendering with large datasets
+```jsx
+// Problem: Table becomes unresponsive with 1000+ rows
+```
+
+**Solutions**:
+1. **Implement pagination**:
+ ```jsx
+ import { Pagination } from '@patternfly/react-core';
+
+ const [page, setPage] = useState(1);
+ const [perPage, setPerPage] = useState(20);
+ const paginatedData = data.slice((page - 1) * perPage, page * perPage);
+ ```
+
+2. **Use virtualization**:
+ ```jsx
+ import { DndProvider, useDrag, useDrop } from 'react-dnd';
+ import { HTML5Backend } from 'react-dnd-html5-backend';
+ import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+ const DraggableRow = ({ id, text, index, moveRow }) => {
+ // ... existing code ...
+ ```
+
+3. **Optimize re-renders**:
+ ```jsx
+ const MemoizedRow = React.memo(({ item }) => (
+
+ {item.name}
+ {item.email}
+
+ ));
+ ```
+
+## Build and Deployment Issues
+
+### Build Failures
+
+#### Issue: Build process fails
+```bash
+# Error message
+npm ERR! Failed at the build script
+```
+
+**Solutions**:
+1. **Check for TypeScript errors**:
+ ```bash
+ npx tsc --noEmit
+ ```
+
+2. **Verify all imports**:
+ ```bash
+ # Check for unused imports
+ npm run lint
+ ```
+
+3. **Clear build cache**:
+ ```bash
+ rm -rf dist/ build/
+ npm run build
+ ```
+
+#### Issue: Bundle size too large
+```bash
+# Warning: Bundle size exceeds recommended limit
+```
+
+**Solutions**:
+1. **Analyze bundle**:
+ ```bash
+ npm install --save-dev webpack-bundle-analyzer
+ npx webpack-bundle-analyzer dist/
+ ```
+
+2. **Implement code splitting**:
+ ```jsx
+ const LazyComponent = React.lazy(() => import('./HeavyComponent'));
+
+ = () => (
diff --git a/src/app/__snapshots__/app.test.tsx.snap b/src/app/__snapshots__/app.test.tsx.snap
index 91140c70..d61c145b 100644
--- a/src/app/__snapshots__/app.test.tsx.snap
+++ b/src/app/__snapshots__/app.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`App tests should render default App component 1`] = `
@@ -9,7 +9,6 @@ exports[`App tests should render default App component 1`] = `
class="pf-v6-c-skip-to-content"
>
{
test('should render default App component', () => {
@@ -33,7 +34,9 @@ describe('App tests', () => {
it('should expand the sidebar on larger viewports', () => {
render(