UI Page

UI Page

Overview

Part of StyleSeed, this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.

When to Use

• Use when you need a new page in a Toss-seed app
• Use when you want a consistent page shell, spacing, and navigation structure
• Use when you are adding a new product flow and need a solid starting layout
• Use when you want to stay mobile-first even if the project later expands to larger breakpoints

How It Works

Step 1: Inspect the Existing Shell

Read the current page scaffolding patterns first, especially:

• page shell
• top bar
• bottom navigation
• representative pages using the same route family

Step 2: Define the Page Purpose

Clarify:

• the page name
• the primary user question the screen answers
• the top one or two actions the user should take

Every screen should have one dominant purpose.

Step 3: Use the Information Pyramid

Lay out the page from highest importance to lowest:

1. Hero or top summary
2. KPI or key actions
3. detail cards or supporting modules
4. lists, history, or secondary content

Avoid repeating the same section type mechanically from top to bottom.