agentleFS
Sign inStart free
witi-projectswiti-projects/Skills/dark-mode-testing/SKILL.md

dark-mode-testing

Skill2 starsChanged 6 months agoMITView on GitHub

Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues. Use when the user says "/dark-mode-testing", "dark mode testing", or asks about dark mode testing.

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 1 is distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Verify that dark mode works correctly by toggling themes and comparing.

    line 9
  2. Very specific:

    Media query: Use browser to emulate prefers-color-scheme: dark

    line 33
  3. Very specific:

    Check the browser_snapshot aria tree and screenshots for:

    line 42

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Dark Mode Testing

Verify that dark mode works correctly by toggling themes and comparing.

Workflow

1. Open the App

Navigate to the target page using browser_navigate.

2. Screenshot Light Mode

Take a screenshot of the page in its default (light) state using browser_take_screenshot.

3. Toggle Dark Mode

Toggle dark mode using one of these methods (try in order):

  1. Class toggle: Execute JS to add dark class to <html>:
    document.documentElement.classList.toggle('dark')
  2. Attribute toggle: Set data-theme="dark":
    document.documentElement.setAttribute('data-theme', 'dark')
  3. Media query: Use browser to emulate prefers-color-scheme: dark
  4. UI toggle: Find the theme toggle button in browser_snapshot and click it

4. Screenshot Dark Mode

Take another screenshot after toggling.

5. Inspect for Issues

Check the browser_snapshot aria tree and screenshots for:

  • White flashes: Elements with hardcoded bg-white instead of bg-white dark:bg-slate-900
  • Invisible text: Text color that matches the dark background (e.g. black text on dark bg)
  • Missing borders: Borders using light-only colors that disappear on dark backgrounds
  • Contrast violations: Text that's too low-contrast against the dark background (need 4.5:1)
  • Hardcoded colors: Any #ffffff, #000000, white, black in inline styles
  • Images: Logos or icons that don't have dark mode variants
  • Shadows: Box shadows that are invisible on dark backgrounds
  • Form inputs: Input fields that keep white backgrounds in dark mode

6. Report

Dark 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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free