Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →terminalskills/radix-ui
Build accessible UI primitives with Radix UI.
Passed 23 of 23 test cases with the skill, and 22 of 23 without it.
1 fixed22 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
I need a React component for a destructive action confirmation modal using Radix UI. It should show a dark backdrop overlay, a confirmation title, a description paragraph, a cancel button, and a red confirm button. Please write the complete component code.
| Checked | Without skill | With skill |
|---|---|---|
| The component uses the standard Dialog primitive rather than alert-dialog. | Missed | Passed |
| The close button element is wrapped with Dialog.Close using the asChild prop. | Missed | Passed |
The instructions your model reads when the skill loads.
Radix UI provides unstyled, accessible React primitives — dropdowns, dialogs, popovers, tabs, accordions, and more. Each component handles keyboard navigation, focus management, screen reader support, and ARIA attributes. You add your own styling. Foundation of shadcn/ui. Install the unified radix-ui package (recommended, tree-shakeable) or individual @radix-ui/react-* packages; keep all Radix packages on matching versions to avoid duplicated dependencies.
npm install radix-ui
import { Dialog, DropdownMenu, Tabs, Tooltip } from 'radix-ui' // unified package
// or per primitive: import { Dialog } from 'radix-ui/dialog'
// older style, still supported: import * as Dialog from '@radix-ui/react-dialog'
The examples below use import * as from the individual packages; with the unified package the same Dialog.Root, Dialog.Trigger names apply.
import * as Dialog from '@radix-ui/react-dialog'
function ConfirmDialog({ trigger, title, description, onConfirm }) {
return (
<Dialog.Root>
<Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50 animate-in fade-in" />
<Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 w-[90vw] max-w-md shadow-xl animate-in fade-in zoom-in-95">
<Dialog.Title className="text-lg font-semibold">{title}</Dialog.Title>
<Dialog.Description className="text-sm text-gray-500 mt-2">
{description}
</Dialog.Description>
<div className="flex justify-end gap-2 mt-6">
<Dialog.Close asChild>
test cases passed, vs 22 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.