pf-prototype-mode
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.
Best use case
pf-prototype-mode is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using pf-prototype-mode should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pf-prototype-mode/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pf-prototype-mode Compares
| Feature / Agent | pf-prototype-mode | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
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 mode
Related Skills
pf-design-mode
Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.
pf-unit-test-generator
Generate a unit test file for a React component using Testing Library. Use when adding test coverage to new or existing components.
pf-project-scaffolder
Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.
pf-import-checker
Audit and fix invalid PatternFly import paths across packages. Use when imports fail, modules are unresolved, or after upgrading PatternFly versions.
pf-component-structure
Audit PatternFly React component nesting, wrapper hierarchies, and layout structure. Use when scanning for hierarchy violations or debugging spacing caused by missing wrapper components.
write-example-description
Write and refine example descriptions for PatternFly.org component and demo pages. Use when authoring or updating the prose in PatternFly example markdown files.
summarize-jira-issues
Summarize your current sprint workload from Jira — assigned issues, contributor roles, and priorities. Use when checking what's left in the sprint or deciding what to work on next.
semantic-release-troubleshooting
Diagnose and fix semantic-release issues when a specific version is not being released. Use when semantic-release skips a version, fails to release, or when troubleshooting after git push --force, squashed commits, permission errors, or reference already exists.
quarterly-initiative-report
Generate quarterly Jira status reports with RAG assessment, blocker tracking, and next-quarter recommendations. Use when preparing quarterly initiative reviews or tracking epic progress.
pf-tokens
Build CSS design tokens for PatternFly core and copy them to the PatternFly repository. Use when regenerating tokens after design changes or during release preparation.
pf-org-version-update
Update patternfly-org for a new PatternFly release — resolve versions, update package.json and versions.json, and provide build steps. Use when cutting a PF release or release candidate.
pf-create-issue
Create well-structured GitHub issues for PatternFly repositories with templates, follow-up tracking, and duplicate detection. Use when filing bugs, feature requests, or cross-repo follow-ups.