AI agents

What the skill knows

• The catalog: every composition, what it shows, its props and their defaults. The catalog file is generated from the code, so it cannot drift from it.
• How to size a container and build a feature card, a bento grid or a hero.
• The rules of our stack: HEEx only, no inline styles, lime as the one accent, the mark through its single definition.

Install the skill

The skill is the folder skill/eh-visuals. Link it into the project where the agent works, so it always reads the current catalog:

# from the umbrella root, after mix deps.get
mkdir -p .claude/skills
ln -s ../../deps/eh_visuals/skill/eh-visuals .claude/skills/eh-visuals

Claude Code picks it up on the next session. To make it available everywhere, link it into your user skills instead:

# from a checkout of this repository
ln -s "$(pwd)/skill/eh-visuals" ~/.claude/skills/eh-visuals

Ask for a visual

Then ask in plain language:

• "Add a visual to the Install stage of the how-we-build section."
• "Put a line chart in the first cell of the bento grid, with our real numbers."
• "Show the order-to-cash process as a flow, with Approved as the current step."
• "What props does the agent run take?"

The agent reads the catalog, chooses the composition, writes the container and the component call, and checks that the stylesheet is imported.

Other agents

An agent without skill support needs one file: skill/eh-visuals/catalog.md. Point it there, and at AGENTS.md if it is going to write a new composition.