Master UI/UX design skill combining Apple HIG, modern web design, SuperDesign patterns, and universal design principles for creating exceptional interfaces across all platforms.
The UI/UX Master skill is your comprehensive guide to designing beautiful, functional, and accessible user interfaces. It combines industry-leading design systems (Apple HIG, Material Design), modern web patterns, and universal UX principles into one powerful resource.
- 🎨 iOS/macOS Developers - Native Apple platform design
- 🌐 Web Designers - Modern responsive web interfaces
- 📱 Mobile App Developers - Touch-first interfaces
- 💻 Full-Stack Developers - End-to-end UI/UX
- 🎯 Product Designers - Cross-platform experiences
✅ Complete Apple HIG - iOS, macOS, watchOS, tvOS, visionOS
✅ Modern Web Design - Responsive, PWA, performance
✅ Color Systems - oklch(), semantic colors, dark mode
✅ Typography - SF fonts, web fonts, type scales
✅ Accessibility - WCAG AA/AAA compliance
✅ Animation - Motion principles, micro-interactions
✅ Component Library - Buttons, forms, cards, navigation
✅ Design Trends - Glassmorphism, Neo-brutalism
Platforms:
- iOS & iPadOS (Touch interfaces)
- macOS (Desktop applications)
- watchOS (Glanceable interfaces)
- Web (Responsive websites & apps)
- Progressive Web Apps (PWA)
Design Systems:
- Apple Human Interface Guidelines
- SuperDesign patterns
- Material Design principles
- Modern web design standards
- Color Theory - oklch color space, palettes, contrast
- Typography - Font pairing, type scales, web fonts
- Layout Systems - CSS Grid, Flexbox, 8pt grid
- Components - Buttons, forms, cards, navigation, modals
- Responsive Design - Mobile-first, breakpoints
- Dark Mode - Semantic colors, elevation strategies
- Accessibility - WCAG compliance, screen readers
- Animation - Durations, easing, motion principles
- Performance - Optimization, lazy loading
- ✅ Code examples (SwiftUI, CSS, HTML)
- ✅ ASCII wireframes for planning
- ✅ Design checklists
- ✅ Quick reference tables
- ✅ Tool recommendations
- ✅ Decision guides
clawdhub install ui-ux-master# Clone the repository
git clone https://github.com/kdbhalala/ui-ux-master.git
# Install via Clawdbot
clawdbot skill install ./ui-ux-master"Design an iOS settings screen with native components"
The skill will provide:
- iOS navigation patterns (Tab Bar, Navigation Bar)
- Native component guidelines
- SF Symbols integration
- Dark mode support
- Accessibility compliance
"Create a responsive landing page with glassmorphism"
The skill will provide:
- Mobile-first responsive layout
- Modern CSS (oklch colors, backdrop-filter)
- Performance optimization
- Accessibility guidelines
- Code examples
"Design an accessible form with validation"
The skill will provide:
- WCAG AA compliant design
- Form validation patterns
- Error message guidelines
- Keyboard navigation
- Screen reader support
ui-ux-master/
├── SKILL.md # Main skill guide (15KB)
├── README.md # This file
├── LICENSE # MIT License
└── references/ # Reference documentation (16 files)
├── apple-platforms.md # Complete Apple HIG
├── apple-ios.md # iOS patterns
├── apple-macos.md # macOS patterns
├── apple-watchos.md # watchOS patterns
├── web-design.md # Modern web patterns
├── color-systems.md # Color theory & palettes
├── typography.md # Font pairing & scales
├── layout-patterns.md # Grid systems & spacing
├── forms.md # Form design & validation
├── navigation-patterns.md # Navigation types
├── animation-guide.md # Motion principles
├── accessibility.md # WCAG compliance
├── responsive-design.md # Responsive patterns
├── dark-mode.md # Dark mode implementation
├── design-trends.md # Modern trends
└── tools-resources.md # Design tools & libraries
- SKILL.md - Complete skill documentation
- Apple Platforms - Apple HIG overview
- Web Design - Modern web patterns
- Color Systems - Color theory & implementation
- Accessibility - WCAG guidelines
1. Clarity Over Cleverness
- Information hierarchy is obvious
- Actions are predictable
- Feedback is immediate
2. Consistency Breeds Familiarity
- Patterns repeat across interface
- Terminology is uniform
- Visual language is coherent
3. Beauty Through Simplicity
- Every element serves a purpose
- White space creates breathing room
- Visual noise is minimized
4. Accessibility is Non-Negotiable
- Works for everyone
- Keyboard navigable
- Screen reader friendly
- High contrast options
// Native iOS button with SF Symbol
Button(action: { /* action */ }) {
Label("Save Changes", systemImage: "checkmark.circle.fill")
}
.buttonStyle(.borderedProminent)<div class="card glass">
<img src="image.jpg" alt="Description" />
<div class="card-body">
<h3>Card Title</h3>
<p>Card description goes here...</p>
<button class="btn-primary">Action</button>
</div>
</div>.card.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}<form>
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
name="email"
aria-required="true"
aria-describedby="email-help"
/>
<small id="email-help">We'll never share your email.</small>
</div>
<button type="submit">Submit</button>
</form>Contributions are welcome! Please feel free to submit a Pull Request.
- Follow the existing structure and format
- Add practical examples and code snippets
- Ensure accessibility compliance
- Test on multiple platforms
- Update documentation
- Additional platform patterns
- More code examples
- Design tool integrations
- Community best practices
- Accessibility improvements
- Design: Figma, Sketch, Adobe XD
- Icons: SF Symbols, Lucide, Heroicons
- Colors: oklch.com, coolors.co, contrast-ratio.com
- Fonts: Google Fonts, Adobe Fonts
MIT License - see LICENSE file for details.
Created with ❤️ by the Clawdbot community.
Built on top of:
- Apple Human Interface Guidelines
- SuperDesign patterns
- Modern web design principles
- Universal UX best practices
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- ClawdHub: ClawdHub Page
Made for Agent Skills | Compatible with Clawdbot