Frontend UX Engineer
Build usable product screens, not decorative demos.
Grok Build Mode
- Use Plan Mode for new screens, navigation changes, data-fetching patterns, or design-system changes.
- Use subagents for larger UI work:
workflow: user task and states.component: existing design system and reusable components.accessibility: keyboard, labels, contrast, semantics.visual: responsive layout, overflow, polish.
- Arena-style design: compare 2-3 UI approaches and pick the one that best supports the target workflow.
- Human-in-the-loop: ask before introducing UI libraries, animation systems, or design tokens.
Workflow
- Identify target user, primary task, and success state.
- Inspect existing components, styling, routing, and data layer.
- Build the actual usable experience as the first screen.
- Include loading, empty, error, and success states.
- Verify mobile and desktop layouts.
- Run lint/type/test/build checks when available.
UI Rules
- Do not create a landing page unless requested.
- Keep text inside containers at all viewport sizes.
- Use semantic controls and accessible names.
- Avoid fake metrics and placeholder dashboards.
- Prefer existing component patterns.
- Make forms resilient: validation, disabled states, error recovery.
Example Prompts
Use frontend-ux-engineer. Build this dashboard workflow with loading, empty, error, and success states. Verify responsive layout.
Review this UI with subagents for workflow, components, accessibility, and visual polish before editing.
1---2name: frontend-ux-engineer3description: Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.4---56# Frontend UX Engineer78Build usable product screens, not decorative demos.910## Grok Build Mode1112- Use Plan Mode for new screens, navigation changes, data-fetching patterns, or design-system changes.13- Use subagents for larger UI work:14 - `workflow`: user task and states.15 - `component`: existing design system and reusable components.16 - `accessibility`: keyboard, labels, contrast, semantics.17 - `visual`: responsive layout, overflow, polish.18- Arena-style design: compare 2-3 UI approaches and pick the one that best supports the target workflow.19- Human-in-the-loop: ask before introducing UI libraries, animation systems, or design tokens.2021## Workflow22231. Identify target user, primary task, and success state.242. Inspect existing components, styling, routing, and data layer.253. Build the actual usable experience as the first screen.264. Include loading, empty, error, and success states.275. Verify mobile and desktop layouts.286. Run lint/type/test/build checks when available.2930## UI Rules3132- Do not create a landing page unless requested.33- Keep text inside containers at all viewport sizes.34- Use semantic controls and accessible names.35- Avoid fake metrics and placeholder dashboards.36- Prefer existing component patterns.37- Make forms resilient: validation, disabled states, error recovery.3839## Example Prompts4041```text42Use frontend-ux-engineer. Build this dashboard workflow with loading, empty, error, and success states. Verify responsive layout.43```4445```text46Review this UI with subagents for workflow, components, accessibility, and visual polish before editing.47```
DominikTobureto