Scaffold mobile-first pages with consistent layout structure

UI Page is a skill from the StyleSeed project that scaffolds a new mobile page or screen using the StyleSeed layout patterns. It takes a page name and a description as arguments and creates a page composed from the design system's existing components. It is marked as critical risk in its metadata and is MIT licensed.

The skill instructs the agent to read the design system reference before writing anything: the CLAUDE.md file for file structure and conventions, the page shell pattern for page layout, the top bar pattern for the header and the bottom navigation pattern for navigation. The page then follows a template built from a PageShell wrapper, a TopBar with an optional logo or title, subtitle and actions, a PageContent area where sections are spaced apart, and a BottomNav with navigation items and an active index.

import { PageShell, PageContent } from "@/components/patterns/page-shell"

Use it when you need to scaffold a new mobile page or screen following the StyleSeed layout patterns.

The skill lists when not to use it. For a single composed pattern within an existing page, use the separate ss-pattern command. For desktop-only screens, this skill does not fit, because it is mobile-first. For a multi-page navigation structure, use ss-flow first. For tweaking an existing page, edit the file directly. Its Limitations section adds that it should only be used when the task clearly matches its upstream source and local project context, that commands, generated code, dependencies and credentials should be verified before applying changes, and that examples do not replace environment-specific tests, security review or approval for destructive or costly actions.

The inputs are the page name and a free-text description. The output is a page file that uses existing components from the ui and patterns folders wherever possible.

The layout rules are specific:

• the container uses a max width of 430 pixels, matching a mobile viewport
• the page background uses the background token
• sections have horizontal padding of px-6 and vertical spacing of space-y-6
• the page reserves pb-24 of bottom padding for the navigation bar
• cards use the card background token, rounded-2xl corners, p-6 padding and the card shadow variable

All colors must come from semantic tokens and never from hardcoded hex values. The page should also include safe-area inset padding for modern devices.

Post-generation verification is mandatory. After creating the page, the agent checks it against the Golden Rules: all content sits inside cards with no bare background content; only the brand color is used for accents; there are no hardcoded hex values; section types alternate with no two identical types in a row; numbers keep a 2 to 1 ratio with their units; spacing uses 6 pixel multiples; mx-6 is used for single cards while px-6 is used for grids and carousels; and touch targets are at least 44 pixels on all interactive elements. Any violation must be fixed before the page is presented to the user.