{"enrichment":{"faq":[{"a":"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.","q":"What react ux design patterns does generic-react-ux-designer cover?"},{"a":"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.","q":"How do I build accessible react forms with this skill?"},{"a":"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.","q":"Can generic-react-ux-designer help with keyboard navigation?"},{"a":"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.","q":"How does generic-react-ux-designer handle animations?"},{"a":"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.","q":"What psychology principles does generic-react-ux-designer apply?"},{"a":"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.","q":"Does generic-react-ux-designer cover optimistic UI updates?"}],"shadow_tags":["interaction-design","a11y-compliance","motion-animation","form-validation","user-psychology","component-patterns","performance-optimization","error-handling","keyboard-support"],"summary_rewrite":"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."},"files":[{"bytes":8800,"path":"skills/generic-react-ux-designer/SKILL.md","sha256":"57fe1befaee48d6811e26943031fab1a341ad74fbe9fe18327fec0bccf5074e6","url":"https://skillfed.io/files/travisjneuman/.claude/generic-react-ux-designer/8d891094/SKILL.md"}],"id":"travisjneuman/.claude/generic-react-ux-designer","links":{"html":"https://skillfed.io/travisjneuman/.claude/generic-react-ux-designer","md":"https://skillfed.io/travisjneuman/.claude/generic-react-ux-designer.md","repo":"https://github.com/travisjneuman/.claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"JavaScript","last_updated":"2026-07-17","license":"MIT","name":"generic-react-ux-designer","publisher":"travisjneuman","stars":85},"relations":{"similar":[{"id":"travisjneuman/.claude/generic-react-design-system"},{"id":"patricio0312rev/skills/accessibility-auditor"},{"id":"xu-xiang/everything-claude-code-zh/frontend-patterns"},{"id":"liuchiawei/agent-skills/frontend-patterns"},{"id":"wshobson/agents/interaction-design"},{"id":"affaan-m/ECC/frontend-patterns"},{"id":"hoodini/ai-agents-skills/web-accessibility"},{"id":"elophanto/EloPhanto/interaction-design"},{"id":"affaan-m/ECC/motion-ui"},{"id":"patricio0312rev/skills/framer-motion-animator"}]},"slug":{"owner":"travisjneuman","repo":".claude","skill":"generic-react-ux-designer"},"version":"8d891094"}