Enable prototype mode for React apps with grayscale styling and a banner overlay. Use when demoing early concepts, presenting wireframes, or preventing stakeholders from fixating on visual polish.
Scanned 9/5/2026
Install to Claude Code
Skills Directorynpx -y skills add rh-uxd/ai-helpers --skill pf-prototype-mode --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Pf Prototype Mode?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/rh-uxd-pf-prototype-mode)More formats (shields.io, HTML) on the badges page.
---
name: pf-prototype-mode
description: Enable prototype mode for React apps with grayscale styling and a banner overlay. Use when demoing early concepts, presenting wireframes, or preventing stakeholders from fixating on visual polish.
---
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:
1. **Read** `scripts/prototype.css` from this skill directory
2. **Write** to `src/prototype.css` in the user's project
3. **Read** `scripts/ProtoTypeBanner.tsx` from this skill directory
4. **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
1. **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
2. **Read** the entry point file
3. **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`
4. **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
1. **Find** the main App component file:
- Try: `src/App.tsx`, `src/App.jsx`, `App.tsx`, `App.jsx`
- Use `find` command if needed
2. **Read** the App component file
3. **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`
4. **Check** if ProtoTypeBanner import already exists
- If not: **Edit** to add the import (with correct path) after existing imports
5. **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 modeIs this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
