Skip to content

Dither Laser Dark Mode

Gives the agent a dark, premium UI style with subtle dither texture and a thin accent-colored laser glow.

Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent builds interfaces following a specific dark visual style: near-black backgrounds, faint dot-pattern grain, and a thin glowing light beam used as a focal accent. It also sets guidance for panels, navigation bars, cards, and spacing so the whole interface feels consistent with that look. The instructions are design guidance written as text; the skill itself does not draw or generate anything on its own.

Great for

  • Designers or developers who want a dark, atmospheric, technical-looking landing page or dashboard
  • Teams exploring a premium dark design direction with a restrained laser motif
  • People who want a consistent design-system starting point the agent can apply to front-end code

Skip it if

  • Projects with a light-mode or brand style that must match existing guidelines, since the skill pushes a specific look that may clash
  • Readability-critical or accessibility-sensitive screens if the texture and glow are over-applied, as the skill itself warns about legibility

Try asking

  • “Build a dark landing page hero with a thin accent-colored laser beam behind the headline”
  • “Design a dark dashboard with framed containers, corner markers, and subtle dither texture in the background”
  • “Create a floating dark navigation bar with backdrop blur and thin gradient borders”
Step-by-step guide: how to use Dither Laser Dark ModeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    dither-laser-dark-mode.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dither-laser-dark-mode.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dither-laser-dark-mode.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your brand's accent color in the request so the laser and glow are tinted with it rather than a default blue or cyan
  • Ask for the effect to be limited to the hero or focal area if the page needs to stay readable
  • Review the output for contrast and text legibility, since the skill's texture and glow can reduce readability if overused

What's inside

  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.