UI/UX Design
Published by eyadsibai in ltk
No known issues0 installs
What this skill does
This skill should be used when the user asks about "UI design", "UX design", "user interface", "user experience", "wireframes", "mockups", "design patterns", "design system", "component design", "layout", or mentions UI/UX decisions.
Add UI/UX Design to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "uiux-design" from https://github.com/eyadsibai/ltkInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/eyadsibai/ltk --skill uiux-designSkill instructions
UI/UX Design
Guidance for user interface and user experience design decisions.
Core Principles
Visual Hierarchy
Establish clear importance levels:
- Size: Larger elements draw attention first
- Color: Contrast guides the eye
- Spacing: White space creates groupings
- Position: Top-left reads first (in LTR languages)
Consistency
- Use consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px)
- Maintain consistent component patterns
- Follow platform conventions (Material, iOS, Web)
Feedback
Every action needs feedback:
- Immediate: Button press states
- Progress: Loading indicators
- Completion: Success/error messages
Layout Patterns
Card Layout
┌─────────────────┐
│ Image │
├─────────────────┤
│ Title │
│ Description │
│ [Action Button] │
└─────────────────┘
Use for: Collections, products, articles
List Layout
┌──┬──────────────┐
│##│ Title │
│ │ Subtitle │
└──┴──────────────┘
Use for: Settings, navigation, data tables
Dashboard Layout
┌────────┬────────┬────────┐
│ Metric │ Metric │ Metric │
├────────┴────────┴────────┤
│ Main Chart │
├─────────────┬────────────┤
│ Table │ Activity │
└─────────────┴────────────┘
Component Design
Buttons
| Type | Use Case |
|---|---|
| Primary | Main action (1 per view) |
| Secondary | Alternative actions |
| Tertiary/Ghost | Low-emphasis actions |
| Destructive | Delete, remove actions |
Forms
- Label above input (not placeholder-only)
- Show validation inline
- Group related fields
- Mark optional fields, not required
- Provide helpful error messages
Navigation
- Top nav: Global, persistent
- Side nav: Complex apps, many sections
- Bottom nav: Mobile, 3-5 items max
- Breadcrumbs: Deep hierarchies
Responsive Design
Breakpoints
/* Mobile first */
/* Default: Mobile (< 640px) */
@media (min-width: 640px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1280px) { /* Large desktop */ }
Adaptation Strategies
- Stack: Columns become rows on mobile
- Hide: Show/hide elements by importance
- Resize: Proportional scaling
- Reflow: Different layouts per breakpoint
Color Usage
Semantic Colors
| Color | Meaning |
|---|---|
| Blue | Primary actions, links |
| Green | Success, positive |
| Yellow/Orange | Warning, attention |
| Red | Error, destructive |
| Gray | Neutral, disabled |
Contrast Requirements
- Text on background: 4.5:1 minimum (WCAG AA)
- Large text: 3:1 minimum
- Interactive elements: 3:1 minimum
Typography
Scale
xs: 12px - Labels, captions
sm: 14px - Body small
base: 16px - Body default
lg: 18px - Body large
xl: 20px - Heading small
2xl: 24px - Heading medium
3xl: 30px - Heading large
4xl: 36px - Display
Line Height
- Headings: 1.2 - 1.3
- Body text: 1.5 - 1.6
- UI elements: 1.0 - 1.25
UX Patterns
Empty States
Show when no data:
- Friendly illustration
- Explain what goes here
- Provide action to add first item
Loading States
- Skeleton screens > spinners
- Progressive loading
- Optimistic UI when safe
Error Handling
- Explain what went wrong
- Suggest how to fix
- Provide recovery action
- Don't blame the user
Design Checklist
- Clear visual hierarchy
- Consistent spacing and alignment
- Responsive across devices
- Accessible color contrast
- Clear interactive states
- Helpful error messages
- Loading feedback
- Empty state design
Files included
- SKILL.md