Guide · Agent skill
How to use the Dither Background agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The dither-background skill is a set of instructions that teaches an AI agent to build a near-black, animated background for a web page. The background is drawn on an HTML canvas with large square pixels and visible 4x4 Bayer-style ordered dithering, forming slow gray-white waves or cloud-like masses. This guide explains what the skill does, how to install it, how to ask for it, and what to check before using the result.
Dither BackgroundMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it so you have the dither-background folder with SKILL.md.
- 2Place or upload the skill. Copy the folder to ~/.claude/skills/ or a project's .claude/skills/, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Make a web page project ready. Have a web page project where the code can be added, since the skill needs a browser with HTML5 canvas and JavaScript support.
- 4Ask with the skill name. Request the background by naming the skill, for example: Use $dither-background to add a dark dither background behind my hero section.
- 5Review the output. Open the page and check that the square Bayer pattern is visible, the palette is monochrome, and your text is readable.
- 6Tune the look. Adjust cell size, palette, drift speed, or vignette strength by asking the agent for changes to the listed knobs.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions and optional files that an AI agent can load when a task matches the skill's description. This skill is described in its SKILL.md file and is triggered when a page needs an atmospheric near-black dither field behind framed UI, hero content, or data overlays.
When it is active, the agent writes HTML, CSS, and JavaScript for a fixed full-viewport canvas placed behind your page content. The skill supplies the recipe: a Bayer threshold table, a value-noise and fractal-noise field, a palette from near-black to near-white, a resize handler, and a reduced-motion check. It also gives guidance on colour, vignetting, motion speed, and performance.
Install the dither-background skill
Download the ZIP for the skill from this page and unzip it. The folder contains SKILL.md and a demo folder with index.html, PROMPT.md, and source.json.
For Claude Code, place the unzipped skill folder in your personal skills directory at ~/.claude/skills/, or in a project's .claude/skills/ folder if you want it only for that project.
In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/dither-background/
- Project only: .claude/skills/dither-background/ inside your project
How to trigger the skill with a natural request
You do not need special syntax. Describe the look you want and mention the page type. The skill's description covers requests for dark monochrome backgrounds, ordered dithering, waves or cloud masses, and gray-white highlights behind UI.
The demo prompts in the package use the form 'Use $dither-background to...', which names the skill directly. Naming it is the most reliable way to make sure it is used.
- Use $dither-background to add a dark dither background behind the hero section of my landing page.
- Add an atmospheric near-black dither field behind my dashboard cards, keeping the data readable.
- Create a standalone responsive HTML page with a monochrome Bayer-dither canvas background and a centred heading.
What to ask for and what to check in the result
Ask for a single bright mass rather than full-screen brightness, and keep foreground text clean. The skill's composition notes recommend letting one main bright mass define the composition.
After the agent writes the code, check the visual quality yourself. The square Bayer pattern should be visible at normal viewing distance, the field should look like broad waves or clouds, the palette should stay monochrome, edges should fall into near-black, and your text should be readable without heavy overlays.
- Cell size is suggested between 5px and 10px; larger cells make the matrix more legible.
- If motion is too busy, ask for slower drift; the skill says to avoid flicker and per-frame random noise.
- If the page is slow, increase the cell size or cap the device pixel ratio before simplifying the field.
Example: the generated HTML and CSS
The skill's HTML and CSS pattern places a canvas with position fixed, full viewport size, z-index 0, and pointer-events none. Page content sits above it with position relative and z-index 1, so clicks pass through the background to your interface.
<canvas class="dither-background" data-dither-background></canvas>Safety notes: scripts and network
This skill runs scripts: yes. The code it produces is browser JavaScript that runs on the page when the page loads. The skill's package does not use the network, so the background code does not need external requests or libraries.
Because the output is code that you will run in your own project, read it before deploying, as you would any generated code. Check that it fits your page and your accessibility requirements.
- Runs scripts: yes (browser JavaScript on your page)
- Uses network: no
What people use it for
- A retro-futuristic dark hero section for a landing page.
- A subtle animated backdrop for a dashboard whose data panels must stay readable.
- A standalone HTML page for a motion study or atmospheric front page.
- A lightweight background built without images or animation libraries.
Frequently asked questions
How do I install the dither-background skill?
Download the ZIP from this page and unzip it. Place the dither-background folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills.
What do I need to use it?
You need a web browser with HTML5 canvas and JavaScript support and a web page project to add the code to. The skill is listed as running scripts and not using the network.
Is the dither-background skill free?
The skill is listed under the MIT licence. Check the licence file in the source repository for the terms that apply to your use.
Can I use it for a colourful brand gradient?
No. The skill is built for monochrome, near-black backgrounds and explicitly avoids rainbow gradients, colourful noise, and photographic imagery.
Why does the background make my page slow?
The skill redraws the canvas every frame unless reduced motion is set. To reduce load, increase the cell size or cap the device pixel ratio, as the skill suggests.
Is the background accessible?
The skill gives only general readability guidance. If your page has accessibility requirements, check text contrast over the background yourself before publishing.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a dark, retro-futuristic canvas backdrop for a hero section, landing page, or dashboard, and you are comfortable reviewing generated browser code. Pick a different approach if you need colourful gradients, photographic imagery, strict accessibility guarantees, or a background for low-power devices where continuous animation is a concern.
Download the skill