القائمة
Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse.
Add PostHog analytics to a web application, including event tracking, page views, feature flags, and session replay.
Generate OpenAPI/Swagger documentation for an API, including endpoint schemas, request/response types, and interactive docs UI.
Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.
Dockerize an application with a production-ready Dockerfile, docker-compose setup, and .dockerignore.
Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.
| 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.