UI/UX Guidelines
Overview
This skill defines UI/UX standards for consistent, usable, and visually coherent interfaces across all user-facing applications. Good UI/UX reduces user errors, increases satisfaction, and reflects quality in the product.
When to Use
- When designing new screens, pages, or components
- When building or modifying existing user interfaces
- When reviewing UI designs or implementations
- When creating or updating design systems
- Don't use when: Building backend-only services with no user interface
Core Procedures
Step 1: Visual Hierarchy
- Most important elements are most prominent
- Related elements grouped visually
- Clear distinction between primary and secondary actions
- Use size, color, spacing, and weight to guide attention
- Maximum 3 levels of hierarchy per screen
Step 2: Layout Standards
- Consistent grid system across all screens
- Adequate whitespace (minimum 8px base unit)
- Content aligned to consistent columns
- Maximum content width for readability (80-100 characters per line)
- Responsive breakpoints: mobile (<768px), tablet (768-1024px), desktop (>1024px)
Step 3: Interaction Patterns
- Buttons have clear primary/secondary/danger states
- Loading states always shown during async operations
- Success/error confirmation after user actions
- Undo available for destructive actions
- Consistent interaction for common patterns (forms, lists, dialogs, navigation)
Step 4: Content Guidelines
- Use plain language, avoid technical jargon
- Error messages tell users what happened AND how to fix it
- Labels are action-oriented ("Save changes" not "Submit")
- Empty states explain what to do next
- Confirmation dialogs state what will happen clearly
Step 5: Color and Typography
| Level |
Usage |
Example |
| Primary Actions |
Main call-to-action |
Save, Submit, Create |
| Secondary Actions |
Alternative actions |
Cancel, Back, Skip |
| Danger Actions |
Destructive actions |
Delete, Remove, Revoke |
| Information |
Status, hints, help text |
Info boxes, tooltips |
| Success |
Positive confirmations |
"Saved", "Complete" |
| Warning |
Caution, potential issues |
"Unsaved changes" |
Typography:
- Maximum 3 typeface sizes per screen
- Body text minimum 14px, headings scale 1.25x
Step 6: Component Consistency
- Use shared component library where available
- Custom components follow existing patterns
- Spacing, colors, and behavior consistent with design system
- States (disabled, loading, error) visually distinct
Quality Checklist
Error Handling
- Error: UI breaks at certain screen sizes
Response: Test at all breakpoints, fix responsive behavior, add regression test
- Error: Component looks inconsistent with rest of app
Response: Check design system, align with shared components, update custom styles
Cross-Team Integration
Related Skills: accessibility-standards, element-styling-reference, testing-strategy, feedback-integration
Used By: Design agents, frontend developers, UX specialists, creative agents, UI agents, Dev (Loopy AI)
1---2name: ui-ux-guidelines3description: Use when designing or building any user interface to ensure consistency, usability, and visual quality across all user-facing applications. This skill provides core UI/UX principles and standards for the enterprise ecosystem.4---56# UI/UX Guidelines78## Overview9This skill defines UI/UX standards for consistent, usable, and visually coherent interfaces across all user-facing applications. Good UI/UX reduces user errors, increases satisfaction, and reflects quality in the product.1011## When to Use12- When designing new screens, pages, or components13- When building or modifying existing user interfaces14- When reviewing UI designs or implementations15- When creating or updating design systems16- **Don't use when:** Building backend-only services with no user interface1718## Core Procedures1920### Step 1: Visual Hierarchy21- Most important elements are most prominent22- Related elements grouped visually23- Clear distinction between primary and secondary actions24- Use size, color, spacing, and weight to guide attention25- Maximum 3 levels of hierarchy per screen2627### Step 2: Layout Standards28- Consistent grid system across all screens29- Adequate whitespace (minimum 8px base unit)30- Content aligned to consistent columns31- Maximum content width for readability (80-100 characters per line)32- Responsive breakpoints: mobile (<768px), tablet (768-1024px), desktop (>1024px)3334### Step 3: Interaction Patterns35- Buttons have clear primary/secondary/danger states36- Loading states always shown during async operations37- Success/error confirmation after user actions38- Undo available for destructive actions39- Consistent interaction for common patterns (forms, lists, dialogs, navigation)4041### Step 4: Content Guidelines42- Use plain language, avoid technical jargon43- Error messages tell users what happened AND how to fix it44- Labels are action-oriented ("Save changes" not "Submit")45- Empty states explain what to do next46- Confirmation dialogs state what will happen clearly4748### Step 5: Color and Typography49| Level | Usage | Example |50|-------|-------|---------|51| Primary Actions | Main call-to-action | Save, Submit, Create |52| Secondary Actions | Alternative actions | Cancel, Back, Skip |53| Danger Actions | Destructive actions | Delete, Remove, Revoke |54| Information | Status, hints, help text | Info boxes, tooltips |55| Success | Positive confirmations | "Saved", "Complete" |56| Warning | Caution, potential issues | "Unsaved changes" |5758Typography:59- Maximum 3 typeface sizes per screen60- Body text minimum 14px, headings scale 1.25x6162### Step 6: Component Consistency63- Use shared component library where available64- Custom components follow existing patterns65- Spacing, colors, and behavior consistent with design system66- States (disabled, loading, error) visually distinct6768## Quality Checklist69- [ ] Visual hierarchy clearly guides user attention70- [ ] Layout is responsive and works at all breakpoints71- [ ] All interactive elements have visible states72- [ ] Error/success/loading states handled73- [ ] Content uses plain language74- [ ] Colors used semantically and consistently75- [ ] Typography follows type scale7677## Error Handling78- **Error:** UI breaks at certain screen sizes79 **Response:** Test at all breakpoints, fix responsive behavior, add regression test80- **Error:** Component looks inconsistent with rest of app81 **Response:** Check design system, align with shared components, update custom styles8283## Cross-Team Integration84**Related Skills:** accessibility-standards, element-styling-reference, testing-strategy, feedback-integration85**Used By:** Design agents, frontend developers, UX specialists, creative agents, UI agents, Dev (Loopy AI)
Construct-AI-primary