Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/better-forms
Complete guide for building accessible, high-UX forms in modern stacks (React/Next.js, Tailwind, Zod). Includes specific patterns for clickable areas, range sliders, output-inspired design, and WCAG compliance.
Passed 23 of 23 test cases with the skill, and 18 of 23 without it.
and 6 more in the full report
5 fixed18 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am implementing a custom modal dialog for a registration form in our UI package (`packages/ui`). Should I install `@radix-ui/react-dialog` and wrap my custom trigger with `asChild`?
| Checked | Without skill | With skill |
|---|---|---|
| Rejects importing @radix-ui packages or adding Radix UI dependencies. | Missed | Passed |
| Recommends using @base-ui/react primitives. | Missed | Passed |
| Specifies using the render prop instead of asChild for component composition. | Missed | Passed |
The instructions your model reads when the skill loads.
Repo notice (Asymmetric-al/core): This repository is Base UI only. Shared primitives come from
@base-ui/reactvia the shadcnbase-maiastyle inpackages/ui. Ignore any Radix UI guidance below — never addradix-ui/@radix-ui/*imports or dependencies; composition uses Base UI'srenderprop, notasChild. Seedocs/ai/rules/frontend.md.
A collection of specific UX patterns, accessibility standards, and implementation techniques for modern web forms. This guide bridges the gap between raw HTML/CSS tips and component-based architectures (React, Tailwind, Headless UI).
Concept: Small gaps between clickable list items create frustration. Implementation (Tailwind): Use a pseudo-element to expand the hit area without affecting layout.
// Do this for list items or radio groups
<div className="relative group">
<input type="radio" className="..." />
<label className="... after:absolute after:inset-y-[-10px] after:left-0 after:right-0 after:content-['']">
Option Label
</label>
</div>
Concept: "From $10 to $1000" text inputs are tedious. Implementation: Use a dual-thumb slider component (like Radix UI / Shadcn Slider) for ranges.
Concept: The form inputs should visually resemble the final result card/page.
text-2xl font-bold, the input for it should be text-2xl font-bold.test cases passed, vs 18 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.