42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
---
|
|
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.
|