Use the Library with your AI assistant

How-toUpdated November 5, 2026

Every element and template in the Library comes with a prompt you can paste into Claude, Cursor, ChatGPT or any coding assistant. This page explains how to get a good result and how to check it.

Three steps

1. Pick and tune. Open an element or template, move the controls until it looks right, and copy the prompt. The prompt carries your settings.
2. Paste it into your assistant. The prompt links to a JSON spec with the markup, CSS, JavaScript, parameters and accessibility notes, so the assistant uses our tested code instead of inventing its own.
3. Verify. Ask the assistant to run the checks in the next section before you accept the change.

The machine-readable spec

Each item has a JSON file at /elements/<name>.json or /templates/<name>.json. The whole catalogue is at /library.json. Fields include the intent keywords, techniques, stack, parameters with ranges, accessibility and performance notes, and the source. An assistant can search the catalogue by intent, then fetch the items it picks.

What to verify

• Reduced motion: turn on "reduce motion" in your operating system and confirm nothing moves.
• Small screens: check the layout at 375px wide and that nothing depends on hover alone.
• Console: no errors or warnings after load.
• Scroll feel: scrolling stays smooth with the effect on screen.
• Contrast: text stays readable over any background after you change the colours.

Combining elements

Elements are independent, so you can place several on one page. The templates show tested combinations. Keep the number of continuously animating elements low on one screen, since each one runs its own loop while visible.

Using it from an MCP client

A search and install tool for MCP clients is planned. Until then, the JSON files above give an assistant everything it needs, and you can already connect Enrichr itself to analyse real sites. See the setup guide.

Tools that help

FAQ