UI Page & Responsive Component Builder

What it does

/build-page is a Cursor slash command. Type it in chat to run a saved workflow: UI Page & Responsive Component Builder.

Creates production-ready React 19 UI pages with Server Components, clean component hierarchies, CSS design tokens, loading skeletons, and accessibility.

Builds modern React 19 UI pages with Next.js App Router and responsive CSS. Unlike a skill, a command is something you invoke on purpose. The agent does not decide to run /build-page for you.

Why it exists

Founders retype the same multi-step prompt until it rots. /build-page exists so the pipeline, all 4 steps of it, is a file in .cursor/commands, versioned with the repo.

It ships in the Engineering Kit. It is wired to the React 19 & Next.js Specialist (react-specialist) and Design Systems & UI Specialist (design-engineer) agents. Required skills: Next.js App Router & Server Components; Design Systems, Tokens & Vanilla CSS Architecture; Web Performance & Core Web Vitals Optimization.

When to use it

• Use when building new dashboard views, settings panels, or marketing subpages.
• Use /build-page when you want that pipeline, not a freeform chat. If you only need one step, use a narrower command or a single agent.
• Start a new chat. Do not run this command in a thread that just wrote marketing copy.

When not to use it

• Do not run /build-page as a substitute for reading the diff. The command produces files; you still gate them.
• Do not chain it into a 40-turn chat. Fresh context is part of the design.
• Do not run it if you have not filled CURSOR.md. The pipeline will invent a stack.

Example workflow

1. Structure page layout with Next.js App Router conventions and metadata
2. Build modular presentation components using semantic HTML and CSS tokens
3. Add Suspense loading skeletons and error boundaries
4. Hook up client interactivity and optimistic UI state updates

Example usage

Type this in Cursor chat: /build-page Create user settings billing tab with active subscription cards and invoice history

The command file tells the session which agents to adopt and which skills to read. You should see phase headers, not a single dump of code.

If a phase fails its gate, stop. Do not add 'just continue'.

Example output

• Expected artifact: src/app/.../page.tsx
• Expected artifact: src/components/...

Best practices

• Keep the prompt specific. /build-page Create user settings billing tab with active subscription cards and invoice history is the shape: object, constraint, and outcome.
• Let the listed agents work in order: react-specialist → design-engineer.
• Save outputs in the repo. Chat-only answers evaporate.
• Engineering commands should leave tests or an audit note, not only implementation files.

Common mistakes

• Typing /build-page with no object ('do the thing'). The pipeline will guess.
• Re-running the command in the same chat after a failed gate instead of fixing the failing file.
• Editing the command file to skip review so it 'goes faster'.
• Skipping the Next.js App Router & Server Components skill that the command depends on.