ui-page

Mobile Page Scaffolder

When to Use

Use this skill when you need scaffold a new mobile page/screen using the StyleSeed layout patterns.

When NOT to use

• For a single composed pattern within an existing page → use /ss-pattern
• For desktop-only screens — this skill is mobile-first
• For multi-page navigation structure → use /ss-flow first
• For tweaking an existing page — edit the file directly

Create a new page: $0 Description: $ARGUMENTS

Instructions

1. Read the design system reference:

• CLAUDE.md for file structure and conventions
• components/patterns/page-shell.tsx for page layout
• components/patterns/top-bar.tsx for header pattern
• components/patterns/bottom-nav.tsx for navigation

1. Page 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 */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

1. Layout rules: