with one click
with one click
[HINT] Download the complete skill directory including SKILL.md and all related files
| 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.
Ask the user if they want a custom banner message. Default: "This application is a design prototype"
Copy the template files from this skill's scripts/ directory to the user's project:
scripts/prototype.css from this skill directorysrc/prototype.css in the user's projectscripts/ProtoTypeBanner.tsx from this skill directorysrc/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.
Find the React entry point file using bash commands:
src/index.tsx, src/index.jsx, index.tsx, index.jsxfind or check with test -f if neededRead the entry point file
Determine the correct import path based on file location:
src/: use ./prototype.css./src/prototype.cssCheck if prototype CSS import already exists
Find the main App component file:
src/App.tsx, src/App.jsx, App.tsx, App.jsxfind command if neededRead the App component file
Determine the correct import path based on file location:
src/: use ./components/ProtoTypeBanner./src/components/ProtoTypeBannerCheck if ProtoTypeBanner import already exists
Check if <ProtoTypeBanner already exists in the JSX
<ProtoTypeBanner /> or <ProtoTypeBanner message="custom message" /> at the start of the return statementConfirm with the user:
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.
prototype-grayscale class is on the <html> element (toggled via Switch in ProtoTypeBanner)isSticky prop and includes a Switch to toggle grayscale mode