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. These files collect
the rest:
| File | Contents |
|---|---|
llms.txt | An index of every page with a one-line description, following the llms.txt convention. |
llms-full.txt | The API reference and the design guidance in one file. |
llm.md | Markup, classes, options, methods, and events for every component. |
m3-guidelines.md | Material 3 guidance: which component to use, anatomy, and adaptive layout. |
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
of the repository, and each is a SKILL.md file you can also copy by hand.
| Skill | What it does |
|---|---|
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 |
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 |
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 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.