Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →xu-xiang/frontend-patterns
针对 React、Next.js、状态管理、性能优化及 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.
Design a generic React component `DataLoader<T>` that accepts an API URL string and exposes `data`, `loading`, and `error` states to its children via a function property rather than standard JSX children. Show the TypeScript props interface.
| Checked | Without skill | With skill |
|---|---|---|
| Defines children as a function prop accepting data, loading, and error. | Missed | Passed |
The instructions your model reads when the skill loads.
用於 React、Next.js 和高效能使用者介面的現代前端模式。
// ✅ 良好：元件組合
interface CardProps {
children: React.ReactNode
variant?: 'default' | 'outlined'
}
export function Card({ children, variant = 'default' }: CardProps) {
return <div className={`card card-${variant}`}>{children}</div>
}
export function CardHeader({ children }: { children: React.ReactNode }) {
return <div className="card-header">{children}</div>
}
export function CardBody({ children }: { children: React.ReactNode }) {
return <div className="card-body">{children}</div>
}
// 使用方式
<Card>
<CardHeader>標題</CardHeader>
<CardBody>內容</CardBody>
</Card>
interface TabsContextValue {
activeTab: string
setActiveTab: (tab: string) => void
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.