Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/ui-page
Scaffold a new mobile page/screen using the StyleSeed layout patterns
Passed 14 of 19 test cases with the skill, and 4 of 19 without it.
and 14 more in the full report
11 fixed5 passed either way6 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
I need to map out the overall multi-screen onboarding navigation graph and route structure for our mobile app. Can you scaffold all these screens into one page layout file?
| Checked | Without skill | With skill |
|---|---|---|
| The response advises defining the multi-page flow navigation structure before scaffolding individual page layouts. | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill when you need scaffold a new mobile page/screen using the StyleSeed layout patterns.
/ss-pattern/ss-flow firstCreate a new page: $0 Description: $ARGUMENTS
Read the design system reference:
CLAUDE.md for file structure and conventionscomponents/patterns/page-shell.tsx for page layoutcomponents/patterns/top-bar.tsx for header patterncomponents/patterns/bottom-nav.tsx for navigationPage structure template:
import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"
export default function PageName() {
return (
<PageShell>
<TopBar
logo={/* logo or page title */}
subtitle={/* optional subtitle */}
actions={/* optional action buttons */}
/>
<PageContent>
{/* Page sections with space-y-6 */}
test cases passed, vs 4 / 19 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.