### CLI help documentation example

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md

Structure help output with a description, usage, examples, and flags for clarity.

```bash
Usage:
  tool deploy <project_name> [flags]

Description:
  Deploys the specified project to your active environment.

Examples:
  tool deploy my-app --env staging

Flags:
  -e, --env string        Environment to deploy to
  -f, --force             Force deployment even if conflicts exist
  -h, --help              Show help for the deploy command

For more information, visit: https://Examples:.com/docs/deploy
```

--------------------------------

### Start documentation development server

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-framework/README.md

Run the command to start the local development server for creating and viewing documentation.

```bash
npx pf-docs-framework start
```

--------------------------------

### Install documentation framework

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-framework/README.md

Install the documentation framework as a dev dependency using npm or yarn.

```bash
npm i --save-dev @patternfly/documentation-framework
```

```bash
yarn add -D @patternfly/documentation-framework
```

--------------------------------

### Install required PatternFly dependencies

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-framework/README.md

Install necessary PatternFly packages as dev dependencies for using component examples.

```bash
yarn add -D @patternfly/patternfly @patternfly/react-core @patternfly/react-table @patternfly/react-code-editor
```

--------------------------------

### Initialize documentation project

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-framework/README.md

Scaffold a sample extension documentation setup using the pf-docs-framework CLI.

```bash
npx pf-docs-framework init --name "My extension"
```

```bash
npx pf-docs-framework init --name "My extension" --scripts
```

--------------------------------

### Install PatternFly CLI (macOS/Linux)

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/patternfly-cli.md

Installs the PatternFly CLI globally using a curl script. This script handles Node.js, Corepack, and GitHub CLI installations if they are missing.

```sh
curl -fsSL https://raw.githubusercontent.com/patternfly/patternfly-cli/main/scripts/install.sh | bash
```

--------------------------------

### Interactive Prompt Example

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md

This example demonstrates an interactive prompt flow for configuring a project, including prompts for project name, language, and Docker usage, followed by a success confirmation.

```plaintext
Welcome! Let's configure your project.

Project name: my-app
Language (js, py, go) [py]: 
Use Docker? (y/N): y

✅ Project "my-app" configured successfully.
```

--------------------------------

### Start Local Development Server with Yarn

Source: https://github.com/patternfly/patternfly-org/blob/main/README.md

Starts a local development server at http://localhost:8003 for live reloading.

```bash
yarn start
```

--------------------------------

### CLI success message example

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md

Reinforce successful actions and guide users to next steps with clear success messages.

```plaintext
✅ Project "my-app" deployed successfully.

Next steps:
- Run `tool status my-app` to check deployment health
- Run `tool logs my-app` to view runtime output
```

--------------------------------

### Install PatternFly CLI (Windows)

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/patternfly-cli.md

Installs the PatternFly CLI globally using npm after prerequisites are met. Use your package manager's equivalent if not using npm.

```sh
npm install -g @patternfly/patternfly-cli
```

--------------------------------

### CLI pagination examples

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md

Demonstrate commands for paginating long lists, prompting users to continue to the next page.

```bash
tool versions list --limit 5
tool resources list --page 2
```

--------------------------------

### Animated UI Example

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/Animations.md

This code snippet showcases an interactive tour that guides users through a UI featuring animated alerts, icons, and expansion effects.

```typescript
import { Fragment, useRef, useState, useEffect, useCallback } from 'react';

import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import PowerOffIcon from '@patternfly/react-icons/dist/esm/icons/power-off-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { ArrowRightIcon, LockIcon, PortIcon, CubeIcon, AutomationIcon, ExclamationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, HamburgerIcon, TimesIcon} from '@patternfly/react-icons';
import UnpluggedIcon from '@patternfly/react-icons/dist/esm/icons/unplugged-icon';
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
import {applicationsData} from './examples/ResourceTableData.jsx';
import SkeletonTable from "@patternfly/react-component-groups/dist/dynamic/SkeletonTable";
import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
import { AnimationsOverview } from './AnimationsOverview';
import { AnimationsNotificationsDrawer } from './AnimationsNotificationsDrawer';
import { AnimationsHeaderToolbar } from './AnimationsHeaderToolbar';
import { AnimationsStartTourModal } from './AnimationsStartTourModal';
import { AnimationsEndTourModal } from './AnimationsEndTourModal';
import { AnimationsCreateDatabaseForm } from './AnimationsCreateDatabaseForm';
import { GuidedTourProvider, useGuidedTour } from './GuidedTourContext';
import BoltIcon from '@patternfly/react-icons/dist/esm/icons/bolt-icon';
import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
import openshiftLogo from './Summit-collage-deploying-openshift-product-icon-RH.png'
import emptyStateLogo from './Summit-collage-hybrid-cloud-dark-RH.png'


## Demo
Our components can now use motion to provide clear visual feedback to users, improving engagement and usability. To see our new animations in motion, take this interactive tour, which guides you through a UI that includes animated alerts, icons, expansion, and more.

### Animated UI

```js file="./examples/Animations.tsx" isFullscreen
```
```

--------------------------------

### Install PatternFly HTML/CSS

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/get-started/develop.md

Install the PatternFly HTML/CSS library using npm. This command adds the library to your project's dependencies.

```sh
npm install @patternfly/patternfly --save
```

--------------------------------

### Install NPM Dependencies with Yarn

Source: https://github.com/patternfly/patternfly-org/blob/main/README.md

Run this command to install all necessary NPM dependencies for local development.

```bash
yarn install
```

--------------------------------

### Install PatternFly React Icons

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/get-started/develop.md

Install the @patternfly/react-icons package to use icons in your HTML/CSS implementations.

```sh
npm install @patternfly/react-icons --save
```

--------------------------------

### CLI version listing example

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md

Display version information in a structured format, clearly marking the default and available upgrades.

```plaintext
Available Versions
-
VERSION     DEFAULT    AVAILABLE UPGRADES
1.4.3         Yes       1.4.4, 1.4.5, 1.5.0
1.3.9                   1.4.0, 1.4.1
1.3.8                   1.3.9
```

--------------------------------

### API Resource Capitalization Examples

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/grammar/capitalization.md

Illustrates the difference between general sentence case and exact API casing for technical references.

```text
API resource | Sentence case (general) | Exact API casing (technical)
VirtualMachine | "You can migrate your existing virtual machines from VMware directly into OpenShift." | "The `VirtualMachine` must be in a Stopped state before you can change the CPU limits."
instanceType | "You can choose an optimized instance type to improve the performance of your database workloads." | "The controller will return a validation error if the `instanceType` is not supported by the underlying cloud provider's region."
```

--------------------------------

### Install PatternFly React Core with Yarn

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/get-started/develop.md

Use this command to add the core PatternFly React components to an existing project using Yarn.

```sh
yarn add @patternfly/react-core
```

--------------------------------

### Build documentation for production

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-framework/README.md

Build all documentation assets and output them to a specified directory, typically for deployment.

```bash
npx pf-docs-framework build all --output public
```

--------------------------------

### CSS Token Examples

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md

Examples of CSS design tokens for disabled states and spacing.

```css
var(--pf-t--global--background--color--disabled--default)
```

```css
var(--pf-t--global--text--color--on-disabled)
```

```css
var(--pf-t--global--spacer--sm)
```

--------------------------------

### Verify PatternFly CLI Version

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/patternfly-cli.md

Checks the installed version of the PatternFly CLI. This is a common first step after installation.

```sh
patternfly-cli --version
```

--------------------------------

### Typical PatternFly Project Workflow

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/patternfly-cli.md

Demonstrates a common sequence of commands for creating, initializing, saving, and deploying a new PatternFly project.

```sh
patternfly-cli create my-app   # create a new project from a template
cd my-app
patternfly-cli init            # set up Git and connect to GitHub
patternfly-cli save            # commit and push your changes
patternfly-cli deploy          # publish to GitHub Pages
```

--------------------------------

### Install PatternFly React Core with npm

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/get-started/develop.md

Use this command to add the core PatternFly React components to an existing project using npm.

```sh
npm install @patternfly/react-core --save
```

--------------------------------

### Install Specific Plugin in Claude Code

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/marketplace/marketplace.md

Install a specific plugin, such as the 'react' plugin from the AI Helpers, within Claude Code. This command follows the marketplace addition.

```bash
/plugin install react@ai-helpers
```

--------------------------------

### Voice and tone prompt example for LLM configuration

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md

Use this description to configure an LLM or assess its responses, ensuring it adopts a helpful, peer-like, and empowering tone.

```text
Be a helpful colleague. Get straight to the point but engage the user like a peer. Ask clarifying questions if you need more information to give a precise answer. Give concrete advice, not vague platitudes. Empower the user—position Red Hat's technology as an enabler for their success, not a replacement for their expertise.
```

--------------------------------

### Example color palette usage

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md

Illustrates a potential chart color palette using hues from blue, teal, green, and yellow color families. This example shows how base colors and their lighter/darker variants are selected.

```html
<div class="ws-docs-content-img">
![Chart color palette for a bar chart that uses hues across 4 color families.](./img/example-palette.svg)
</div>
```

--------------------------------

### CLI command examples

Source: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-guidelines.md

Commands should consistently use a verb-noun structure to identify the action and the affected resource, mirroring common CLI patterns.

```bash
tool create project
tool delete environment
tool scale deployment
```