Monochrome skill
Accessible HTML and ARIA components with a skill and CLI: agents write markup from a spec and verify it with a checklist.
- 134 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The CLI writes component files and an `AGENTS.md` block into your project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/monochromeDetects 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 CLI writes component files and an `AGENTS.md` block into your project.
This is third-party code. Review the repository files before installing.
What it does
Monochrome makes correctly marked-up HTML interactive: after one import, accordions, dialogs, menus, tabs, popovers and tooltips work. The markup is the state, driven by `aria-expanded` and `aria-selected`, so there are no init calls or state objects. The project supplies its own styles. For agents the package ships a spec per component: markup, keys, mistakes and a checklist for verification. `npx monochrome init` adds a short block to `AGENTS.md`, `npx monochrome add menu` prints a starter or writes the component for React and Vue, and `npx monochrome docs menu` prints the spec. The `monochrome` skill triggers when working on these widgets.
Who it is for. Frontend developers building interfaces with Claude Code, Codex or Cursor who want predictable, accessible widgets with no custom JavaScript logic.
Good fit when
- An agent writes a dropdown menu or modal and you need verifiable markup.
- A page is rendered by streamed tokens or `innerHTML`, so handlers must not depend on mounting.
- The project already has its own styles and the library must not impose a look.
- You need to audit existing tabs or accordion markup for accessibility.
Not a fit when
- You want ready-styled components with themes and icons.
- You need complex widgets: data tables, calendars, date pickers.
- The project uses neither HTML markup nor React or Vue.
Example request
Add a dropdown menu to the header with monochrome, take the starter from `npx monochrome add menu` and check the markup against the spec checklist.Limitations
The set is limited to eight components and an optional router. The package ships no CSS: menus, popovers and tooltips need the required positioning rules from `spec/styling.md`. The React parts need React 19 and the Vue parts 3.5. The CLI runs on Node.js 20 or newer. Since 0.18 there are no `monochrome/react` or `monochrome/vue` exports: components are written into your project by `npx monochrome add`.
How to disable. Run `npm uninstall monochrome`, remove the block from `AGENTS.md` and the skill from the skills directory. Files written by `add` live in `src/components/ui/` and are removed by hand.
FAQ
How do I add the library?
Run `npm install monochrome` and import `monochrome` once or a single component such as `monochrome/menu`. `npx monochrome init` also writes a block to `AGENTS.md`.
Does it ship styles?
No. The library has no CSS and the project defines the look. The exception is positioning rules for menus, popovers and tooltips.
Where is the component spec?
In the package at `node_modules/monochrome/spec/`, one file per component. Without the package installed `npx monochrome docs <topic>` prints the same pages.
Does it work with React and Vue?
Yes. `npx monochrome add menu` writes parts to `src/components/ui/` for React 19 or Vue 3.5. The files then belong to the project.
How do I see what changed in a new version?
`npx monochrome changelog --from <version>` prints changes and upgrade steps.
Discussion
No questions or reviews yet.
Related
SkillsAnnotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
A skill and CLI that make dependency-free single-file HTML: shadcn tokens, seven layouts, SVG charts and an agent self-check
A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Nothing Design
nothing-design
A skill for generating UI in the Nothing visual language: monochrome, Swiss typography, industrial rigor
README in short
The idea is that an agent has nothing to invent: a component is HTML and ARIA, and the spec of the same version sits next to the code with a list of common mistakes.