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
Decision gist · record as of 2026-07-17
generic-react-ux-designer provides UX patterns and accessibility guidance for building interactive React components. 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.
Use it when
- generic-react-ux-designer teaches form design with validation and error feedback, covering semantic HTML, ARIA labels, and focus management.
- Yes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
travisjneuman/.claude/generic-react-ux-designer · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/generic-react-ux-designer/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Design accessible, interactive React components with proper UX patterns”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill provides a complete design system for React applications, featuring Tailwind configuration, reusable component patterns, and dark mode support. It covers visual effects like glassmorphism and GPU-accelerated animations via Framer Motion, plus accessibility patterns including focus states and skip links.
This skill equips you to systematically evaluate web applications for accessibility compliance, pinpointing WCAG 2.1 violations and usability barriers that affect users with disabilities. It provides structured auditing capabilities to assess color contrast, keyboard navigation, semantic markup, and assistive technology compatibility, helping teams build more inclusive digital experiences.
This skill helps you evaluate your website's accessibility posture by detecting common compliance violations and usability barriers. It surfaces issues that impact visitors with disabilities, then provides clear recommendations to improve inclusivity and meet standards like WCAG.
This skill provides expert UI/UX design guidance emphasizing collaborative decision-making and accessibility. It helps you move beyond generic SaaS patterns by offering practical frameworks for color, typography, spacing, and animation grounded in core design principles like simplicity, material honesty, and functional layering.
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
Apply proven usability principles to audit interfaces and pinpoint friction. This skill scores your design against Krug's core laws—clarity, confidence-building navigation, and concise copy—plus Nielsen's heuristics for system feedback and user control. Get severity ratings for each issue and specific fixes to reach 10/10.
More skills UX Designer (MIT) · Visual Designer (MIT) · generic-fullstack-design-system (MIT)