Reka Ui
Pick the right Reka UI primitives and props while building accessible Nuxt/Vue interfaces without spelunking the whole component source.
Overview
reka-ui is an agent skill for the Build phase that provides a searchable catalog of Reka UI components and doc paths for Nuxt/Vue frontend work.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill reka-uiWhat is this skill?
- Auto-generated component index—regenerate with npx tsx skills/reka-ui/scripts/generate-components.ts when upstream Reka
- Form suite: checkbox, combobox, editable, label, listbox, numberField, pinInput, radioGroup, select, slider, switch, tag
- Date inputs include calendar and dateField (alpha) with per-component markdown files under components/
- Each entry links description, accessibility-oriented behavior, and the canonical component doc path
- Pairs with Nuxt skills repo conventions for consistent agent lookups during UI tasks
- 14 documented Form components in the generated index table
- Regeneration command: npx tsx skills/reka-ui/scripts/generate-components.ts
Adoption & trust: 6.3k installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a Nuxt app with Reka UI but waste turns asking the agent to invent component APIs that do not match the library’s actual exports.
Who is it for?
Indie SaaS frontends on Nuxt that standardize on Reka UI for accessible forms, toggles, and date entry.
Skip if: Teams on React-only stacks, custom design systems with no Reka dependency, or backend-only sessions.
When should I use this skill?
The user builds Nuxt/Vue UI with Reka UI and needs component names, behavior summaries, or paths to components/*.md references.
What do I get? / Deliverables
Your agent cites the correct Reka UI component, behavior blurb, and components/*.md reference so you implement forms and date controls faster.
- Correct Reka UI component selection with linked components/*.md file paths
- Updated local catalog after running generate-components.ts when upstream changes
Recommended Skills
Journey fit
Component catalog skills belong under Build because they accelerate UI implementation after you have chosen a stack. Frontend subphase fits auto-generated Reka UI component tables (form, date, overlays) used during page and design-system assembly.
How it compares
A generated in-repo component map—not a Figma handoff skill or a full Nuxt routing/architecture planner.
Common Questions / FAQ
Who is reka-ui for?
Solo builders and small frontend teams using Nuxt with Reka UI who want agents to ground answers in the project’s component markdown files.
When should I use reka-ui?
During Build/frontend when choosing controls (select vs combobox, pin OTP fields, sliders), scaffolding forms, or locating the right components/*.md doc before coding.
Is reka-ui safe to install?
It is static reference content; review the Security Audits panel on this Prism page—regenerate locally only with trusted repo scripts.
SKILL.md
READMESKILL.md - Reka Ui
# Components > Auto-generated. Run `npx tsx skills/reka-ui/scripts/generate-components.ts` to update. ## Form | Component | Description | File | |-----------|-------------|------| | **checkbox** | Selection control with indeterminate state | `components/checkbox.md` | | **combobox** | Searchable dropdown with filtering | `components/combobox.md` | | **editable** | Inline text editing with preview/edit modes | `components/editable.md` | | **label** | Accessible form label | `components/label.md` | | **listbox** | Accessible list selection | `components/listbox.md` | | **numberField** | Numeric input with increment/decrement | `components/number-field.md` | | **pinInput** | Multi-character code entry (OTP) | `components/pin-input.md` | | **radioGroup** | Mutually exclusive selection | `components/radio-group.md` | | **select** | Dropdown selection with grouping | `components/select.md` | | **slider** | Range input control | `components/slider.md` | | **switch** | Toggle between two states | `components/switch.md` | | **tagsInput** | Multiple tag entry and management | `components/tags-input.md` | | **toggle** | Single state button toggle | `components/toggle.md` | | **toggleGroup** | Multiple toggles with group behavior | `components/toggle-group.md` | ## Date | Component | Description | File | |-----------|-------------|------| | **calendar** | Date selection grid (alpha) | `components/calendar.md` | | **dateField** | Date input field (alpha) | `components/date-field.md` | | **datePicker** | Date picker with calendar (alpha) | `components/date-picker.md` | | **dateRangeField** | Date range input (alpha) | `components/date-range-field.md` | | **dateRangePicker** | Date range picker (alpha) | `components/date-range-picker.md` | | **rangeCalendar** | Calendar for date ranges (alpha) | `components/range-calendar.md` | | **timeField** | Time input field (alpha) | `components/time-field.md` | ## Disclosure | Component | Description | File | |-----------|-------------|------| | **accordion** | Collapsible content sections | `components/accordion.md` | | **collapsible** | Single collapsible panel | `components/collapsible.md` | ## Overlay | Component | Description | File | |-----------|-------------|------| | **alertDialog** | Modal dialog requiring action | `components/alert-dialog.md` | | **dialog** | Modal dialog | `components/dialog.md` | | **hoverCard** | Card shown on hover | `components/hover-card.md` | | **popover** | Floating content panel | `components/popover.md` | | **tooltip** | Informational hover tip | `components/tooltip.md` | | **toast** | Temporary notifications | `components/toast.md` | ## Menu | Component | Description | File | |-----------|-------------|------| | **contextMenu** | Right-click context menu | `components/context-menu.md` | | **dropdownMenu** | Dropdown action menu | `components/dropdown-menu.md` | | **menubar** | Horizontal menu bar | `components/menubar.md` | | **navigationMenu** | Site navigation menu | `components/navigation-menu.md` | ## Data | Component | Description | File | |-----------|-------------|------| | **avatar** | User image with fallback | `components/avatar.md` | | **pagination** | Page navigation | `components/pagination.md` | | **progress** | Progress indicator | `components/progress.md` | | **scrollArea** | Custom scrollbar container | `components/scroll-area.md` | | **separator** | Visual divider | `components/separator.md` | | **splitter** | Resizable split panels | `components/splitter.md` | | **stepper** | Multi-step progress indicator | `components/stepper.md` | | **tabs** | Tabbed content panels | `components/tabs.md` | | **tree** | Hierarchical tree view | `components/tree.md` | ## Layout | Component | Description | File | |-----------|-------------|------| | **aspectRatio** | Maintain aspect ratio | `components/aspect-ratio.md` | | **toolbar** | Toolbar with buttons/toggles | `components/toolbar.md` | ## Utility | Component | Description | File | |-------