Menu
Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
When the same multi-step workflow repeats in Cursor (user corrections or agent redos), capture it as a new SKILL.md under .cursor/skills/ so future sessions load it automatically.
After navigating and interacting in Cursor's built-in browser, use browser_network_requests to audit every fetch/XHR for failures, slowness, duplicate calls, and suspicious payloads. Use for API-heavy pages and after backend or client networking changes.
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel. Use for multi-job CI failures where jobs are independent.
Run four parallel read-only subagents that each review the same diff from a different lens — security, performance, correctness, and readability — then merge findings into one report. Use before merging large or risky PRs.
Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree.
| name | dark-mode-testing |
| description | Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues. |
| user-invocable | true |
Verify that dark mode works correctly by toggling themes and comparing.
Navigate to the target page using browser_navigate.
Take a screenshot of the page in its default (light) state using browser_take_screenshot.
Toggle dark mode using one of these methods (try in order):
dark class to <html>:
document.documentElement.classList.toggle('dark')
data-theme="dark":
document.documentElement.setAttribute('data-theme', 'dark')
prefers-color-scheme: darkbrowser_snapshot and click itTake another screenshot after toggling.
Check the browser_snapshot aria tree and screenshots for:
bg-white instead of bg-white dark:bg-slate-900#ffffff, #000000, white, black in inline stylesDark Mode Test:
Light mode: OK
Dark mode issues found:
- Header logo: white logo invisible on dark bg (needs dark variant)
- Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700
- Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100
Fix each issue and re-test.