diff --git a/packages/documentation-site/patternfly-docs/content/AI/ai-development-tools/ai-development-tools.md b/packages/documentation-site/patternfly-docs/content/AI/ai-development-tools/ai-development-tools.md new file mode 100644 index 0000000000..78628473a5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/ai-development-tools/ai-development-tools.md @@ -0,0 +1,59 @@ +--- +id: AI development tools +section: AI +sortValue: 3 +--- + +The [PatternFly AI helpers](https://github.com/patternfly/ai-helpers) marketplace is an open source collection of plugins for AI coding tools like [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [Cursor](https://www.cursor.com/). These plugins provide development knowledge and skills tailored to PatternFly workflows, so your AI tools generate more accurate, best-practice code out of the box. + +Whether you're building PatternFly UIs, prototyping in code, or evaluating AI tooling for your team, AI helpers can help. + +With AI helpers installed, you can expect: + +- More consistent use of PatternFly components and patterns. +- Faster prototyping and development cycles. +- Fewer common implementation mistakes. +- Built-in awareness of PatternFly coding standards, accessibility, and design tokens. + +## What's available + +The marketplace is organized into plugins, each focused on a different area of PatternFly development. Here's what's currently available at a high level: + +| Plugin | What it helps you do | +| :--- | :--- | +| **React** | Build and test React components following PatternFly coding standards and component structure best practices. | +| **Design foundations** | Work with design tokens, icons, colors, and spacing. Audit and validate token usage. | +| **Accessibility** | Audit and document accessibility across your project. | +| **Figma** | Review Figma design changes and generate code update checklists. | +| **Issue management** | Create, triage, and track issues across PatternFly repositories. Primarily for PatternFly maintainers. | +| **Repo management** | Manage releases, analyze dependencies, and maintain repository health. Primarily for PatternFly maintainers. | + +Plugins are actively maintained and evolving. For the full, always-current list of every skill and agent available, see the [plugin catalog](https://github.com/patternfly/ai-helpers/blob/main/PLUGINS.md). + +## Getting started + +### Claude Code + +```bash +# Add the marketplace +/plugin marketplace add patternfly/ai-helpers + +# Install the plugins you need +/plugin install react@ai-helpers +``` + +After installation, the plugin's skills and knowledge are available in any project. + +### Cursor + +Cursor can discover plugins from `.cursor-plugin/` directories. If you also have Claude Code installed, Cursor may pick up installed plugins automatically via its third-party plugin settings. See the [AI helpers README](https://github.com/patternfly/ai-helpers#cursor) for details. + +### PatternFly MCP server (recommended) + +For the best experience, also set up the [PatternFly MCP server](https://github.com/patternfly/patternfly-mcp), which gives AI tools direct access to PatternFly component documentation, prop schemas, and design guidelines. Plugins work without it, but provide stronger results when it's available. + +## Contributing + +The AI helpers marketplace is open source and welcomes contributions from the community. Whether you want to add a new skill to an existing plugin, create an entirely new plugin, or improve the documentation that AI tools rely on, there's a place for your contribution. + +To get started, check out the [contributing guide](https://github.com/patternfly/ai-helpers/blob/main/CONTRIBUTING.md) and the [step-by-step skill creation guide](https://github.com/patternfly/ai-helpers/blob/main/CONTRIBUTING-SKILLS.md). diff --git a/packages/documentation-site/patternfly-docs/content/AI/ai.md b/packages/documentation-site/patternfly-docs/content/AI/ai.md index d60f9e5bfd..9194650c87 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/ai.md +++ b/packages/documentation-site/patternfly-docs/content/AI/ai.md @@ -3,19 +3,20 @@ id: Overview title: AI overview section: AI sortValue: 1 ---- +--- import { Alert, AlertActionLink, Accordion, AccordionItem, AccordionContent, AccordionToggle, Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox, Divider, DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, Grid, GridItem} from '@patternfly/react-core'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; -When used thoughtfully, **AI** can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. Regardless of the AI resources or workflows you use, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practices on this page. +When used thoughtfully, **AI** can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. Regardless of the AI resources or workflows you use, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practices on this page. ## PatternFly AI resources The following guides are intended to help you integrate AI into your workflows as you design and develop products with: -- **[Design language](/ai/design-language):** The foundational design decisions that guide the use of AI features in products. +- **[Design language](/ai/design-language):** The foundational design decisions that guide the use of AI features in products. - **[Rapid prototyping](/ai/rapid-prototyping):** Guidance for generating and iterating AI features during early stages of design. +- **[AI development tools](/ai/ai-development-tools):** Tools and plugins that help AI coding assistants generate more accurate, PatternFly-compliant code. - **[AI-assisted code migration](/ai/ai-assisted-code-migration):** Guidance for using AI to speed up and simplify codebase migrations. - **[Conversational design principles](/ai/conversation-design):** Guidance for designing effective and human-centered AI conversations. - **[Generative UIs](/ai/generative-uis/overview):** Proof-of-concept resources for creating UIs that can utilize AI to dynamically generate elements as needed. @@ -32,7 +33,7 @@ When using PatternFly to design Red Hat products, you *must* adhere to AI-relate - Gain approval before using AI technology for business related to Red Hat. - Gain approval before using certain information as input for AI technology. - Review, test, and validate generative AI model output. -- Always consider data privacy when entering company or personal information into AI resources, and ensure compliance with all company data protection policies and rules around AI usage. +- Always consider data privacy when entering company or personal information into AI resources, and ensure compliance with all company data protection policies and rules around AI usage.