Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lingxling/ui-component
Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.
Passed 9 of 23 test cases with the skill, and 3 of 23 without it.
and 15 more in the full report
7 fixed2 passed either way13 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
Build a multi-part Modal dialog pattern with header, body content, and action footer for StyleSeed. Provide full component, target location, imports, and token notes.
| Checked | Without skill | With skill |
|---|---|---|
| Target path is located in src/components/patterns/. | Missed | Passed |
| Uses function declaration for the component. | Missed | Passed |
| Includes data-slot attributes for component identification. | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill when you need generate a new UI component following the StyleSeed design conventions.
/ss-page/ss-patterncomponents/ui/ directory or no Tailwind v4)Generate a new component: $0 Description: $ARGUMENTS
First, read the design system seed for context:
CLAUDE.md for component conventionscss/theme.css for available design tokenscomponents/ui/button.tsx as a reference patternFollow these conventions strictly:
function declaration (not const)data-slot="component-name" attributecn() from @/components/ui/utils for all className mergingReact.ComponentProps<> for prop typingclassName prop for overridesclass-variance-authority) if the component has variantsbg-card, text-foreground) — never inline hexDesign token usage:
text-foreground, bg-card, text-brand, text-muted-foreground, border-bordershadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]rounded-md, rounded-lg, rounded-2xlp-1.5, p-3, p-6)duration-[var(--duration-fast)], ease-[var(--ease-default)]Typography rules:
test cases passed, vs 3 / 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.