built basic ui structure in /hierarchy

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

@@ -0,0 +1,41 @@
+---
+trigger: model_decision
+description: When working on UI
+---
+
+# Kobalte for Solid.js Coding Rules
+
+## Core Mandate
+1. **Always use [Kobalte](https://kobalte.dev/)** 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)
+```jsx
+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.