ai-hint

The ai-hint attribute is a lightweight, optional tool for providing natural-language context to AI developer tools. It can clarify the purpose of any component, layout, slot, or binding.

---

🧠 Purpose

To help AI developer agents infer semantic roles, expected behavior, or business logic when structure alone isn't clear.

---

🛠 Usage

On components

<button ai-hint="This button submits the login form.">
  Sign In
</button>

On generic or ambiguous elements

<group ai-hint="Likely a card summarizing a user's profile with avatar and text."/>

On slots

<slot name="meta" ai-hint="Subheading or timestamp shown below the title"/>

---

🔁 Applicability

ai-hint can be used on:

• Layout primitives (<layout>, <group>, <box>)

• Interactive elements (<button>, <input>, <link>)

• Data-driven content (<binding>, <slot>)

• Custom components and containers

---

🧠 AI Interpretation Guidelines

• Read ai-hint as freeform intent description

• Use it to resolve ambiguities, especially in generic tags

• Optionally surface ai-hint as part of docs, tooltips, or dev comments

---

✅ Summary

• Always optional, never rendered

• Enhances AI inference and code scaffolding

• Valuable for ambiguous or flexible elements

---