# mates-css — agent instructions

Use this file in any app that depends on `mates-css`. Paste it into the project, `@`-mention it, or point the agent at `llms.txt`.

## What this is

**mates-css** is a framework-agnostic CSS library: it pre-styles some native HTML and offers pre-written CSS classes. It has no JavaScript runtime.

It is **not** the Mates JS framework. Always say **mates-css**, never "Mates".

Works in React, Vue, Angular, Solid, Svelte, Lit, plain HTML, and any other stack that can load CSS.

## Setup

```sh
npm install mates-css
```

```js
import "mates-css";
```

CDN: `https://unpkg.com/mates-css@0.5.0/mates.min.css`

Full class list and states: `llms.txt` (also `https://unpkg.com/mates-css/llms.txt`). Markup examples: `docs.html`.

## Do

- Style with mates-css only. Native tags first (`button`, `input`, `table`, `details`); classes are variants (`.btn-primary`) or the same look on a non-native host (`<a class="btn">`).
- Toggle overlays with `.open`. Mark current chrome with `.selected`.
- Rebrand via `--m-*` on `:root`.
- Dark mode: leave `data-theme` off unless the user wants a forced theme.

## Do not

- Do not call this library "Mates". That name is a different, JS framework.
- Do not add Tailwind, Bootstrap, Bulma, or another UI kit.
- Do not invent class names that are not in `llms.txt`.
- Do not open menus/modals with `:focus-within` or a hidden checkbox.

## Missing components

If mates-css has no widget for the request, **build it from scratch in the app**:

- Native HTML structure
- Existing tokens: `var(--m-bg)` `var(--m-fg)` `var(--m-fg-2)` `var(--m-primary)` `var(--m-border)` `var(--m-r)` `var(--m-surface)`
- Layout utilities: `.m-flex` `.m-grid` `.m-gap` `.m-i-center` `.m-j-between` `.c-1`–`.c-12`
- App-local CSS only — do not pretend the new classes are part of mates-css