Psqasim UI Design Skill
Expert guidance for creating beautiful, accessible, and user-friendly interfaces.
Design Decision Framework
User Need → Information Architecture → Visual Hierarchy → Interaction Design → Accessibility Check
When to Use Which Technology
| Context | Technology | Reference |
|---|---|---|
| Phase I Console App | Rich library | rich-console-ui.md |
| Phase II Web App | Tailwind CSS | tailwind-patterns.md |
| Mobile/Responsive | Media queries | responsive-design.md |
Core Principles (Nielsen's Heuristics)
- Visibility of system status - Always show what's happening
- Match real world - Use familiar language and concepts
- User control - Provide undo, cancel, clear exits
- Consistency - Same actions = same results
- Error prevention - Prevent problems before they occur
- Recognition over recall - Show options, don't require memory
- Flexibility - Support both novice and expert users
- Aesthetic minimalism - Remove unnecessary information
- Error recovery - Clear error messages with solutions
- Help & documentation - Easy to search, task-focused
Visual Hierarchy Quick Reference
Typography Scale
Heading 1: 2.25rem (36px) - Page titles
Heading 2: 1.875rem (30px) - Section headers
Heading 3: 1.5rem (24px) - Subsections
Body: 1rem (16px) - Main content
Small: 0.875rem (14px) - Secondary info
Caption: 0.75rem (12px) - Labels, hints
Color Usage
Primary: Brand identity, main CTAs
Secondary: Supporting actions
Success: Confirmations, completions (green)
Warning: Caution states (yellow/amber)
Error: Failures, destructive actions (red)
Neutral: Text, backgrounds, borders
Spacing Scale (8px base)
xs: 4px (0.25rem)
sm: 8px (0.5rem)
md: 16px (1rem)
lg: 24px (1.5rem)
xl: 32px (2rem)
2xl: 48px (3rem)
Console UI Quick Start (Rich)
from rich.console import Console
from rich.table import Table
from rich.panel import Panel
from rich.prompt import Prompt, Confirm
console = Console()
# Status messages
console.print("[green]✓[/green] Task completed")
console.print("[red]✗[/red] Error occurred")
console.print("[yellow]![/yellow] Warning message")
# Data display
table = Table(title="Tasks")
table.add_column("ID", style="dim")
table.add_column("Title", style="bold")
table.add_column("Status")
table.add_row("1", "Buy groceries", "[green]Done[/green]")
console.print(table)
# User input
name = Prompt.ask("Enter task name")
confirm = Confirm.ask("Delete this task?")
Web UI Quick Start (Tailwind)
<!-- Card Component -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<h3 class="text-lg font-semibold text-gray-900">Task Title</h3>
<p class="text-gray-600 mt-2">Task description here</p>
<div class="mt-4 flex gap-2">
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
Complete
</button>
<button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
Edit
</button>
</div>
</div>
Accessibility Checklist
- Color contrast ratio ≥ 4.5:1 for text
- All interactive elements keyboard accessible
- Focus states visible and clear
- Images have alt text
- Form inputs have labels
- Error messages announced to screen readers
- Heading hierarchy is logical (h1 → h2 → h3)
- Touch targets ≥ 44x44 pixels
References
- Design Principles - User-centered design, mental models, feedback
- Rich Console UI - Tables, panels, progress bars, prompts
- Tailwind Patterns - Components, utilities, dark mode
- Responsive Design - Breakpoints, mobile-first, layouts
- Accessibility (WCAG) - ARIA, keyboard nav, screen readers
- Design Systems - Tokens, components, documentation