メニュー
Skill for direct usage of Reka UI v2 headless primitives (the foundation of shadcn-vue). Use when you need to compose custom components beyond those available in shadcn-vue, understand asChild/as, controlled state, portals, or migrate from Radix Vue.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Canonical UI/UX best practices ruleset with 14 sections and 70+ rules prioritized P0–P3. Use when implementing, reviewing, or auditing UI components. P0 rules are mandatory — violations are bugs. All rules reference tokens from ui-theme-reference.
Canonical design token registry — colors, typography, spacing, sizing, border radius, shadows, z-index, breakpoints, motion, and focus tokens. Used by ui-best-practices rules and all agents that implement or review UI components. Includes CSS variable template for quick project setup.
Accessibility auditing and remediation skill for Vue 3 + Reka UI. Use when reviewing components, verifying WCAG 2.1 AA, fixing ARIA issues, or validating keyboard navigation in Reka UI components.
Audit of existing Vue components in the project. Use when reviewing Vue design system consistency, identifying duplicate patterns, evaluating legacy components (Options API), or before implementing something new.
Documentation, standardization, and governance of the Vue + shadcn-vue design system. Use when creating component documentation, auditing consistency, defining naming conventions, or generating usage guides for the team.
Bidirectional Figma skill — read designs and write back to Figma. READ: extract tokens, map Vue/Reka UI components, translate Auto Layout to Tailwind. WRITE: push components, screens, and design tokens from code to Figma. Requires /figma:figma-use skill before every use_figma call.
| name | reka-ui |
| description | Skill for direct usage of Reka UI v2 headless primitives (the foundation of shadcn-vue). Use when you need to compose custom components beyond those available in shadcn-vue, understand asChild/as, controlled state, portals, or migrate from Radix Vue. |
Reka UI is the successor to Radix Vue. Foundation of all shadcn-vue@latest components. Current version: v2.7.0 (March 2026)
# Via shadcn-vue (recommended — includes styles)
npx shadcn-vue@latest add [component]
# Direct (for unstyled primitives)
npm install reka-ui
# Nuxt — auto-imports
# nuxt.config.ts
export default defineNuxtConfig({
modules: ['reka-ui/nuxt']
})
# Vite — auto-import resolver
# vite.config.ts
import { RekaResolver } from 'reka-ui/resolver'
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
vue(),
Components({ resolvers: [RekaResolver()] })
]
})
Every Reka UI component follows the Root + sub-parts pattern:
<script setup lang="ts">
import {
AccordionRoot,
AccordionItem,
AccordionHeader,
AccordionTrigger,
AccordionContent,
} from 'reka-ui'
const value = ref(['item-1'])
</script>
<template>
<!-- Root: manages state -->
<AccordionRoot v-model="value" type="multiple">
<!-- Item: context for each entry -->
<AccordionItem value="item-1">
<!-- Header + Trigger: accessible clickable element -->
<AccordionHeader>
<AccordionTrigger>Title</AccordionTrigger>
</AccordionHeader>
<!-- Content: expandable panel -->
<AccordionContent>Item content</AccordionContent>
</AccordionItem>
</AccordionRoot>
</template>
<!-- Controlled: you control the state -->
<DialogRoot v-model:open="isOpen">
<DialogTrigger>Open</DialogTrigger>
<DialogPortal>
<DialogContent>...</DialogContent>
</DialogPortal>
</DialogRoot>
<!-- Uncontrolled: Reka UI manages internally -->
<DialogRoot :default-open="false">
<DialogTrigger>Open</DialogTrigger>
<DialogPortal>
<DialogContent>...</DialogContent>
</DialogPortal>
</DialogRoot>
Convention: default* prefix for initial values (uncontrolled).
v-model:open, v-model:value, v-model:checked for controlled.
asChild allows the Reka UI component to apply its behavior to the child element:
<!-- WITHOUT asChild: Reka renders an extra <button> -->
<DialogTrigger>
<Button>Open</Button> <!-- Button inside button = invalid HTML -->
</DialogTrigger>
<!-- WITH asChild: Reka applies handlers to Button directly -->
<DialogTrigger as-child>
<Button>Open</Button> <!-- Correct: only one interactive element -->
</DialogTrigger>
<!-- Navigation with RouterLink -->
<NavigationMenuLink as-child>
<RouterLink to="/dashboard">Dashboard</RouterLink>
</NavigationMenuLink>
<!-- Primitive: swap div for section -->
<Primitive as="section" class="container">
<slot />
</Primitive>
<!-- Create reusable base component -->
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
const props = withDefaults(defineProps<PrimitiveProps>(), {
as: 'div'
})
</script>
<template>
<Primitive v-bind="props">
<slot />
</Primitive>
</template>
<!-- Dialogs, Tooltips, Popovers need Portal -->
<DialogRoot v-model:open="open">
<DialogTrigger>Open</DialogTrigger>
<DialogPortal>
<!-- Rendered in <body> — avoids z-index and overflow issues -->
<DialogOverlay class="fixed inset-0 bg-black/50" />
<DialogContent class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<DialogTitle>Title</DialogTitle>
<DialogClose>Close</DialogClose>
</DialogContent>
</DialogPortal>
</DialogRoot>
<!-- Keep content in DOM even when closed (for CSS transitions) -->
<DialogContent force-mount v-show="open" class="data-[state=open]:animate-in">
<!-- Content always mounted, visibility controlled by data-state -->
</DialogContent>
CheckboxRoot, RadioGroupRoot + RadioGroupItem, SwitchRoot,
SliderRoot, NumberFieldRoot, PinInputRoot, TagsInputRoot
DialogRoot, AlertDialogRoot, PopoverRoot, TooltipRoot,
HoverCardRoot, SheetRoot (via DrawerRoot)
NavigationMenuRoot, MenubarRoot, ContextMenuRoot,
DropdownMenuRoot, TabsRoot
SelectRoot, ComboboxRoot, ListboxRoot
AccordionRoot, CollapsibleRoot
ScrollAreaRoot, SeparatorRoot, AvatarRoot, AspectRatioRoot
CalendarRoot, RangeCalendarRoot (uses @internationalized/date)
<script setup lang="ts">
import { ComboboxRoot, ComboboxVirtualizer, ComboboxItem } from 'reka-ui'
const items = ref(Array.from({ length: 10000 }, (_, i) => `Item ${i}`))
</script>
<template>
<ComboboxRoot>
<ComboboxContent>
<!-- Automatic virtualization for performance -->
<ComboboxVirtualizer
:options="items"
:estimate-size="32"
v-slot="{ option }"
>
<ComboboxItem :value="option">{{ option }}</ComboboxItem>
</ComboboxVirtualizer>
</ComboboxContent>
</ComboboxRoot>
</template>
Supported in: ComboboxRoot, ListboxRoot, TreeRoot
<script setup lang="ts">
import { useLocale, useDirection } from 'reka-ui'
// Global locale for date components
const { locale } = useLocale()
locale.value = 'pt-BR'
// RTL support
const { dir } = useDirection()
dir.value = 'ltr' // or 'rtl'
</script>
<script setup lang="ts">
import { CalendarRoot, CalendarGrid, CalendarCell } from 'reka-ui'
import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date'
import { ref } from 'vue'
const value = ref(today(getLocalTimeZone()))
</script>
<template>
<CalendarRoot v-model="value" locale="pt-BR">
<CalendarGrid>
<CalendarCell v-for="date in dates" :date="date" />
</CalendarGrid>
</CalendarRoot>
</template>
# Via shadcn-vue CLI (reinstalls all components with Reka)
npx shadcn-vue@latest add --all
# Manual: swap imports
# Before: import { Dialog } from 'radix-vue'
# After: import { DialogRoot } from 'reka-ui'
# or: import { Dialog } from '@/components/ui/dialog' ← preferred
Main name changes:
| Radix Vue | Reka UI |
|---|---|
RadixDialog | DialogRoot |
import from 'radix-vue' | import from 'reka-ui' |
| Same API pattern | Same API pattern |
asChild + slot: do not add elements between the Reka component and the direct childv-model:open is reactive by reference — do not destroy and recreate the componentforceMount + v-show works; forceMount + v-if does not (defeats the purpose)<body> — scoped CSS may not reach the contentComboboxVirtualizer: estimateSize can be a function for variable heights (v2.7+)@internationalized/date is a peer dependency — install separately: npm i @internationalized/date