Frontend ux engineer

Skill DominikTobureto/awesome-grok-build/.grok/skills/frontend-ux-engineer

Grok Build resources, reusable .grok/skills, AGENTS.md templates, hooks, prompts, and starter workflows.

Install

npx -y skills add DominikTobureto/awesome-grok-build --skill frontend-ux-engineer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.

SKILL.md

1.8 KB, as published. Nobody here has run it

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.