ui-ux-designer
π―Skillfrom hummbl-dev/hummbl-claude-skills
|Designs beautiful, functional user interfaces by applying expert design principles, user research, interaction patterns, and accessibility standards.
Part of
hummbl-dev/hummbl-claude-skills(6 items)
Installation
git clone https://github.com/hummbl-dev/hummbl-claude-skills.gitSkill Details
Modern UI/UX design specialist for web applications, mobile apps, and design systems. Covers design principles, user research, interaction patterns, accessibility (WCAG), responsive design, component libraries (Tailwind, shadcn/ui, Material), prototyping, and usability testing. Creates beautiful, functional interfaces following best practices.
Overview
# UI/UX Designer Skill
Expert in modern user interface and user experience design for web and mobile applications. Provides comprehensive guidance on design principles, interaction patterns, accessibility, and implementation using modern frameworks and libraries.
Core Competencies
1. Design Principles
- Visual Hierarchy: Guide user attention with size, color, spacing, contrast
- Consistency: Maintain patterns across entire application
- Affordance: Design elements that suggest their function
- Feedback: Provide clear response to user actions
- White Space: Use breathing room to reduce cognitive load
- Typography: Choose readable fonts with proper sizing and spacing
- Color Theory: Create harmonious palettes with proper contrast
- Progressive Disclosure: Reveal complexity gradually
2. User Research & Analysis
- User Personas: Define target user archetypes
- User Journeys: Map complete user workflows
- Pain Points: Identify friction in current experience
- Task Analysis: Break down user goals into steps
- Competitive Analysis: Learn from similar products
- Usability Testing: Validate designs with real users
- A/B Testing: Compare design variations empirically
- Analytics Review: Use data to inform decisions
3. Interaction Patterns
- Navigation: Clear, predictable movement through app
- Forms: Efficient, error-tolerant data collection
- Feedback: Loading states, success/error messages
- Microinteractions: Small delightful moments
- Gestures: Touch and mouse interactions
- Transitions: Smooth, purposeful animations
- Empty States: Guide users when no content exists
- Errors: Helpful, actionable error messages
4. Accessibility (WCAG 2.1)
- Perceivable: Content available to all senses
- Operable: UI components usable by all
- Understandable: Information and operation clear
- Robust: Compatible with assistive technologies
- Color Contrast: 4.5:1 for normal text, 3:1 for large
- Keyboard Navigation: All functions keyboard-accessible
- Screen Readers: Semantic HTML, ARIA labels
- Focus Indicators: Clear visual focus states
5. Responsive Design
- Mobile First: Design for smallest screen, enhance up
- Breakpoints: Common: 640px, 768px, 1024px, 1280px
- Flexible Grids: Use relative units (%, rem, fr)
- Touch Targets: Minimum 44x44px for mobile
- Performance: Optimize for slow networks
- Progressive Enhancement: Core experience works everywhere
Modern Tech Stack
CSS Frameworks
Tailwind CSS (Recommended)
```html
Click Me
```
Benefits:
- Utility-first approach
- No CSS file bloat
- Rapid prototyping
- Consistent spacing/colors
- Easy responsive design
Component Libraries
shadcn/ui (Recommended for React)
- Accessible components (Radix UI primitives)
- Tailwind-styled
- Copy/paste, not npm install
- Full customization
Material UI (MUI)
- Comprehensive component set
- Material Design guidelines
- Enterprise-ready
- TypeScript support
Chakra UI
- Accessible by default
- Composable components
- Dark mode built-in
- Great developer experience
Design Tools
- Figma: Collaborative design (industry standard)
- Adobe XD: Adobe ecosystem integration
- Sketch: Mac-only, design systems
- Framer: Interactive prototypes
- Excalidraw: Quick wireframes
Icon Libraries
- Lucide: Modern, consistent (recommended)
- Heroicons: Tailwind-designed
- Feather: Minimal, clean
- Font Awesome: Comprehensive, classic
UI/UX Workflow
Phase 1: Research (20% of time)
- Understand Users
- Who are they?
- What are their goals?
- What's their context?
- Define Requirements
- Functional requirements
- Business goals
- Technical constraints
- Competitive Analysis
- What works well elsewhere?
- What should we avoid?
- Where's the opportunity?
Phase 2: Ideation (15% of time)
- Sketching
- Low-fidelity paper sketches
- Multiple approaches
- Quick iteration
- Wireframing
- Digital low-fidelity layouts
- Focus on structure, not style
- Tools: Figma, Excalidraw
- Information Architecture
- Content organization
- Navigation structure
- Page hierarchy
Phase 3: Design (30% of time)
- Visual Design
- Choose color palette
- Select typography
- Create components
- Design key screens
- Design System
- Define reusable components
- Document patterns
- Create style guide
- Prototyping
- Interactive mockups
- Test user flows
- Validate interactions
Phase 4: Implementation (30% of time)
- Component Development
- Build reusable components
- Implement responsive behavior
- Add accessibility features
- Integration
- Connect to backend
- Handle loading/error states
- Optimize performance
- Polish
- Smooth animations
- Microinteractions
- Edge case handling
Phase 5: Testing & Iteration (5% of time)
- Usability Testing
- Observe real users
- Identify issues
- Gather feedback
- Accessibility Audit
- Screen reader testing
- Keyboard navigation
- Color contrast check
- Performance Testing
- Load times
- Animation smoothness
- Mobile performance
Design System Template
Color Palette
```css
/ Primary Colors /
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;
/ Semantic Colors /
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
/ Neutrals /
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;
```
Typography Scale
```css
/ Tailwind default scale /
text-xs: 0.75rem (12px)
text-sm: 0.875rem (14px)
text-base: 1rem (16px)
text-lg: 1.125rem (18px)
text-xl: 1.25rem (20px)
text-2xl: 1.5rem (24px)
text-3xl: 1.875rem (30px)
text-4xl: 2.25rem (36px)
```
Spacing Scale
```css
/ Tailwind 4px base unit /
0: 0
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)
```
Component Variants
Button Sizes:
- Small: py-1.5 px-3 text-sm
- Medium: py-2 px-4 text-base
- Large: py-3 px-6 text-lg
Button Styles:
- Primary: bg-primary text-white
- Secondary: bg-gray-200 text-gray-900
- Ghost: bg-transparent hover:bg-gray-100
- Danger: bg-red-500 text-white
Common UI Patterns
Navigation
Top Nav (Desktop)
```html
```
Mobile Menu (Hamburger)
```html
```
Forms
Input Field
```html
Email address type="email" id="email" name="email" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com" required > We'll never share your email.
```
Form Validation
```html
This field is required
Looks good!
```
Cards
Basic Card
```html
Card Title Card description goes here. Learn more β
```
Modals/Dialogs
Modal Structure
```html
Modal content goes here. Cancel Confirm Modal Title
```
Loading States
Spinner
```html
```
Skeleton Loading
```html
```
Toasts/Notifications
Success Toast
```html
Successfully saved!
```
Accessibility Checklist
Essential Requirements β
- [ ] All images have alt text
- [ ] Forms have associated labels
- [ ] Color contrast meets WCAG AA (4.5:1)
- [ ] All interactive elements keyboard accessible
- [ ] Focus indicators visible
- [ ] Headings follow logical hierarchy (h1 β h2 β h3)
- [ ] ARIA labels for icon buttons
- [ ] Skip to main content link
- [ ] Error messages associated with inputs
- [ ] No information conveyed by color alone
Advanced Requirements β
- [ ] Screen reader tested (NVDA, JAWS, VoiceOver)
- [ ] Keyboard shortcuts documented
- [ ] Reduced motion respected (prefers-reduced-motion)
- [ ] High contrast mode supported
- [ ] Text can be resized to 200%
- [ ] Content reflows at 320px width
- [ ] Timeout warnings with extension option
- [ ] ARIA landmarks for page regions
Responsive Design Patterns
Mobile-First Approach
```html
Content
```
Responsive Grid
```html
```
Responsive Typography
```html
Responsive Heading
```
Show/Hide by Screen Size
```html
```
Animation Guidelines
Timing Functions
```css
/ Tailwind defaults /
ease-linear: linear
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1) / Best for entering /
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
```
Duration Guidelines
- Instant: <100ms (hover effects)
- Quick: 100-200ms (small transitions)
- Normal: 200-300ms (most transitions)
- Slow: 300-500ms (large movements)
- Avoid: >500ms (feels sluggish)
Common Transitions
```html
``` ```html Click me ``` ```javascript // Toggle function function toggleDarkMode() { document.documentElement.classList.toggle('dark'); localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; } // Initialize on load if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } ``` Problem: Inconsistent color usage, visual chaos Solution: Use a constrained palette (1 primary, 1-2 accent, neutrals) Problem: Elements feel unaligned, unprofessional Solution: Use 4px or 8px base unit, stick to spacing scale Problem: Text hard to read, fails accessibility Solution: Use contrast checker, aim for 4.5:1 minimum Problem: Hard to tap on mobile Solution: Minimum 44x44px for all interactive elements Problem: Users unsure if action worked Solution: Show spinners, disable buttons, provide feedback Problem: Broken on mobile Solution: Design mobile-first, test on real devices Problem: Screen readers can't navigate Solution: Associate labels, use semantic HTML, add ARIA Good UI/UX achieves: Poor UI/UX results in:Dark Mode Implementation
Tailwind Dark Mode
Dark Mode Toggle
Common Pitfalls & Solutions
Pitfall 1: Too Many Colors
Pitfall 2: Inconsistent Spacing
Pitfall 3: Poor Contrast
Pitfall 4: Tiny Touch Targets
Pitfall 5: No Loading States
Pitfall 6: Desktop-Only Design
Pitfall 7: Inaccessible Forms
Resources
Learning
Tools
Inspiration
Success Criteria
More from this repository5
Guides problem-solving by systematically applying 6 cognitive transformations to analyze, reframe, and solve complex challenges across different contexts.
Coordinates complex project management by generating military-style situation reports with structured status updates, task tracking, and clear multi-agent handoff protocols.
Provides comprehensive reference for 120 validated mental models across 6 transformations, enabling systematic problem-solving, model selection, and cognitive analysis.
Configures comprehensive GitHub repositories with production-grade standards, automating infrastructure, CI/CD, documentation, and community health setup.
Develops production-grade Model Context Protocol (MCP) servers with TypeScript, enabling seamless Claude Desktop integration through comprehensive server architecture and deployment.