ui-page

# UI Page ## Overview Part of [StyleSeed](https://github.com/bitjaru/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. ### Step 4: Apply the Toss Layout Rules Default layout choices: - mobile viewport width around `max-w-[430px]` - page backgr...