Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →vibeeval/frontend-patterns
React, Next.js, TypeScript frontend patterns - component design, state management, performance
Passed 22 of 22 test cases with the skill, and 20 of 22 without it.
2 fixed20 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
What is the acceptable performance budget threshold for Cumulative Layout Shift (CLS) in Core Web Vitals?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies a Cumulative Layout Shift target under 0.1 | Missed | Passed |
The instructions your model reads when the skill loads.
// DOGRU: Composition
function Card({ children, header }: { children: ReactNode; header: ReactNode }) {
return (
<div className="card">
<div className="card-header">{header}</div>
<div className="card-body">{children}</div>
</div>
);
}
// Kullanim
<Card header={<h2>Title</h2>}>
<p>Content here</p>
</Card>
// Container: Data fetching + logic
function UserListContainer() {
const { data, isLoading } = useQuery(['users'], fetchUsers);
if (isLoading) return <Skeleton />;
return <UserList users={data} />;
}
// Presenter: Pure rendering
function UserList({ users }: { users: User[] }) {
return (
<ul>
{users.map(u => <UserItem key={u.id} user={u} />)}
</ul>
);
test cases passed, vs 20 / 22 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.