ui-page

name	ui-page
description	Scaffold a new mobile page/screen using the StyleSeed layout patterns
risk	unknown
source	https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-page
source_repo	bitjaru/styleseed
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/bitjaru/styleseed/blob/main/LICENSE

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

2. 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=   */}
        =    */}
      />
      
        {/* Page sections with space-y-6 */}
      
      
    
  )
}