generic-react-ux-designer
This skill extends core UX design principles into React-specific implementation, offering patterns for micro-interactions, loading states, optimistic UI, and keyboard navigation. It emphasizes accessibility through focus management, motion preferences, and semantic HTML, plus form handling with validation and error states.
generic-react-ux-designer provides UX patterns and accessibility guidance for building interactive React components.
AI-generated summary based on this skill's SKILL.md
Install
travisjneuman/.claude/generic-react-ux-designer · repository language: JavaScript
git clone https://github.com/travisjneuman/.claude
cp -r .claude/skills/generic-react-ux-designer ~/.claude/skills/generic-react-ux-designernpx skillfed install travisjneuman/.claude/generic-react-ux-designerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What react ux design patterns does generic-react-ux-designer cover?
generic-react-ux-designer extends core UX design principles into React-specific implementation, offering patterns for micro-interactions, loading states, optimistic UI, and keyboard navigation. It emphasizes accessible, interactive components with proper UX patterns, including empty states, error handling, and skeleton screens that guide users through common workflows.
How do I build accessible react forms with this skill?
generic-react-ux-designer teaches form design with validation and error feedback, covering semantic HTML, ARIA labels, and focus management. It includes best practices for error state handling, user-friendly validation messaging, and integration patterns like React Hook Form to create forms that work for all users, including keyboard and screen reader users.
Can generic-react-ux-designer help with keyboard navigation?
Yes. The skill implements keyboard navigation and focus management for React apps, including focus traps for modals, focus restoration after interactions, and proper tab order. It covers dialog patterns with A11y compliance, command palette implementation, and ensuring all interactive components are fully keyboard accessible.
How does generic-react-ux-designer handle animations?
generic-react-ux-designer creates smooth animations and micro-interactions with Framer Motion, including toast notifications, loading transitions, and component animation performance optimization. It respects user preferences like prefers-reduced-motion to ensure animations enhance rather than hinder the experience for all users.
What psychology principles does generic-react-ux-designer apply?
generic-react-ux-designer applies user psychology principles including Hick's Law (reducing decision complexity), Fitts's Law (target sizing and spacing), and Jakob's Law (leveraging user expectations). These inform component design, interaction patterns, and information architecture to reduce cognitive load and improve usability.
Does generic-react-ux-designer cover optimistic UI updates?
Yes. generic-react-ux-designer covers optimistic UI updates in React, showing immediate feedback to users before server confirmation. Combined with loading states, skeleton screens, and proper error recovery patterns, it creates responsive interfaces that feel fast and maintain user confidence even during network delays.
SKILL.md
rendered from the published skill — quoted content, verbatim
React UX Designer
Professional UX expertise for React/TypeScript applications.
Extends: Generic UX Designer - Read base skill for design thinking process, user psychology, heuristic evaluation, and research methods.
React Interaction Patterns
Micro-interactions with Framer Motion
```tsx // Checkbox animation <motion.div animate={{ scale: checked ? 1 : 0 }} transition={{ type: "spring", stiffness: 500 }} > <Check className="w-4 h-4" /> </motion.div>
// Button press feedback <motion.button whileTap={{ scale: 0.98 }} whileHover={{ scale: 1.02 }} transition={{ type: "spring", stiffness: 400 }} > Click me </motion.button>
// Toast notification <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0,
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/generic-react-ux-designer/SKILL.md