OPUS/UI

Navigation

OPUS/UI
DocsBackgroundsComponentsEffectsBlocksTheme

Getting started

For AI agents

You’ll often ask an AI to build the page and just point at what you want. OPUS is laid out so any coding agent — Claude Code, Cursor, Codex, Kilo, Hermes — can discover, read and install the exact component without guessing.

Machine-readable endpoints

  • /llms.txt — the catalog: one line per item with summary, category and import path.
  • /llms-full.txt — every item’s usage snippet and props in a single file.
  • /md/<slug> — a markdown twin of each docs page, including the complete source of every file it needs.
  • /r/<slug>.json — shadcn registry items (see CLI & registry).

A prompt that works

Use OPUS UI for this page. Read https://opusui.131199999.xyz/llms.txt to see what exists.
For each component you choose, fetch https://opusui.131199999.xyz/md/<slug> and follow its install + usage.
Copy files with: node ../tailwind_component/opus55/scripts/add.mjs <slug...> --cwd .
Rules: import components/opus/opus.css once; backgrounds go in a relative parent with className="absolute inset-0";
keep content in a sibling with relative z-10; don't add new npm deps beyond clsx + tailwind-merge.

Snippet for AGENTS.md / CLAUDE.md

Drop this into the instructions file of any project that uses OPUS so every agent session starts with the same rules.

AGENTS.md
## UI kit
- Components come from OPUS UI (https://opusui.131199999.xyz). Catalog: https://opusui.131199999.xyz/llms.txt
- Install: node ../tailwind_component/opus55/scripts/add.mjs <slug> --cwd .
- Never edit files in components/opus by hand without noting it — they are vendored and may be re-copied.

Naming you can say out loud

Slugs are the file names: event-horizon lives in backgrounds/event-horizon.tsx and exports EventHorizon. So “use the OPUS event-horizon background behind the hero, with the Blue shift preset” is enough for an agent to find the file, the docs and the preset values on the page.

Command palette