Scaffold mobile-first pages with consistent layout structure

UI Page scaffolds complete pages or screens for Toss-seed applications using mobile-first composition rules from StyleSeed. It builds consistent page structures by integrating with existing shell components, top bars, bottom navigation, and card rhythm patterns rather than generating disconnected sections.

Use UI Page when you need a new page in a Toss-seed app that maintains consistent page shell, spacing, and navigation structure. It fits when adding a new product flow that requires a solid starting layout or when you want to stay mobile-first even if the project later expands to larger breakpoints.

Do not use this skill when the task does not clearly match the scope of scaffolding Toss-seed pages. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

You provide the page name, the primary user question the screen answers, and the top one or two actions the user should take. Every screen should have one dominant purpose.

The skill returns the page scaffold, the chosen section structure, reused components and any newly required components, and empty, loading, and error states that the page will need next.

The skill inspects existing shell scaffolding patterns including page shell, top bar, bottom navigation, and representative pages using the same route family. It defines the page purpose by clarifying the page name, primary user question, and top actions.

It applies the information pyramid, laying out the page from highest to lowest importance: hero or top summary, KPI or key actions, detail cards or supporting modules, and lists, history, or secondary content. It applies Toss layout rules with mobile viewport width around max-w-[430px], page background on bg-background, horizontal padding around px-6, section rhythm with space-y-6, generous bottom padding if a bottom nav is present, and cards using semantic surface tokens, rounded corners, and light shadows.

It composes using existing ui/ and patterns/ components wherever possible, orchestrating existing building blocks rather than recreating them. It accounts for real device constraints by handling safe-area insets, avoiding horizontal overflow, keeping interactive clusters thumb-friendly, and ensuring long content scrolls cleanly without clipping the bottom navigation.

Keep the first version structurally correct before adding decoration. Use one strong hero instead of multiple competing highlights. Preserve navigation consistency across sibling screens. Prefer reusable section components when the page will likely repeat.

Use this skill only when the task clearly matches the scope described. Do not treat the output as a substitute for environment-specific validation, testing, or expert review.