name	pf-prototype-mode
description	Enable prototype mode for React apps (grayscale + banner)

Enables prototype mode by adding a grayscale filter and prototype banner to a React application.

Step 1: Ask for Custom Message (Optional)

Ask the user if they want a custom banner message. Default: "This application is a design prototype"

Step 2: Copy Template Files

Copy the template files from this skill's scripts/ directory to the user's project:

Read scripts/prototype.css from this skill directory
Write to src/prototype.css in the user's project
Read scripts/ProtoTypeBanner.tsx from this skill directory
Write to src/components/ProtoTypeBanner.tsx in the user's project (create src/components/ if needed)

If a custom message was provided, replace the default message in ProtoTypeBanner.tsx before writing it.

Step 3: Find and Update Entry Point

Find the React entry point file using bash commands:
- Try: src/index.tsx, src/index.jsx, index.tsx, index.jsx
- Use find or check with test -f if needed
Read the entry point file
Determine the correct import path based on file location:
- If file is under src/: use ./prototype.css
- If file is at root level: use ./src/prototype.css
Check if prototype CSS import already exists
- If it exists: skip this step
- If not: Edit to add the import (with correct path) after existing imports

Step 4: Find and Update App Component

Find the main App component file:
- Try: src/App.tsx, src/App.jsx, App.tsx, App.jsx
- Use find command if needed
Read the App component file
Determine the correct import path based on file location:
- If file is under src/: use ./components/ProtoTypeBanner
- If file is at root level: use ./src/components/ProtoTypeBanner
Check if ProtoTypeBanner import already exists
- If not: Edit to add the import (with correct path) after existing imports
Check if <ProtoTypeBanner already exists in the JSX
- If not: Edit to insert <ProtoTypeBanner /> or <ProtoTypeBanner message="custom message" /> at the start of the return statement

Step 5: Verify Changes

Confirm with the user:

✅ prototype.css copied to src/
✅ ProtoTypeBanner.tsx copied to src/components/
✅ CSS import added to entry point
✅ ProtoTypeBanner component added to App

Tell the user that prototype mode is enabled. The banner includes a "Grayscale Mode" toggle switch to turn the grayscale filter on/off for prototyping.

Notes

Always use Read tool before Edit tool
Use Edit tool (not Write) for modifying existing files
Check for existing imports/components to avoid duplicates
The grayscale filter applies when the prototype-grayscale class is on the <html> element (toggled via Switch in ProtoTypeBanner)
The ProtoTypeBanner uses PatternFly's Banner component with isSticky prop and includes a Switch to toggle grayscale mode

name	pf-prototype-mode
description	Enable prototype mode for React apps (grayscale + banner)

Enables prototype mode by adding a grayscale filter and prototype banner to a React application.

Step 1: Ask for Custom Message (Optional)

Ask the user if they want a custom banner message. Default: "This application is a design prototype"

Step 2: Copy Template Files

Copy the template files from this skill's scripts/ directory to the user's project:

Read scripts/prototype.css from this skill directory
Write to src/prototype.css in the user's project
Read scripts/ProtoTypeBanner.tsx from this skill directory
Write to src/components/ProtoTypeBanner.tsx in the user's project (create src/components/ if needed)

If a custom message was provided, replace the default message in ProtoTypeBanner.tsx before writing it.

Step 3: Find and Update Entry Point

Find the React entry point file using bash commands:
- Try: src/index.tsx, src/index.jsx, index.tsx, index.jsx
- Use find or check with test -f if needed
Read the entry point file
Determine the correct import path based on file location:
- If file is under src/: use ./prototype.css
- If file is at root level: use ./src/prototype.css
Check if prototype CSS import already exists
- If it exists: skip this step
- If not: Edit to add the import (with correct path) after existing imports

Step 4: Find and Update App Component

Find the main App component file:
- Try: src/App.tsx, src/App.jsx, App.tsx, App.jsx
- Use find command if needed
Read the App component file
Determine the correct import path based on file location:
- If file is under src/: use ./components/ProtoTypeBanner
- If file is at root level: use ./src/components/ProtoTypeBanner
Check if ProtoTypeBanner import already exists
- If not: Edit to add the import (with correct path) after existing imports
Check if <ProtoTypeBanner already exists in the JSX
- If not: Edit to insert <ProtoTypeBanner /> or <ProtoTypeBanner message="custom message" /> at the start of the return statement

Step 5: Verify Changes

Confirm with the user:

✅ prototype.css copied to src/
✅ ProtoTypeBanner.tsx copied to src/components/
✅ CSS import added to entry point
✅ ProtoTypeBanner component added to App

Tell the user that prototype mode is enabled. The banner includes a "Grayscale Mode" toggle switch to turn the grayscale filter on/off for prototyping.

Notes

Always use Read tool before Edit tool
Use Edit tool (not Write) for modifying existing files
Check for existing imports/components to avoid duplicates
The grayscale filter applies when the prototype-grayscale class is on the <html> element (toggled via Switch in ProtoTypeBanner)
The ProtoTypeBanner uses PatternFly's Banner component with isSticky prop and includes a Switch to toggle grayscale mode

pf-prototype-mode

Step 1: Ask for Custom Message (Optional)

Step 2: Copy Template Files

Step 3: Find and Update Entry Point

Step 4: Find and Update App Component

Step 5: Verify Changes

Notes

Step 1: Ask for Custom Message (Optional)

Step 2: Copy Template Files

Step 3: Find and Update Entry Point

Step 4: Find and Update App Component

Step 5: Verify Changes

Notes