# AI agents

> Give coding agents the ExpressiveCSS docs, skills, MCP server, and lint checks.

## Introduction

ExpressiveCSS ships its documentation in plain text, agent skills that walk a coding agent through common tasks, an MCP server, and a lint command that checks markup against the framework's rules.

## Machine-readable docs

Every documentation page has a Markdown copy at the same address with `.md` added, such as [`/auto-init.html.md`](/auto-init.html.md). These files collect the rest:

| File | Contents |
| --- | --- |
| [`llms.txt`](/llms.txt) | An index of every page with a one-line description, following the [llms.txt](https://llmstxt.org/) convention. |
| [`llms-full.txt`](/llms-full.txt) | The API reference and the design guidance in one file. |
| [`llm.md`](/llm.md) | Markup, classes, options, methods, and events for every component. |
| [`m3-guidelines.md`](/m3-guidelines.md) | Material 3 guidance: which component to use, anatomy, and adaptive layout. |
| [`SEMANTICS.md`](/SEMANTICS.md) | The markup rules the lint command enforces. |

## Agent skills

Install every ExpressiveCSS skill into your coding agent:

```
npx skills add BaezFJ/ExpressiveCSS
```

Add `--skill <name>` to install one. The skills live in the [`skills/` directory](https://github.com/BaezFJ/ExpressiveCSS/tree/master/skills) of the repository, and each is a `SKILL.md` file you can also copy by hand.

| Skill | What it does |
| --- | --- |
| [`expressivecss`](https://github.com/BaezFJ/ExpressiveCSS/tree/master/skills/expressivecss) | Build, refine, review, install, theme, and debug ExpressiveCSS interfaces, including page layouts, dashboards, and charts. Use for @expressivecss/expressive markup, components, accessibility (labels, focus, keyboard), runtime init and teardown of JavaScript components, performance, and framework contributions. Exclude generic Material Design or CSS work in projects without ExpressiveCSS. |
| [`expressivecss-migration`](https://github.com/BaezFJ/ExpressiveCSS/tree/master/skills/expressivecss-migration) | Migrates a project to the current ExpressiveCSS release from Materialize CSS or an older @expressivecss/expressive 0.x release, and removes the names that 0.16.0 drops. Use when upgrading ExpressiveCSS, replacing Materialize (`M.AutoInit`, `.btn`, `.modal`, `.input-field`, `.sidenav`) with ExpressiveCSS, or clearing the aliases that 0.16.0 removed. Not for new ExpressiveCSS work or projects that already use current names. |
| [`expressivecss-review`](https://github.com/BaezFJ/ExpressiveCSS/tree/master/skills/expressivecss-review) | Orchestrated ExpressiveCSS UI review. Runs five specialist subagents (Creative Director, Page Architect, Component Syntax Expert, Quality Inspector, Rules Enforcer) over a page, component, template, screenshot, or pasted markup, verifies their findings, and returns one scored report with ranked fixes. Use whenever someone asks to review, audit, grade, critique, or check an interface, page, layout, or component built with ExpressiveCSS or @expressivecss/expressive, including "is this markup right", "score this page", "what's wrong with this layout", or a screenshot of an ExpressiveCSS app, even if they don't say "orchestrated". Not for building new UI or for reviewing the framework's own Sass and TypeScript source. |

## MCP server

The `@expressivecss/mcp-server` package gives an MCP client tools for setup, component syntax, rule checks, and quality checks. Add it to your client's configuration:

```
{
  "mcpServers": {
    "expressivecss-mcp": {
      "command": "npx",
      "args": ["-y", "@expressivecss/mcp-server@latest"]
    }
  }
}
```

The [server's README](https://github.com/BaezFJ/ExpressiveCSS/tree/master/mcp/expressivecss) lists its tools, limits, and environment variables. The skills work without it.

## Lint checks

`expressivecss-lint` runs the server's static checks without an MCP client. It exits 1 when it finds a problem, so it fits a pre-commit hook or CI. Run it from the project root with relative paths:

```
npx --package @expressivecss/mcp-server expressivecss-lint src/pages/*.html
```

In Claude Code, add `expressivecss-lint --hook` as a `PostToolUse` hook to check every file the agent edits. The server's README has the settings.