Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/ui-pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Passed 15 of 22 test cases with the skill, and 3 of 22 without it.
and 14 more in the full report
14 fixed2 passed either way6 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build a page section component featuring a title and content card. Base implementation should assume standard Tailwind CSS utility classes, but avoid hardcoded hex codes or default light/dark color names.
| Checked | Without skill | With skill |
|---|---|---|
| Applies mx-6 to the outer section container for horizontal margin | Missed | Passed |
| Uses space-y-3 or gap-4 for vertical or grid element spacing | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.
/ss-component/ss-page/ss-flow/ss-tokensPattern type: $0 Description: $ARGUMENTS
mx-6)grid grid-cols-2 gap-4 px-6)flex gap-3 overflow-x-auto scrollbar-hide)test cases passed, vs 3 / 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.