dithercn skill
A dither engine for shadcn plus a skill: the agent builds backgrounds, charts and loaders from dots in theme colours.
- 145 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The shadcn CLI downloads source from `dithercn.dev` and copies it into the project, so review the diff.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/dithercnDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The shadcn CLI downloads source from `dithercn.dev` and copies it into the project, so review the diff.
This is third-party code. Review the repository files before installing.
What it does
dithercn adds a dither engine and an agent skill to a shadcn/ui project. The `dither-core` engine in `lib/dither` builds ordered dither dots from a tone you compute: a WebGL shader for moving effects, SVG and CSS fills for static shapes, image dithering and export to PNG, SVG and CSS. Colours come from the theme (`--primary`, `--background`), and the engine handles motion, resizing, offscreen pausing and reduced motion. The skill tells the agent how to pick a technique, write a GLSL field, place a dither on a landing page or dashboard and check it in light, dark and reduced motion. Alongside come 63 ready examples: backgrounds, charts, interface elements, text and images.
Who it is for. Front-end developers and designers building landing pages and dashboards on React and shadcn/ui who want dither effects without hand-written GLSL.
Good fit when
- A hero headline needs a slow dithered background in the brand colour.
- A chart or meter should look like pixel dithering.
- A photo is turned into a dithered image and exported to PNG or SVG.
- Before writing its own field the agent checks the closest ready example.
Not a fit when
- The project is not on React 19 and Tailwind CSS v4, which the engine requires.
- The interface does not use shadcn/ui and theme variables.
- You need animation without WebGL, while moving effects are shader based.
Example request
Add a slow dithered aurora behind the hero headline in our brand colour and keep the headline readable.Limitations
React 19, Tailwind CSS v4 and shadcn/ui are required. Moving effects use WebGL. Installation copies source into the project and adds `--dither-*` variables to global styles. Replacing the engine can overwrite your edits in `lib/dither`, so the skill asks to warn first. Ready components are starting points, not a menu: the agent writes its own field and borrows technique from the closest example. Check the effects on low-end devices. MIT licence.
How to disable. Delete `lib/dither`, `components/dithercn`, the `.agents/skills/dithercn` and `.claude/skills/dithercn` folders and the `--dither-*` variables from global styles.
FAQ
What does the command install?
The engine in `lib/dither/`, the skill in `.agents/skills/dithercn/` and `.claude/skills/dithercn/`, and the `--dither-*` variables.
How do I install a single example?
With the same command and another URL, for example `https://dithercn.dev/r/dither-gradient.json`.
What if the engine is outdated?
The skill looks for `colorField` in `lib/dither/shader.tsx`; if absent, replace the engine files without `--overwrite`, which would clobber `lib/utils.ts`.
What does the site offer agents?
`/llms.txt`, `/llms-full.txt` and `/.well-known/agent-skills/index.json` with the skill.
Which versions are required?
React 19 and Tailwind CSS v4 in a shadcn/ui project. The engine will not work without them.
Discussion
No questions or reviews yet.
Related
SkillsSkill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
design.how: 6 skills turn an app's UI into a design system for the agent, plus four ready systems for shadcn.
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill for building high-craft interfaces: landing pages, dashboards and mobile screens on four routes, with a cheapness check
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| dithercn (this card) | no | 145 | |
| Shaders | yes | 5,917 | a skill and MCP for the Shaders WebGPU library; dithercn installs dither engine source into the project |
| Shader Skills | no | 447 | teaches writing GLSL from ready blocks; dithercn ships a ready dither engine with theming and export |
README in short
The README shows a banner and explains the contents (engine, skill, 63 examples, theme colours), with an install command and a sample request. Further down are a section for agents and site development commands.