Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →onewave-ai/react-component-generator
Generate React components with TypeScript, proper props, hooks, and accessibility.
Passed 22 of 22 test cases with the skill, and 6 of 22 without it.
and 17 more in the full report
16 fixed6 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 16 test cases the skill fixed. Same model, same prompt, with and without the skill.
Create a React component to display a list of recent order records fetched directly from PostgreSQL in Next.js App Router, showing a fallback message if no records exist.
| Checked | Without skill | With skill |
|---|---|---|
| The component function is exported as an async function. | Passed | Passed |
| The rendered list element includes `role="list"`. | Missed | Passed |
The instructions your model reads when the skill loads.
When creating React components:
'use client';
import { useState, useCallback } from 'react';
import { cn } from '@/lib/utils';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
isLoading?: boolean;
children: React.ReactNode;
}
export function Button({
variant = 'primary',
size = 'md',
isLoading = false,
children,
className,
disabled,
...props
}: ButtonProps) {
const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2';
const variants = {
test cases passed, vs 6 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.