Rivertalk/river_connect/.agent/rules/style-guide.md

trigger, description

trigger	description
model_decision	When working on UI

Kobalte for Solid.js Coding Rules

Core Mandate

1. Always use Kobalte for UI components in Solid.js (e.g., Popovers, Dialogs, Selects, Tooltips, etc.).
2. DO NOT implement custom UI logic or accessibility patterns from scratch unless explicitly requested by the user.
3. DO NOT use other UI libraries for Solid.js unless explicitly requested.

Implementation Guidelines

• Importing: Always import from @kobalte/core.
• Structure: Follow the standard Kobalte pattern: Component.Root, Component.Trigger, Component.Portal, Component.Content, etc.
• Styling:
  • Use Tailwind CSS for all styling.
  • Apply styles directly to the Kobalte primitive components using the class prop.
  • Use data-* attributes provided by Kobalte (e.g., data-expanded, data-disabled) for state-based styling in Tailwind.
• Portals: Use <Popover.Portal> or <Dialog.Portal> to ensure correct DOM placement and stacking context.
• Animations: Prefer Tailwind's animate-in, fade-in, zoom-in, etc. (from tailwindcss-animate if available, or custom animations) combined with Kobalte's state attributes.

Example Pattern (Popover)

import { Popover } from "@kobalte/core";

<Popover.Root>
  <Popover.Trigger class="...">...</Popover.Trigger>
  <Popover.Portal>
    <Popover.Content class="...">
      <Popover.Arrow />
      <Popover.Title class="...">...</Popover.Title>
      <Popover.Description class="...">...</Popover.Description>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>

Exceptions

• Only bypass Kobalte if the user explicitly says: "Do not use Kobalte for this" or "Build this from scratch".
• If a component is not available in Kobalte, ask for clarification before choosing an alternative.