| name | frontend-ux-engineer |
| description | Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements. |
| version | 1.0.0 |
| author | awesome-grok-build |
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.
