# Araxxe Pattern Library - snippet for consuming projects

Copy the block below into the `CLAUDE.md` / `AGENTS.md` / agent rules of any project that
uses the pattern library, replacing `{DOMAIN}` with the pattern-library host.

```markdown
## UI and styles - Araxxe Pattern Library

All UI uses the Araxxe Pattern Library: CSS classes prefixed `araxxe-`, served at
{DOMAIN}. Never write custom CSS for a pattern the library covers - compose the
documented classes instead.

Before building or changing UI, fetch the relevant docs:

- {DOMAIN}/ai/page-skeleton.md - ready-to-paste full-page shells (standard page,
  details page, overlay layers); start here for any new screen
- {DOMAIN}/ai/components-index.md - index of all components, class conventions, setup
- {DOMAIN}/ai/components/atom.md (or molecule/organism/template.md) - full usage
  entries: base class, modifiers, elements, states, HTML examples
- {DOMAIN}/ai/quarks.md - utility modifier classes (spacing, sizing, colors, animations)
- {DOMAIN}/ai/icons.md - icon glyph class names
- {DOMAIN}/DESIGN.md - design tokens and visual-identity rules (colors, typography,
  do's and don'ts)

Stylesheets to load in the HTML head:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i&display=swap" rel="stylesheet" />
<link href="{DOMAIN}/font/araxxe-glyph/css/araxxe-glyph.css" rel="stylesheet" />
<link rel="stylesheet" href="{DOMAIN}/tikui.css" />

Conventions: block `araxxe-<component>`; element `araxxe-<component>--<element>` as its
own class; modifiers as separate leading-dash classes (`class="araxxe-button
-secondary"`); `ion--*` state classes are toggled at runtime.
```