kobalte_skill

This skill helps you implement accessible, headless Kobalte components in SolidJS, ensuring proper structure and focus management with portals and roots.

TypeScript

8

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill joncrangle/.dotfiles --skill kobalte

SKILL.md2.5 KB

Overview

This skill is a Kobalte specialist for SolidJS that guides building accessible, headless UI components. It explains correct component anatomy, accessibility guarantees, and styling strategies so you can compose unstyled primitives into production-ready UI. The guidance focuses on practical patterns, Tailwind integration, and common pitfalls to avoid.

How this skill works

I inspect your component usage and recommend a complete composition pattern: Root -> Trigger -> Portal -> Content (and nested parts like Item, Label, or Arrow). I check for accessibility mistakes you might introduce and point out where Kobalte already manages ARIA and keyboard behavior. I also detect styling approach (plain CSS vs Tailwind) and suggest the @kobalte/tailwindcss plugin when appropriate.

When to use it

When you need fully controllable, unstyled UI primitives for SolidJS
When accessibility, keyboard navigation, and ARIA compliance are required
When you want composable building blocks for complex widgets (selects, dialogs, menus)
When using overlays that must avoid z-index or clipping issues
When you prefer logic-first components and provide your own visual design

Best practices

Always nest parts inside the Root or provide context; don’t skip Root
Use Component.Portal for overlays (Dialog, Popover, Tooltip, Select) to avoid clipping and z-index issues
Do NOT add manual role/aria attributes; Kobalte manages ARIA and focus for you
Choose Select for button-triggered lists and Combobox for text-input-driven lists
If using Tailwind, install @kobalte/tailwindcss to access ui-selected and other data-attribute modifiers

Example use cases

Accessible dropdown menu using Root -> Trigger -> Portal -> Content with keyboard support
Custom-styled Select controlled by state and styled with Tailwind using data-selected and data-expanded attributes
Dialog with portal rendering at body root to avoid clipping in complex layouts
Combobox for typeahead search with keyboard highlight and managed ARIA
Tooltip or Popover implemented as Portal overlays with focus/escape handling provided automatically

FAQ

No. Kobalte handles ARIA, roles, and keyboard interactions. Avoid adding manual aria-* or role attributes unless you have a specific advanced case.

When should I use Select vs Combobox?

Use Select when the trigger is a button and you don’t need free text input. Use Combobox when you need a text input for filtering or free typing.