react-senior-ux

Guide React UX engineering with a four-step project kick-off framework.

Updated Jun 23, 2026

Search Tags:#a11y #react #project strategy #react-router #ux-engineering

Ready to run

npx skills add https://github.com/jaballer/react-claude-skills --skill react-senior-ux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-senior-ux
Source: https://github.com/jaballer/react-claude-skills/tree/main/react-senior-ux
Command: npx skills add https://github.com/jaballer/react-claude-skills --skill react-senior-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill serves as a strategic guide for senior-level UX Engineers working on React projects, helping them frame work, set mental models, and route to specialized skills as needed.

Core Features & Use Cases

Strategic Framework: Provides a four-step opening framework for project kick-off, including restate the brief, UX Engineer signal map, scope with MoSCoW, and picking a 'wow' detail.
Routing to Specialized Skills: Directs the user to the appropriate sub-skill based on the project's needs (e.g., component design, a11y, styling, performance).
Polish Phase: Offers guidelines for the production-hardening phase after building, focusing on testing, documentation, and deployment checks.

Quick Start

Use the react-senior-ux skill when starting a new React project by stating the brief, identifying the UX Engineer signal map, scoping with MoSCoW, and selecting a 'wow' detail.

Frequently Asked Questions about react-senior-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a React project kick-off for senior-level UX engineering?▼

To structure a React project kick-off for UX engineering, use a four-step framework: restate the brief, map UX signals, scope with MoSCoW, and pick a 'wow' detail. This sets a strong mental model for the project.

What is the MoSCoW method for scoping UX features in React?▼

The MoSCoW method for scoping UX features in React categorizes requirements into Must have, Should have, Could have, and Won't have. This framework helps senior UX engineers prioritize accessibility, performance, and component design tasks efficiently.

How do I handle accessibility and component design in a React application?▼

To handle accessibility and component design in a React application, use a senior UX engineering orchestrator to route to specialized sub-skills. This ensures production-hardening by focusing on a11y standards, styling, and performance outcomes.

Can I use react-router for production-hardening in UX engineering?▼

Yes, react-router is supported for production-hardening in UX engineering. The process includes testing, documentation, and deployment checks to ensure routing, component design, and accessibility meet user and business outcomes.

What's the best way to polish a React project for production?▼

The best way to polish a React project for production is to apply a dedicated hardening phase focusing on testing, documentation, and deployment checks. This ensures component design, a11y, and performance meet user and business outcomes.

Does this UX engineering approach work for existing React projects?▼

Yes, this UX engineering approach works for existing React projects by resetting the mental model, re-evaluating the UX signal map, and routing to specialized skills for component design, a11y, styling, and performance improvements.