AI Getting Started

This page is the fast contract for AI agents. It describes the minimum rules needed to generate, adapt or validate Monster code without drifting into custom conventions.

Agent path

Execution Model

Monster examples separate source display, runtime display and optional runtime behavior. Agents should preserve that distinction instead of collapsing everything into one ad-hoc HTML snippet.

Recommended Order

Read the component page

Check summary, options, events and existing examples first. Reuse documented examples before inventing new structure.

Inspect the example folder model

Understand whether the task needs only source HTML, a separate runtime HTML file, or additional JavaScript and CSS.

Apply styling rules

Use Monster tokens, paired foreground/background colors, token radius and container-aware layouts. Avoid custom values unless there is a strong reason.

Validate in the playground

If a page offers Open in playground, use it as the final behavior check before treating the example as valid.

Example File Contract

main.html

Primary source HTML shown in the docs. Use this when visible source and runtime markup should match.

run.html

Optional runtime override. Use it when the live demo needs wrapper markup or runtime-only scaffolding that should not appear as the main source snippet.

script.mjs

JavaScript source shown in the docs and used as part of the executable example.

run.mjs

Runtime-only JavaScript extension. Use this when the example needs bootstrapping that should not dominate the visible source block.

style.css

Example-local CSS. Keep it minimal and token-based.

readme.html

Short explanation block rendered above the example. Prefer this over long comments inside code.

Browser-Safe Playground Pattern

import "/playground-assets/monster/source/components/form/select.mjs";
import { PropertyStyleSheet } from "/playground-assets/monster/source/components/stylesheet/property.mjs";

document.adoptedStyleSheets = [PropertyStyleSheet];

Open AI-safe playground example

For playground execution, use the local module path that the site exports. Do not assume bare package imports will resolve inside the browser runtime.

Hard Rules

Do

Use existing component annotations, documented examples and Monster variables such as --monster-color-*, --monster-bg-color-* and --monster-border-radius.

Do not

Introduce random hex colors, hard-coded border radii, brittle fixed-width layouts or non-responsive demo wrappers.

Prefer

@container for embedded responsiveness, real component APIs over fake placeholders, and examples that match how the component will actually be used.

Avoid

Inventing new file conventions, mixing runtime-only helpers into the main visible source, or relying on undocumented imports in the playground.

The current width of the area is too small to display the content correctly.