React Web App (Components, Pages, Layout)

Use this skill whenever you are editing React/TSX code in the web app (creating or modifying components, pages, header/footer, or layout).

Step 1 — Identify the type of component

Determine which of these three categories the request falls into, then follow the corresponding section below:

• Page — user wants a new routed page (e.g. "add a contacts page", "create a dashboard page", "add a settings section")
• Header / Footer — user wants a site-wide header, footer, nav bar, or page footer that appears on every page
• Component — everything else: a widget, card, table, form, dialog, or other UI element placed within an existing page

If it is not immediately clear from the user's message, ask:

"Are you looking to add a new page, a site-wide header or footer, or a component within an existing page?"

Then follow the matching section.