Frontend Page Build

Use this skill for domain pages and page-specific components.

Read first

• ../../03-page-specs.md
• ../../04-data-contracts.md
• ../../05-design-system-and-rules.md
• ../../rules/frontend-rules.md

If the page touches payroll logic, also read:

• ../../../system-design2.md

Workflow

1. Pick the target route and confirm its page goal, sections, filters, and CTA from the page specs.
2. Reuse the shared shell instead of rebuilding layout inside the page.
3. Build page sections with shared UI primitives first.
4. Connect the page to typed mock data and formatters.
5. Add loading, empty, and error states before considering the page done.
6. Check responsive behavior for both desktop and narrow widths.

Page rules

• Use Vietnamese UI copy by default.