Toolverse
All skills

reka-ui

by onmax

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
onmax
Category
Frontend
Views
5

About this skill

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

How to use

  1. Zainstaluj skill Reka UI w swoim projekcie Nuxt. Skill zawiera referencje do komponentów i wzorców dostępności potrzebnych przy pracy z tą biblioteką.

  2. Załaduj plik references/components.md, aby przeglądać dostępne komponenty pogrupowane po kategoriach (Form, Date, Overlay, Menu, Data). Wybierz komponent, który pasuje do Twojego przypadku użycia – na przykład dialog, select, input czy menu.

  3. Otwórz szczegółową dokumentację wybranego komponentu (np. dialog.md, select.md) z folderu components/. Tam znajdziesz API komponentu, dostępne propsy oraz przykłady użycia.

  4. Zapoznaj się z kluczowymi koncepcjami Reka UI stosownymi do Twojego zadania: composition pattern (asChild), controlled vs uncontrolled state, wirtualizacja dla dużych list, czy integracja ze stylami. Odwiedź reka-ui.com, aby przeczytać pełne przewodniki.

  5. Jeśli budujesz komponenty w Nuxt UI lub shadcn-vue (które bazują na Reka UI), użyj tego skilla do zrozumienia bazowych wzorców. Dla gotowych, stylizowanych komponentów Nuxt przełącz się na skill nuxt-ui.

  6. Implementuj komponenty w swoim projekcie, pamiętając o WAI-ARIA compliance i dostępności. Testuj z czytnikami ekranu i klawiaturą.

Related skills