Is this skill compatible with Nuxt?

Yes, it includes specific patterns for Nuxt integration, including module configuration and auto-import resolvers for optimized development.

How does the 'asChild' pattern work in this skill?

The asChild pattern allows the skill to guide Claude in merging Reka UI behaviors and props directly onto your own custom components, avoiding unnecessary DOM wrapper elements.

Does this skill help with component styling?

Since Reka UI is headless, it handles logic and accessibility; this skill helps you implement that logic and provides patterns for integrating it with styling tools like Tailwind CSS.

Reka UI (formerly Radix Vue) is a library of unstyled, accessible UI primitives for Vue 3 designed to help developers build high-quality design systems without reinventing accessibility logic.

Reka UI Primitives

Name: Reka UI Primitives
Author: onmax

byonmax

•

Design Tools

Builds accessible, unstyled Vue 3 component primitives using WAI-ARIA compliant patterns and headless architecture.

About

This skill empowers Claude to efficiently implement Reka UI (formerly Radix Vue), a comprehensive set of headless component primitives for Vue 3. It provides deep technical guidance on component APIs, accessibility patterns, and composition strategies like the 'asChild' pattern. Whether you are building a custom design system from scratch or utilizing popular libraries like Nuxt UI or shadcn-vue, this skill ensures your components are functionally robust, accessible by default, and seamlessly integrated with modern Vue development workflows.

Key Features

Advanced composition using the asChild prop pattern
Optimization of DOM structures for animation libraries using forceMount
Standardized integration with Nuxt UI and shadcn-vue ecosystems
12 GitHub stars
Management of controlled and uncontrolled component states
Implementation of WAI-ARIA compliant headless components

Use Cases

Refactoring existing UI components to improve accessibility and keyboard navigation
Building a custom, accessible design system for a Vue 3 or Nuxt application
Creating complex UI elements like modals, popovers, and comboboxes with pre-built state logic

About

Key Features

Advanced composition using the asChild prop pattern
Optimization of DOM structures for animation libraries using forceMount
Standardized integration with Nuxt UI and shadcn-vue ecosystems
12 GitHub stars
Management of controlled and uncontrolled component states
Implementation of WAI-ARIA compliant headless components

Use Cases

Refactoring existing UI components to improve accessibility and keyboard navigation
Building a custom, accessible design system for a Vue 3 or Nuxt application
Creating complex UI elements like modals, popovers, and comboboxes with pre-built state logic