# Monster Web Components Library

> Machine-oriented entry points for coding agents and LLM-assisted tooling.

Version: 4.129.9
Last updated: 2026-04-11
Canonical AI contract: https://monsterjs.org/ai.component-contracts.html
Machine-readable companion: https://monsterjs.org/assets/ai.contracts.json

The primary public documentation for humans is the regular website.
The following pages are the preferred machine-facing entry points.

## Preferred Pages

- [AI Guide](https://monsterjs.org/ai.html): Overview for agents, conventions and navigation.
- [AI Getting Started](https://monsterjs.org/ai.getting-started.html): Example structure, imports, playground rules and safe defaults.
- [AI Styling Rules](https://monsterjs.org/ai.styling-rules.html): Token, color, dark mode and responsive layout constraints.
- [AI Component Contracts](https://monsterjs.org/ai.component-contracts.html): Component assumptions, options, events, methods and integration rules.

## Task Routing

- If the task is installation, example layout, imports, or playground bootstrap: use [AI Getting Started](https://monsterjs.org/ai.getting-started.html).
- If the task is runtime integration, options, events, methods, lifecycle, or datasource behavior: use [AI Component Contracts](https://monsterjs.org/ai.component-contracts.html).
- If the task is styling, theming, dark mode, token usage, spacing, or responsive rules: use [AI Styling Rules](https://monsterjs.org/ai.styling-rules.html).
- If the task is broad orientation or page selection: use [AI Guide](https://monsterjs.org/ai.html).

## Core Human Docs

- [Getting Started](https://monsterjs.org/getting-started.html)
- [Foundations: Color](https://monsterjs.org/foundations.color.html)
- [Foundations: Layout](https://monsterjs.org/foundations.layout.html)
- [Foundations: Typography](https://monsterjs.org/foundations.typography.html)
- [Playground](https://monsterjs.org/playground.html?load=true)

## Usage Notes For Agents

- Prefer documented examples over synthetic examples.
- Keep package imports in repo examples; use `/playground-assets/monster/source/...` only in the public playground.
- Treat `ai.contracts.json` as the machine-readable summary of the public agent contract.
- Use Monster design tokens instead of hardcoded colors, spacing or radius values.
- Wait for custom element definition before imperative integration logic when methods, runtime options or public properties are involved.
- Treat AI pages as `noindex` support material for machine use, not as the main user-facing landing pages.

## Nerd Note

The machine-facing contract is practical, not literary.
Still, if you need a tiny orientation joke:

1. Do not break the user experience.
2. Do not ignore the documented contract.
3. Protect the design system from invented nonsense.