Ui Page

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 background on bg-background
• horizontal padding around px-6
• section rhythm with space-y-6
• generous bottom padding if a bottom nav is present
• cards using semantic surface tokens, rounded corners, and light shadows

Step 5: Compose Instead of Rebuilding

Use existing ui/ and patterns/ components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.

Step 6: Account for Real Device Constraints

• handle safe-area insets
• avoid horizontal overflow
• keep interactive clusters thumb-friendly
• ensure long content scrolls cleanly without clipping the bottom navigation

Output

Return:

1. The page scaffold
2. The chosen section structure
3. Reused components and any newly required components
4. Empty, loading, and error states that the page will need next

Best Practices

• 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

Additional Resources

• StyleSeed repository
• Source skill

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.