docs: add comprehensive frontend landing page plan and download design skills
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
This commit is contained in:
Luca Sacchi Ricciardi
45
.opencode/skills/ui-ux-master/references/accessibility.md
Normal file
45
.opencode/skills/ui-ux-master/references/accessibility.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# Accessibility Guidelines
|
||||
|
||||
Complete WCAG compliance guide and accessibility best practices.
|
||||
|
||||
## WCAG 2.1 Levels
|
||||
|
||||
**Level A (Minimum):**
|
||||
- Basic accessibility features
|
||||
- Text alternatives for images
|
||||
- Keyboard accessible
|
||||
|
||||
**Level AA (Standard):**
|
||||
- 4.5:1 contrast for text
|
||||
- Resize text to 200%
|
||||
- Focus visible
|
||||
- **Most websites target AA**
|
||||
|
||||
**Level AAA (Enhanced):**
|
||||
- 7:1 contrast for text
|
||||
- Audio descriptions for video
|
||||
- Sign language for audio
|
||||
|
||||
## Quick Checklist
|
||||
|
||||
✅ Alt text for images
|
||||
✅ Keyboard navigable (Tab, Enter, Esc, Arrows)
|
||||
✅ Focus visible (outline or custom)
|
||||
✅ Color contrast meets AA (4.5:1 text, 3:1 UI)
|
||||
✅ Headings in logical order (h1 → h2 → h3)
|
||||
✅ ARIA labels for interactive elements
|
||||
✅ Forms have labels
|
||||
✅ Error messages clear and helpful
|
||||
✅ Reduce motion respected
|
||||
✅ Screen reader tested
|
||||
|
||||
## Testing Tools
|
||||
|
||||
- **axe DevTools** (browser extension)
|
||||
- **WAVE** (web accessibility evaluation)
|
||||
- **Lighthouse** (Chrome DevTools)
|
||||
- **Screen readers:** NVDA (Win), VoiceOver (Mac/iOS), JAWS (Win)
|
||||
|
||||
---
|
||||
|
||||
*See SKILL.md for implementation details*
|
||||
@@ -0,0 +1,7 @@
|
||||
# Animation Guide
|
||||
|
||||
Duration: 100-600ms
|
||||
Easing: ease-out (most), spring (playful)
|
||||
Principles: Anticipation, follow-through, continuity
|
||||
|
||||
*See SKILL.md for complete patterns*
|
||||
466
.opencode/skills/ui-ux-master/references/apple-ios.md
Normal file
466
.opencode/skills/ui-ux-master/references/apple-ios.md
Normal file
@@ -0,0 +1,466 @@
|
||||
# iOS Design Patterns
|
||||
|
||||
Complete guide to iOS-specific design patterns, layouts, and interactions.
|
||||
|
||||
## Table of Contents
|
||||
1. Navigation Patterns
|
||||
2. Layout Patterns
|
||||
3. Data Display
|
||||
4. User Input
|
||||
5. Modality
|
||||
6. Gestures & Haptics
|
||||
|
||||
---
|
||||
|
||||
## 1. Navigation Patterns
|
||||
|
||||
### Tab Bar
|
||||
**Use when:** App has 3-5 primary, peer-level destinations
|
||||
|
||||
**Characteristics:**
|
||||
- Always visible at bottom of screen
|
||||
- Icons + text labels (optional text on iPhone landscape)
|
||||
- Max 5 tabs (More tab for additional items)
|
||||
- Badge notifications supported
|
||||
|
||||
**Best Practices:**
|
||||
- Use recognizable SF Symbols
|
||||
- Keep labels short (1-2 words)
|
||||
- Highlight selected tab with accent color
|
||||
- Persist selection across app launches
|
||||
|
||||
### Navigation Bar
|
||||
**Use when:** Hierarchical content with parent-child relationships
|
||||
|
||||
**Characteristics:**
|
||||
- At top of screen
|
||||
- Large title (iOS 11+) or inline title
|
||||
- Back button (automatic)
|
||||
- Trailing actions (buttons, menus)
|
||||
|
||||
**Styles:**
|
||||
- **Large Title:** Scrolls to inline when content scrolls
|
||||
- **Inline:** Compact, always visible
|
||||
- **Transparent:** Blends with content
|
||||
|
||||
### Search
|
||||
**Use when:** Content is searchable or filterable
|
||||
|
||||
**Placement:**
|
||||
- In navigation bar (iOS 11+)
|
||||
- As first row in list
|
||||
- As overlay (full screen)
|
||||
|
||||
**Features:**
|
||||
- Search suggestions
|
||||
- Scopes (filter tabs)
|
||||
- Recent searches
|
||||
- Cancel button
|
||||
|
||||
### Sidebar (iPad)
|
||||
**Use when:** iPad app with multiple sections
|
||||
|
||||
**Characteristics:**
|
||||
- Leading edge of screen
|
||||
- Collapsible on smaller iPads
|
||||
- Persistent on larger iPads (landscape)
|
||||
- Can replace tab bar for complex navigation
|
||||
|
||||
---
|
||||
|
||||
## 2. Layout Patterns
|
||||
|
||||
### Safe Area
|
||||
**Critical zones:**
|
||||
- Top: Status bar (44pt), notch, Dynamic Island
|
||||
- Bottom: Home indicator (34pt)
|
||||
- Leading/trailing: 20pt margins (avoid too close to edges)
|
||||
|
||||
**SwiftUI:**
|
||||
```swift
|
||||
.safeAreaInset(edge: .bottom) { /* content */ }
|
||||
.ignoresSafeArea() // when needed
|
||||
```
|
||||
|
||||
### Size Classes
|
||||
**Compact Width:**
|
||||
- iPhone portrait (all sizes)
|
||||
- iPhone landscape (smaller models)
|
||||
|
||||
**Regular Width:**
|
||||
- iPad portrait/landscape
|
||||
- iPhone landscape (Plus/Max/Pro Max models)
|
||||
|
||||
**Compact Height:**
|
||||
- iPhone landscape
|
||||
|
||||
**Regular Height:**
|
||||
- iPhone portrait
|
||||
- iPad portrait/landscape
|
||||
|
||||
**Adaptive strategy:**
|
||||
- Compact width → Stack vertically, single column
|
||||
- Regular width → Multi-column, sidebars
|
||||
|
||||
### Margins & Spacing
|
||||
**Standard spacing:**
|
||||
- **16pt:** iPhone margins (edge to content)
|
||||
- **20pt:** iPad margins
|
||||
- **8pt:** Small spacing (related items)
|
||||
- **16pt:** Medium spacing (groups)
|
||||
- **24pt:** Large spacing (sections)
|
||||
|
||||
### Grid
|
||||
**8pt grid system:**
|
||||
- Base unit: 8pt
|
||||
- Text: multiples of 8pt line height
|
||||
- Icons: 20pt, 24pt, 28pt, 32pt
|
||||
- Touch targets: min 44×44pt
|
||||
|
||||
---
|
||||
|
||||
## 3. Data Display
|
||||
|
||||
### Lists
|
||||
**Styles:**
|
||||
- **Inset Grouped** (modern, default iOS 13+)
|
||||
- **Grouped** (legacy, full-width headers)
|
||||
- **Plain** (edge-to-edge rows, iOS Settings style)
|
||||
|
||||
**Row Types:**
|
||||
- Text only
|
||||
- Text + detail (trailing or subtitle)
|
||||
- Text + icon/image
|
||||
- Custom (any view)
|
||||
|
||||
**Swipe Actions:**
|
||||
- Leading actions (swipe right)
|
||||
- Trailing actions (swipe left)
|
||||
- Destructive action (red, at end)
|
||||
|
||||
**Features:**
|
||||
- Pull to refresh
|
||||
- Infinite scroll (pagination)
|
||||
- Section headers/footers
|
||||
- Index (A-Z sidebar)
|
||||
|
||||
### Grids (Collection Views)
|
||||
**Layouts:**
|
||||
- **Flow:** Wrapping grid (photos, products)
|
||||
- **Columns:** Fixed columns (2, 3, 4)
|
||||
- **Waterfall:** Pinterest-style (variable heights)
|
||||
|
||||
**Spacing:**
|
||||
- 8-16pt between items
|
||||
- 16-20pt section insets
|
||||
|
||||
### Cards
|
||||
**Use when:** Grouping related content visually
|
||||
|
||||
**Characteristics:**
|
||||
- Rounded corners (8-12pt radius)
|
||||
- White/system background
|
||||
- Subtle shadow (avoid heavy shadows)
|
||||
- Padding: 12-16pt
|
||||
|
||||
**Interactive cards:**
|
||||
- Tappable (full card acts as button)
|
||||
- Long press for context menu
|
||||
- Swipe gestures
|
||||
|
||||
---
|
||||
|
||||
## 4. User Input
|
||||
|
||||
### Text Fields
|
||||
**Types:**
|
||||
- Plain (underline)
|
||||
- Rounded border
|
||||
- Square border (macOS-like)
|
||||
|
||||
**Keyboard Types:**
|
||||
- Default, email, URL, number pad, phone pad, decimal pad
|
||||
|
||||
**Features:**
|
||||
- Placeholder text
|
||||
- Clear button (×)
|
||||
- Left/right accessory views
|
||||
- Input validation (inline or on submit)
|
||||
|
||||
### Buttons
|
||||
**Styles (iOS 15+):**
|
||||
- **Filled:** Primary action (blue background)
|
||||
- **Tinted:** Secondary action (tinted background)
|
||||
- **Gray:** Tertiary action (gray background)
|
||||
- **Plain:** Text-only, least prominent
|
||||
|
||||
**Sizes:**
|
||||
- Small, Medium (default), Large
|
||||
- Width: Flexible, Compact
|
||||
|
||||
**Prominence:**
|
||||
- Large filled → Most important
|
||||
- Plain → Least important
|
||||
|
||||
### Pickers
|
||||
**Types:**
|
||||
- **Wheel:** Inline scrolling (Date, Time)
|
||||
- **Menu:** Dropdown (Compact, iOS 14+)
|
||||
- **Inline:** Expanded menu (iOS 14+)
|
||||
|
||||
**Date Picker:**
|
||||
- Wheel (default)
|
||||
- Compact (badge with popover)
|
||||
- Graphical (calendar, iOS 14+)
|
||||
|
||||
### Toggles & Switches
|
||||
**Switch:**
|
||||
- On/off only
|
||||
- Green (on), gray (off)
|
||||
- Label on leading side
|
||||
|
||||
**Toggle Button:**
|
||||
- Multi-state (3+ options)
|
||||
- Use segmented control or picker
|
||||
|
||||
### Segmented Control
|
||||
**Use when:** 2-5 mutually exclusive options
|
||||
|
||||
**Styles:**
|
||||
- Standard (iOS default)
|
||||
- Plain text
|
||||
- Icon + text
|
||||
- Icon only
|
||||
|
||||
---
|
||||
|
||||
## 5. Modality
|
||||
|
||||
### Sheets
|
||||
**Use when:** Secondary task without leaving context
|
||||
|
||||
**Presentation:**
|
||||
- Medium detent (half screen, iOS 15+)
|
||||
- Large detent (full screen)
|
||||
- Custom heights
|
||||
|
||||
**Dismissal:**
|
||||
- Swipe down
|
||||
- Close button (if needed)
|
||||
- Tap outside (non-blocking)
|
||||
|
||||
**Best practices:**
|
||||
- Use medium detent when possible
|
||||
- Add grabber indicator
|
||||
- Avoid nested sheets
|
||||
|
||||
### Full Screen Modal
|
||||
**Use when:** Critical task requiring full attention
|
||||
|
||||
**Navigation:**
|
||||
- **Done:** Complete and dismiss
|
||||
- **Cancel:** Discard and dismiss
|
||||
- **< Back:** Multi-step modal (nav stack)
|
||||
|
||||
**Presentation Styles:**
|
||||
- Full Screen (default)
|
||||
- Automatic (large on iPad)
|
||||
- Form sheet (iPad centered)
|
||||
|
||||
### Alerts & Action Sheets
|
||||
**Alert:**
|
||||
- Title + message
|
||||
- 1-2 buttons (max 3)
|
||||
- Default, cancel, destructive actions
|
||||
|
||||
**Action Sheet:**
|
||||
- Title + message (optional)
|
||||
- Multiple actions (list)
|
||||
- Cancel button at bottom
|
||||
- Destructive action (red)
|
||||
|
||||
**Best practices:**
|
||||
- Use sparingly (interrupting)
|
||||
- Title should be question or statement
|
||||
- Avoid nested alerts
|
||||
|
||||
### Popovers (iPad)
|
||||
**Use when:** Contextual content or actions
|
||||
|
||||
**Characteristics:**
|
||||
- Arrow pointing to source
|
||||
- Auto-dismisses when tapping outside
|
||||
- Size: compact to full screen
|
||||
|
||||
**On iPhone:**
|
||||
- Converts to sheet or action sheet
|
||||
|
||||
### Context Menus
|
||||
**Trigger:** Long press
|
||||
|
||||
**Content:**
|
||||
- Primary action preview (optional)
|
||||
- Action list (icons + text)
|
||||
- Nested menus (submenus)
|
||||
|
||||
**Actions:**
|
||||
- Use SF Symbols
|
||||
- Destructive actions (red) at bottom
|
||||
- Max 10-12 items
|
||||
|
||||
---
|
||||
|
||||
## 6. Gestures & Haptics
|
||||
|
||||
### Standard Gestures
|
||||
- **Tap:** Select, activate
|
||||
- **Double tap:** Zoom (maps, images)
|
||||
- **Long press:** Context menu, drag preview
|
||||
- **Swipe:** Navigate, reveal actions
|
||||
- **Pinch:** Zoom in/out
|
||||
- **Rotate:** Rotate content (photos)
|
||||
- **Edge swipe:** Back navigation (leading edge)
|
||||
|
||||
### Haptic Feedback
|
||||
**Impact:**
|
||||
- Light: Small element collision
|
||||
- Medium: Medium element collision
|
||||
- Heavy: Large element collision
|
||||
|
||||
**Notification:**
|
||||
- Success: ✓ (positive)
|
||||
- Warning: ⚠︎ (caution)
|
||||
- Error: ✕ (negative)
|
||||
|
||||
**Selection:**
|
||||
- Picker value change
|
||||
- Toggle state change
|
||||
- Segmented control
|
||||
|
||||
**When to use:**
|
||||
- Provide feedback for ambiguous actions
|
||||
- Confirm state changes
|
||||
- Enhance important moments
|
||||
- Don't overuse (becomes noise)
|
||||
|
||||
### Pull to Refresh
|
||||
**Standard pattern:**
|
||||
- Pull down list/scroll view
|
||||
- Release to trigger
|
||||
- Loading indicator appears
|
||||
- Auto-dismiss when complete
|
||||
|
||||
**Customization:**
|
||||
- Custom loading views
|
||||
- Haptic feedback on trigger
|
||||
|
||||
---
|
||||
|
||||
## iOS-Specific Features
|
||||
|
||||
### Widgets
|
||||
**Types:**
|
||||
- **Home Screen:** Small (2×2), Medium (2×4), Large (4×4), Extra Large (4×8, iPad only)
|
||||
- **Lock Screen:** Circular, Rectangular, Inline
|
||||
- **StandBy:** Full-screen glanceable info
|
||||
|
||||
**Best practices:**
|
||||
- Show essential, at-a-glance info
|
||||
- Update intelligently (timeline)
|
||||
- Deep link to app
|
||||
- Support all sizes (when appropriate)
|
||||
|
||||
### Live Activities (iOS 16+)
|
||||
**Use when:** Real-time updates needed (sports, delivery, timers)
|
||||
|
||||
**Display:**
|
||||
- Lock Screen (banner)
|
||||
- Dynamic Island (iPhone 14 Pro+)
|
||||
|
||||
**Characteristics:**
|
||||
- Starts from app
|
||||
- Updates via push or app
|
||||
- User-dismissible
|
||||
- Max 8 hours
|
||||
|
||||
### App Clips
|
||||
**Lightweight app experience:**
|
||||
- Max 10MB download
|
||||
- No App Store required
|
||||
- Accessed via QR, NFC, Messages, Safari
|
||||
|
||||
**Design:**
|
||||
- Single, focused task
|
||||
- Simple, fast UI
|
||||
- Optional account creation
|
||||
- Prompt to install full app
|
||||
|
||||
---
|
||||
|
||||
## Accessibility (iOS)
|
||||
|
||||
### VoiceOver
|
||||
- Add `accessibilityLabel` to all interactive elements
|
||||
- Group related elements with `accessibilityElement(children: .combine)`
|
||||
- Logical focus order (top to bottom, left to right)
|
||||
- Custom actions for complex gestures
|
||||
|
||||
### Dynamic Type
|
||||
- Use `Text` in SwiftUI (auto-scales)
|
||||
- Use `UIFont.preferredFont` in UIKit
|
||||
- Test at largest accessibility sizes (AX5)
|
||||
- Allow multi-line labels
|
||||
|
||||
### Reduce Motion
|
||||
- Provide crossfade alternative to slides
|
||||
- Check `UIAccessibility.isReduceMotionEnabled`
|
||||
- Avoid parallax and animated backgrounds
|
||||
|
||||
### Button Shapes
|
||||
- When enabled, adds underlines to text buttons
|
||||
- Test your UI with button shapes enabled
|
||||
|
||||
---
|
||||
|
||||
## Design Checklist
|
||||
|
||||
✅ **Layout**
|
||||
- Respects safe areas
|
||||
- Supports all device sizes
|
||||
- Adaptive (compact/regular size classes)
|
||||
- Margins and spacing follow 8pt grid
|
||||
|
||||
✅ **Typography**
|
||||
- Uses SF Pro (system font)
|
||||
- Supports Dynamic Type
|
||||
- Appropriate text styles (Body, Headline, etc.)
|
||||
|
||||
✅ **Color**
|
||||
- Uses semantic system colors
|
||||
- Supports Light and Dark mode
|
||||
- Sufficient contrast (4.5:1 minimum)
|
||||
|
||||
✅ **Components**
|
||||
- Uses native iOS components when possible
|
||||
- Custom components feel native
|
||||
- Interactions match iOS patterns
|
||||
|
||||
✅ **Navigation**
|
||||
- Clear hierarchy
|
||||
- Consistent navigation pattern
|
||||
- Back navigation always available
|
||||
|
||||
✅ **Accessibility**
|
||||
- VoiceOver labels on all interactive elements
|
||||
- Dynamic Type supported
|
||||
- Reduce Motion alternatives
|
||||
- Color contrast meets WCAG AA
|
||||
|
||||
✅ **Platform Features**
|
||||
- Widgets (if appropriate)
|
||||
- Shortcuts integration
|
||||
- Handoff support (if multi-device)
|
||||
|
||||
---
|
||||
|
||||
*For component-specific details, see [ios-components.md](ios-components.md)*
|
||||
394
.opencode/skills/ui-ux-master/references/apple-macos.md
Normal file
394
.opencode/skills/ui-ux-master/references/apple-macos.md
Normal file
@@ -0,0 +1,394 @@
|
||||
# macOS Design Patterns
|
||||
|
||||
Complete guide to macOS-specific design patterns, windows, and interactions.
|
||||
|
||||
## Table of Contents
|
||||
1. Windows & Window Management
|
||||
2. Navigation & Layout
|
||||
3. Toolbars & Menus
|
||||
4. Controls & Input
|
||||
5. Keyboard & Mouse Interaction
|
||||
|
||||
---
|
||||
|
||||
## 1. Windows & Window Management
|
||||
|
||||
### Window Types
|
||||
**Standard Window:**
|
||||
- Resizable
|
||||
- Minimize, maximize, close buttons (traffic lights)
|
||||
- Title bar with app name
|
||||
- Optional toolbar
|
||||
|
||||
**Utility Window:**
|
||||
- Smaller title bar
|
||||
- Floats above standard windows
|
||||
- For palettes, inspectors
|
||||
|
||||
**Panel:**
|
||||
- No title bar decorations
|
||||
- Typically attached to main window
|
||||
- For transient UI (color picker, find panel)
|
||||
|
||||
### Window Controls
|
||||
**Traffic Lights (left side):**
|
||||
- 🔴 Close: Closes window (not app, unless last window)
|
||||
- 🟡 Minimize: Sends to Dock
|
||||
- 🟢 Zoom: Toggles full screen or maximizes
|
||||
|
||||
**Full Screen:**
|
||||
- Green button (hold for options)
|
||||
- Hides menu bar and Dock
|
||||
- Swipe between full screen apps
|
||||
|
||||
### Title Bar Styles
|
||||
**Standard:**
|
||||
- Opaque title bar
|
||||
- Clear separation from content
|
||||
|
||||
**Unified:**
|
||||
- Toolbar and title bar merged
|
||||
- Content extends to top
|
||||
|
||||
**Transparent:**
|
||||
- Content visible through title bar
|
||||
- For immersive experiences
|
||||
|
||||
---
|
||||
|
||||
## 2. Navigation & Layout
|
||||
|
||||
### Sidebar
|
||||
**Use when:** Multiple sections or categories
|
||||
|
||||
**Characteristics:**
|
||||
- Leading edge of window
|
||||
- List or outline of navigation items
|
||||
- Collapsible with ⌘⌃S
|
||||
- Icon + text or text-only items
|
||||
|
||||
**Best Practices:**
|
||||
- Use SF Symbols for icons
|
||||
- Highlight selected item
|
||||
- Support keyboard navigation (↑↓)
|
||||
|
||||
### Split View
|
||||
**Use when:** Master-detail relationship
|
||||
|
||||
**Types:**
|
||||
- **2-pane:** Sidebar + content (Mail, Notes)
|
||||
- **3-pane:** Sidebar + list + detail (Mail)
|
||||
|
||||
**Interaction:**
|
||||
- Resize divider (drag)
|
||||
- Collapse/expand panes
|
||||
- Persist user preferences
|
||||
|
||||
### Tabs
|
||||
**Use when:** Multiple documents or views in one window
|
||||
|
||||
**Characteristics:**
|
||||
- Below title bar
|
||||
- Draggable to reorder
|
||||
- Drag out to create new window
|
||||
- Close button on each tab
|
||||
|
||||
**Keyboard:**
|
||||
- ⌘T: New tab
|
||||
- ⌘W: Close tab
|
||||
- ⌘⇧[ / ⌘⇧]: Previous/next tab
|
||||
|
||||
---
|
||||
|
||||
## 3. Toolbars & Menus
|
||||
|
||||
### Toolbar
|
||||
**Use when:** Primary actions for current context
|
||||
|
||||
**Items:**
|
||||
- Buttons (icon, text, or both)
|
||||
- Segmented controls (view switchers)
|
||||
- Search fields
|
||||
- Pop-up buttons (menus)
|
||||
|
||||
**Customization:**
|
||||
- Right-click → Customize Toolbar
|
||||
- User can add/remove/rearrange items
|
||||
|
||||
**Best Practices:**
|
||||
- Use SF Symbols
|
||||
- Show icon + text by default
|
||||
- Group related actions
|
||||
|
||||
### Menu Bar
|
||||
**Always present** at top of screen
|
||||
|
||||
**Standard Menus:**
|
||||
- **App Menu:** About, Preferences, Quit
|
||||
- **File:** New, Open, Save, Print, Close
|
||||
- **Edit:** Undo, Cut, Copy, Paste
|
||||
- **View:** Show/Hide UI elements
|
||||
- **Window:** Minimize, Zoom, Bring All to Front
|
||||
- **Help:** App help and search
|
||||
|
||||
**Keyboard Shortcuts:**
|
||||
- ⌘: Command (primary)
|
||||
- ⌥: Option (alternative)
|
||||
- ⌃: Control (context-specific)
|
||||
- ⇧: Shift (modifier)
|
||||
|
||||
### Context Menus
|
||||
**Trigger:** Right-click or Control+click
|
||||
|
||||
**Content:**
|
||||
- Relevant actions for clicked item
|
||||
- Cut, copy, paste when applicable
|
||||
- Open, rename, delete for files
|
||||
|
||||
---
|
||||
|
||||
## 4. Controls & Input
|
||||
|
||||
### Buttons
|
||||
**Types:**
|
||||
- **Push Button:** Standard action (rounded rect)
|
||||
- **Default Button:** Primary action (blue, ↩ activates)
|
||||
- **Bevel Button:** Icon-only, toolbar style
|
||||
- **Help Button:** Small (?) for contextual help
|
||||
|
||||
**Sizes:**
|
||||
- Regular (System default)
|
||||
- Small (compact UIs)
|
||||
- Mini (very compact, avoid if possible)
|
||||
|
||||
### Pop-Up Buttons
|
||||
**Use when:** Selecting from a list (dropdown)
|
||||
|
||||
**Styles:**
|
||||
- Standard (with arrows)
|
||||
- Pull-down (menu style)
|
||||
|
||||
**Items:**
|
||||
- Checkmark for selected item
|
||||
- Dividers between groups
|
||||
- Icons (optional)
|
||||
|
||||
### Segmented Control
|
||||
**Use when:** 2-5 mutually exclusive view modes
|
||||
|
||||
**Styles:**
|
||||
- **Automatic:** Adapts to context
|
||||
- **Rounded:** Modern, iOS-like
|
||||
- **Textured:** Toolbar style (legacy)
|
||||
|
||||
### Text Fields & Search
|
||||
**Text Field:**
|
||||
- Single-line input
|
||||
- Optional placeholder
|
||||
- Clear button (×)
|
||||
|
||||
**Search Field:**
|
||||
- Magnifying glass icon
|
||||
- Rounded appearance
|
||||
- Recent searches menu
|
||||
- Cancel button appears when typing
|
||||
|
||||
### Sliders & Steppers
|
||||
**Slider:**
|
||||
- Continuous value selection
|
||||
- Optional tick marks
|
||||
- Label showing current value
|
||||
|
||||
**Stepper:**
|
||||
- Increment/decrement numeric values
|
||||
- + and – buttons
|
||||
- Typically paired with text field
|
||||
|
||||
---
|
||||
|
||||
## 5. Keyboard & Mouse Interaction
|
||||
|
||||
### Keyboard Shortcuts
|
||||
**Universal:**
|
||||
- ⌘N: New
|
||||
- ⌘O: Open
|
||||
- ⌘S: Save
|
||||
- ⌘P: Print
|
||||
- ⌘Z: Undo
|
||||
- ⌘⇧Z: Redo
|
||||
- ⌘C/X/V: Copy/Cut/Paste
|
||||
- ⌘Q: Quit
|
||||
|
||||
**Window Management:**
|
||||
- ⌘M: Minimize
|
||||
- ⌘W: Close window/tab
|
||||
- ⌘⌃F: Full screen
|
||||
- ⌘`: Switch windows of app
|
||||
|
||||
**Tab Navigation:**
|
||||
- ⇥ (Tab): Next field
|
||||
- ⇧⇥: Previous field
|
||||
- ⌘⇥: Switch apps
|
||||
- ⌘⇧⇥: Switch apps (reverse)
|
||||
|
||||
### Mouse & Trackpad
|
||||
**Mouse:**
|
||||
- Left click: Select
|
||||
- Right click: Context menu
|
||||
- Scroll wheel: Vertical scroll
|
||||
|
||||
**Trackpad Gestures:**
|
||||
- Two-finger scroll: Vertical/horizontal scroll
|
||||
- Two-finger tap: Right-click
|
||||
- Pinch: Zoom
|
||||
- Swipe (3 fingers): Navigate back/forward
|
||||
- Swipe up (3 fingers): Mission Control
|
||||
- Swipe up (4 fingers): App Exposé
|
||||
|
||||
### Drag & Drop
|
||||
**System-wide:**
|
||||
- Files between Finder and apps
|
||||
- Text between apps
|
||||
- Images from web to desktop
|
||||
|
||||
**In-app:**
|
||||
- Reorder lists
|
||||
- Move items between views
|
||||
- Copy/move with modifier keys (⌥ = copy)
|
||||
|
||||
---
|
||||
|
||||
## macOS-Specific Features
|
||||
|
||||
### Preferences
|
||||
**Standard window:**
|
||||
- ⌘, (Command-comma) shortcut
|
||||
- Toolbar with icons for sections
|
||||
- No OK/Cancel buttons (apply immediately)
|
||||
|
||||
### Notifications
|
||||
**Notification Center:**
|
||||
- Right side of screen
|
||||
- Banners (auto-dismiss) or Alerts (require action)
|
||||
- Do Not Disturb mode
|
||||
|
||||
### Quick Look
|
||||
**Preview without opening:**
|
||||
- Select file, press Space
|
||||
- Arrow keys to navigate
|
||||
- Markup tools (annotation)
|
||||
|
||||
### Spotlight
|
||||
**⌘Space:** Universal search
|
||||
- Apps, documents, contacts, definitions
|
||||
- Calculator, unit conversions
|
||||
- Web search
|
||||
|
||||
### Extensions
|
||||
**Share Extension:**
|
||||
- Share button in toolbar/menu
|
||||
- Send to other apps or services
|
||||
|
||||
**Finder Extension:**
|
||||
- Add items to Finder sidebar
|
||||
- Custom actions in Finder
|
||||
|
||||
---
|
||||
|
||||
## Layout Guidelines
|
||||
|
||||
### Window Sizing
|
||||
**Minimum:**
|
||||
- 600×400pt for document windows
|
||||
- 400×300pt for utility windows
|
||||
|
||||
**Default:**
|
||||
- Reasonable size for content
|
||||
- Remember user's last size
|
||||
|
||||
**Maximum:**
|
||||
- No artificial limits
|
||||
- Scale content appropriately
|
||||
|
||||
### Margins & Spacing
|
||||
**Standard spacing:**
|
||||
- **20pt:** Window edges to content
|
||||
- **12pt:** Between controls (standard)
|
||||
- **8pt:** Between controls (compact)
|
||||
- **24pt:** Between groups
|
||||
|
||||
### Alignment
|
||||
- **Left-align** labels and text
|
||||
- **Right-align** numeric data
|
||||
- **Center** only for single, prominent elements
|
||||
|
||||
---
|
||||
|
||||
## Accessibility (macOS)
|
||||
|
||||
### VoiceOver
|
||||
- Full keyboard navigation
|
||||
- Descriptive labels for all controls
|
||||
- Announce state changes
|
||||
- Logical focus order
|
||||
|
||||
### Keyboard Access
|
||||
- **Full Keyboard Access:** Enable in System Settings
|
||||
- All controls accessible via Tab
|
||||
- Space to activate buttons
|
||||
- Arrow keys for lists
|
||||
|
||||
### Reduce Motion
|
||||
- Minimize animations
|
||||
- Use crossfades instead of slides
|
||||
- Respect `NSWorkspace.shared.accessibilityDisplayShouldReduceMotion`
|
||||
|
||||
### Contrast
|
||||
- Increase Contrast mode (System Settings)
|
||||
- Test UI with Increased Contrast enabled
|
||||
- Avoid low-contrast text
|
||||
|
||||
---
|
||||
|
||||
## Design Checklist
|
||||
|
||||
✅ **Window Management**
|
||||
- Resizable windows (with min/max sizes)
|
||||
- Remembers window position and size
|
||||
- Full screen support (if appropriate)
|
||||
|
||||
✅ **Navigation**
|
||||
- Clear hierarchy (sidebar or tabs)
|
||||
- Keyboard shortcuts for common actions
|
||||
- Context menus for quick access
|
||||
|
||||
✅ **Toolbars**
|
||||
- Customizable toolbar
|
||||
- Relevant actions visible
|
||||
- Icon + text labels
|
||||
|
||||
✅ **Menu Bar**
|
||||
- Standard menus (File, Edit, View, Window, Help)
|
||||
- Keyboard shortcuts documented
|
||||
- Disabled items when not applicable
|
||||
|
||||
✅ **Input**
|
||||
- Tab order logical
|
||||
- Keyboard shortcuts intuitive
|
||||
- Drag & drop supported
|
||||
|
||||
✅ **Accessibility**
|
||||
- VoiceOver labels on all controls
|
||||
- Full keyboard access
|
||||
- Reduce Motion respected
|
||||
- High contrast support
|
||||
|
||||
✅ **macOS Integration**
|
||||
- Uses system font (SF Pro)
|
||||
- Supports Light and Dark mode
|
||||
- Respects system preferences
|
||||
- Native look and feel
|
||||
|
||||
---
|
||||
|
||||
*For component-specific details, see [macos-components.md](macos-components.md)*
|
||||
402
.opencode/skills/ui-ux-master/references/apple-platforms.md
Normal file
402
.opencode/skills/ui-ux-master/references/apple-platforms.md
Normal file
@@ -0,0 +1,402 @@
|
||||
# Apple Platforms - Complete Guide
|
||||
|
||||
Comprehensive guide for all Apple platforms: iOS, iPadOS, macOS, watchOS, tvOS, and visionOS.
|
||||
|
||||
## Table of Contents
|
||||
1. Core Design Principles
|
||||
2. Platform Comparison
|
||||
3. Typography & SF Symbols
|
||||
4. Color & Dark Mode
|
||||
5. Layout Systems
|
||||
6. Platform-Specific Deep Dives
|
||||
|
||||
---
|
||||
|
||||
## 1. Core Design Principles
|
||||
|
||||
### Clarity
|
||||
**Definition:** Content and functionality are obvious at every size
|
||||
|
||||
**Implementation:**
|
||||
- Text legible at all Dynamic Type sizes
|
||||
- Icons precise and immediately recognizable
|
||||
- UI elements have clear affordances
|
||||
- Adornments are subtle, never distracting
|
||||
|
||||
### Deference
|
||||
**Definition:** UI defers to content, never competing with it
|
||||
|
||||
**Implementation:**
|
||||
- Content fills the screen
|
||||
- Translucency hints at more content below
|
||||
- Minimal bezels, gradients, shadows
|
||||
- Controls appear only when needed
|
||||
|
||||
### Depth
|
||||
**Definition:** Visual layers and motion convey hierarchy
|
||||
|
||||
**Implementation:**
|
||||
- Layered UI with elevation
|
||||
- Smooth, realistic motion
|
||||
- Touch interactions feel natural
|
||||
- Spatial awareness in 3D (visionOS)
|
||||
|
||||
---
|
||||
|
||||
## 2. Platform Comparison
|
||||
|
||||
| Platform | Screen | Input | Font | Key Pattern |
|
||||
|----------|--------|-------|------|-------------|
|
||||
| **iOS** | 4-7" | Touch | SF Pro | Tab Bar Navigation |
|
||||
| **iPadOS** | 10-13" | Touch + Pencil | SF Pro | Split View + Sidebar |
|
||||
| **macOS** | 13-32" | Mouse + Keyboard | SF Pro | Windows + Menu Bar |
|
||||
| **watchOS** | 1-2" | Digital Crown + Touch | SF Compact | Vertical Scroll |
|
||||
| **tvOS** | TV | Siri Remote | SF Pro Display | Focus-Driven Grid |
|
||||
| **visionOS** | Spatial | Eyes + Hands | SF Pro | 3D Windows |
|
||||
|
||||
### When to Use Each Platform
|
||||
|
||||
**iOS:** Mobile apps, on-the-go tasks, touch-first interactions
|
||||
**iPadOS:** Creative tools, productivity, larger touch interfaces
|
||||
**macOS:** Professional tools, complex workflows, precision tasks
|
||||
**watchOS:** Glanceable info, quick actions, health tracking
|
||||
**tvOS:** Entertainment, casual browsing, living room
|
||||
**visionOS:** Spatial computing, immersive experiences, 3D content
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography & SF Symbols
|
||||
|
||||
### San Francisco Font Family
|
||||
|
||||
**SF Pro:** iOS, macOS, tvOS, visionOS
|
||||
- Optimized for readability at all sizes
|
||||
- Variable font weights (Ultralight to Black)
|
||||
- Automatic optical sizing
|
||||
|
||||
**SF Compact:** watchOS
|
||||
- Rounded, friendly appearance
|
||||
- Optimized for small screens
|
||||
- Slightly wider for legibility
|
||||
|
||||
**SF Mono:** Code and tabular data (all platforms)
|
||||
- Fixed-width characters
|
||||
- Clear distinction between similar characters (0/O, 1/l)
|
||||
|
||||
**SF Arabic, SF Hebrew:** Localized scripts
|
||||
|
||||
### Dynamic Type
|
||||
|
||||
**Text Styles (iOS/macOS):**
|
||||
```
|
||||
Large Title - 34pt (iOS), 26pt (macOS)
|
||||
Title 1 - 28pt (iOS), 22pt (macOS)
|
||||
Title 2 - 22pt (iOS), 17pt (macOS)
|
||||
Title 3 - 20pt (iOS), 15pt (macOS)
|
||||
Headline - 17pt (iOS), 13pt (macOS) bold
|
||||
Body - 17pt (iOS), 13pt (macOS)
|
||||
Callout - 16pt (iOS), 12pt (macOS)
|
||||
Subheadline - 15pt (iOS), 11pt (macOS)
|
||||
Footnote - 13pt (iOS), 10pt (macOS)
|
||||
Caption 1 - 12pt (iOS), 10pt (macOS)
|
||||
Caption 2 - 11pt (iOS), 10pt (macOS)
|
||||
```
|
||||
|
||||
**Accessibility Sizes:**
|
||||
- Standard: -3 to +7 (12 sizes)
|
||||
- Accessibility: AX1 to AX5 (5 additional sizes)
|
||||
- Always test at largest sizes
|
||||
|
||||
### SF Symbols
|
||||
|
||||
**6,000+ icons designed by Apple:**
|
||||
- Match text weight automatically
|
||||
- Variable color rendering modes
|
||||
- Multicolor, hierarchical, palette, monochrome
|
||||
|
||||
**Usage (SwiftUI):**
|
||||
```swift
|
||||
Image(systemName: "star.fill")
|
||||
Image(systemName: "heart.circle.fill")
|
||||
.symbolRenderingMode(.multicolor)
|
||||
```
|
||||
|
||||
**Best Practices:**
|
||||
- Match symbol weight to text weight
|
||||
- Use filled variants for selected states
|
||||
- Leverage multicolor for semantic meaning
|
||||
- Custom symbols follow SF design
|
||||
|
||||
---
|
||||
|
||||
## 4. Color & Dark Mode
|
||||
|
||||
### System Colors (Semantic)
|
||||
|
||||
**Labels (Text):**
|
||||
- `label` - Primary text
|
||||
- `secondaryLabel` - Secondary text
|
||||
- `tertiaryLabel` - Tertiary text/disabled
|
||||
- `quaternaryLabel` - Watermarks
|
||||
|
||||
**Fills (Backgrounds):**
|
||||
- `systemFill` - Thin fill
|
||||
- `secondarySystemFill` - Medium fill
|
||||
- `tertiarySystemFill` - Thick fill
|
||||
- `quaternarySystemFill` - Thickest fill
|
||||
|
||||
**Backgrounds:**
|
||||
- `systemBackground` - Main background
|
||||
- `secondarySystemBackground` - Grouped content
|
||||
- `tertiarySystemBackground` - Grouped in grouped
|
||||
|
||||
**Grouped Backgrounds:**
|
||||
- `systemGroupedBackground`
|
||||
- `secondarySystemGroupedBackground`
|
||||
- `tertiarySystemGroupedBackground`
|
||||
|
||||
### Accent Colors
|
||||
|
||||
**System Accent:**
|
||||
- Blue (default)
|
||||
- User can change in Settings (iOS 14+)
|
||||
- Use for interactive elements
|
||||
|
||||
**Custom Accent:**
|
||||
- Define in Asset Catalog
|
||||
- Adapts to light/dark automatically
|
||||
- Use for brand identity
|
||||
|
||||
### Dark Mode Strategy
|
||||
|
||||
**Elevation, Not Brightness:**
|
||||
```
|
||||
Base: oklch(0.145 0 0) (darkest)
|
||||
Elevated: oklch(0.205 0 0) (slightly lighter)
|
||||
Elevated 2: oklch(0.255 0 0) (more elevated)
|
||||
```
|
||||
|
||||
**Avoid Pure Black:**
|
||||
- Use dark gray instead (#1C1C1E, not #000000)
|
||||
- Provides subtle elevation
|
||||
- Reduces eye strain on OLED
|
||||
|
||||
**Test Both Modes:**
|
||||
- Design in both simultaneously
|
||||
- Use semantic colors when possible
|
||||
- Provide light/dark variants for images
|
||||
|
||||
---
|
||||
|
||||
## 5. Layout Systems
|
||||
|
||||
### Safe Areas
|
||||
|
||||
**iOS Safe Areas:**
|
||||
- **Top:** Status bar (44-59pt), notch, Dynamic Island
|
||||
- **Bottom:** Home indicator (34pt)
|
||||
- **Leading/Trailing:** 0pt (full bleed) to 20pt (margins)
|
||||
|
||||
**SwiftUI:**
|
||||
```swift
|
||||
.safeAreaInset(edge: .bottom) { /* toolbar */ }
|
||||
.ignoresSafeArea() // when appropriate
|
||||
```
|
||||
|
||||
**UIKit:**
|
||||
```swift
|
||||
view.safeAreaLayoutGuide
|
||||
view.safeAreaInsets
|
||||
```
|
||||
|
||||
### Size Classes
|
||||
|
||||
**iOS/iPadOS:**
|
||||
- Compact Width: iPhone portrait, iPhone landscape (smaller)
|
||||
- Regular Width: iPad, iPhone landscape (larger models)
|
||||
- Compact Height: iPhone landscape
|
||||
- Regular Height: iPhone portrait, iPad
|
||||
|
||||
**Adaptive Strategy:**
|
||||
- Compact → Single column, stack vertically
|
||||
- Regular → Multi-column, sidebars, split views
|
||||
|
||||
**SwiftUI:**
|
||||
```swift
|
||||
@Environment(\.horizontalSizeClass) var horizontal
|
||||
@Environment(\.verticalSizeClass) var vertical
|
||||
```
|
||||
|
||||
### Margins & Spacing
|
||||
|
||||
**Standard Margins:**
|
||||
- iPhone: 16-20pt
|
||||
- iPad: 20-24pt
|
||||
- Mac: 20pt
|
||||
|
||||
**Component Spacing:**
|
||||
- Tight: 4-8pt (related items)
|
||||
- Standard: 12-16pt (grouped items)
|
||||
- Loose: 20-32pt (sections)
|
||||
|
||||
**Grid System:**
|
||||
- Base: 8pt grid
|
||||
- Touch targets: 44×44pt minimum (iOS)
|
||||
- macOS controls: 20pt height typical
|
||||
|
||||
---
|
||||
|
||||
## 6. Platform-Specific Deep Dives
|
||||
|
||||
### iOS/iPadOS Patterns
|
||||
See [apple-ios.md](apple-ios.md) for:
|
||||
- Navigation patterns (Tab Bar, Navigation Bar, Sidebar)
|
||||
- Lists, grids, and cards
|
||||
- Forms and input
|
||||
- Modality (sheets, alerts, popovers)
|
||||
- Gestures and haptics
|
||||
- Widgets and Live Activities
|
||||
|
||||
### macOS Patterns
|
||||
See [apple-macos.md](apple-macos.md) for:
|
||||
- Windows and window management
|
||||
- Sidebars and split views
|
||||
- Toolbars and menu bar
|
||||
- Keyboard shortcuts
|
||||
- Drag and drop
|
||||
- Preferences and settings
|
||||
|
||||
### watchOS Patterns
|
||||
See [apple-watchos.md](apple-watchos.md) for:
|
||||
- Glanceable design
|
||||
- Digital Crown interaction
|
||||
- Always-On Display
|
||||
- Complications
|
||||
- Notifications
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Across Platforms
|
||||
|
||||
### VoiceOver (All Platforms)
|
||||
- Descriptive labels for all interactive elements
|
||||
- Logical focus order (top → bottom, left → right)
|
||||
- Group related elements
|
||||
- Announce dynamic changes
|
||||
|
||||
### Dynamic Type (iOS/macOS)
|
||||
- Support all text sizes (-3 to AX5)
|
||||
- Test at largest accessibility sizes
|
||||
- Allow multi-line labels
|
||||
- Scale layouts appropriately
|
||||
|
||||
### Keyboard Access (macOS/iPadOS)
|
||||
- Full Keyboard Access in System Settings
|
||||
- Tab order logical
|
||||
- All actions keyboard-accessible
|
||||
- Visible focus indicators
|
||||
|
||||
### Reduce Motion (All Platforms)
|
||||
- Provide crossfade alternative to slides
|
||||
- Check `UIAccessibility.isReduceMotionEnabled`
|
||||
- Essential animations only
|
||||
- No auto-playing videos
|
||||
|
||||
### Color & Contrast
|
||||
- WCAG AA minimum (4.5:1 normal, 3:1 large)
|
||||
- Test with grayscale
|
||||
- Test with color blindness simulators
|
||||
- Increase Contrast mode support
|
||||
|
||||
---
|
||||
|
||||
## Platform Integration Features
|
||||
|
||||
### iOS Features
|
||||
- **Widgets:** Home Screen, Lock Screen, StandBy
|
||||
- **Live Activities:** Dynamic Island, Lock Screen updates
|
||||
- **App Clips:** Lightweight 10MB experiences
|
||||
- **Shortcuts:** Siri Shortcuts, App Intents
|
||||
- **Handoff:** Continue across devices
|
||||
- **SharePlay:** Shared experiences
|
||||
|
||||
### macOS Features
|
||||
- **Menu Bar:** Global app menus
|
||||
- **Dock:** App launcher with badges
|
||||
- **Finder Extensions:** Custom sidebar items, actions
|
||||
- **Quick Look:** Preview files with Space
|
||||
- **Spotlight:** ⌘Space universal search
|
||||
- **Continuity:** Handoff, Universal Clipboard, AirDrop
|
||||
|
||||
### watchOS Features
|
||||
- **Complications:** Watch face widgets
|
||||
- **Always-On Display:** Simplified UI when down
|
||||
- **Workout APIs:** Health and fitness integration
|
||||
- **Notifications:** Short Look, Long Look
|
||||
|
||||
### tvOS Features
|
||||
- **Top Shelf:** Featured content on home screen
|
||||
- **Focus Engine:** Automatic focus management
|
||||
- **Siri Integration:** Voice control
|
||||
- **Game Controllers:** Extended gamepad support
|
||||
|
||||
### visionOS Features
|
||||
- **Spatial Windows:** Float in 3D space
|
||||
- **Volumes:** 3D content containers
|
||||
- **Immersion Dial:** Environment blend control
|
||||
- **Spatial Audio:** 3D positional audio
|
||||
- **Eye Tracking:** Gaze-based targeting
|
||||
|
||||
---
|
||||
|
||||
## Cross-Platform Development
|
||||
|
||||
### SwiftUI (Recommended)
|
||||
**Advantages:**
|
||||
- Write once, deploy to all Apple platforms
|
||||
- Automatic adaptations (size classes, input methods)
|
||||
- Modern declarative syntax
|
||||
- State management built-in
|
||||
|
||||
**Best For:**
|
||||
- New projects
|
||||
- Apps targeting iOS 14+
|
||||
- Rapid prototyping
|
||||
- Cross-platform apps
|
||||
|
||||
### UIKit (iOS) / AppKit (macOS)
|
||||
**When to use:**
|
||||
- Fine-grained control needed
|
||||
- Supporting older OS versions (< iOS 13)
|
||||
- Complex custom UI
|
||||
- Performance-critical apps
|
||||
|
||||
### Platform-Specific Considerations
|
||||
- Test on each platform's real devices
|
||||
- Respect each platform's conventions
|
||||
- Adapt navigation patterns appropriately
|
||||
- Use platform-specific features when beneficial
|
||||
|
||||
---
|
||||
|
||||
## Design Resources
|
||||
|
||||
**Official:**
|
||||
- [Apple HIG](https://developer.apple.com/design/human-interface-guidelines)
|
||||
- [SF Symbols App](https://developer.apple.com/sf-symbols/)
|
||||
- [Apple Design Resources](https://developer.apple.com/design/resources/)
|
||||
|
||||
**Tools:**
|
||||
- Sketch, Figma, Adobe XD (design)
|
||||
- SF Pro font download (Apple)
|
||||
- Color Contrast Analyzer
|
||||
- Accessibility Inspector (Xcode)
|
||||
|
||||
**Learning:**
|
||||
- WWDC Design sessions
|
||||
- Apple Developer Forums
|
||||
- Human Interface Guidelines documentation
|
||||
|
||||
---
|
||||
|
||||
*For platform-specific patterns, see apple-ios.md, apple-macos.md, and apple-watchos.md*
|
||||
42
.opencode/skills/ui-ux-master/references/apple-watchos.md
Normal file
42
.opencode/skills/ui-ux-master/references/apple-watchos.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# watchOS Design Patterns
|
||||
|
||||
Glanceable, quick interactions for Apple Watch.
|
||||
|
||||
## Core Principles
|
||||
- **Glanceable:** Information at a glance
|
||||
- **Actionable:** Complete tasks quickly
|
||||
- **Responsive:** Interactions feel immediate
|
||||
|
||||
## Layout
|
||||
- **SF Compact Rounded:** watchOS system font
|
||||
- Edge-to-edge content
|
||||
- Vertical scrolling preferred
|
||||
- Digital Crown for scrolling/zooming
|
||||
|
||||
## Components
|
||||
- **Lists:** Primary navigation pattern
|
||||
- **Buttons:** Large, easy to tap
|
||||
- **Digital Crown:** Scroll, zoom, discrete values
|
||||
- **Side Button:** Access Dock, Apple Pay
|
||||
|
||||
## Always-On Display
|
||||
- Simplified UI when wrist down
|
||||
- Essential info visible
|
||||
- Reduced brightness
|
||||
- Updates every second
|
||||
|
||||
## Complications
|
||||
- **Circular, Rectangular, Text-only** styles
|
||||
- Update intelligently (timeline)
|
||||
- Tappable to launch app
|
||||
- Support all watch faces
|
||||
|
||||
## Notifications
|
||||
- **Short Look:** App icon + title
|
||||
- **Long Look:** Full notification (raise wrist)
|
||||
- Actionable buttons
|
||||
- Quick replies
|
||||
|
||||
---
|
||||
|
||||
*Full watchOS patterns available at official Apple HIG*
|
||||
330
.opencode/skills/ui-ux-master/references/color-systems.md
Normal file
330
.opencode/skills/ui-ux-master/references/color-systems.md
Normal file
@@ -0,0 +1,330 @@
|
||||
# Color Systems
|
||||
|
||||
Complete guide to color theory, palettes, contrast, and modern color systems.
|
||||
|
||||
## Modern Color Spaces
|
||||
|
||||
### oklch() - Recommended
|
||||
**Advantages:**
|
||||
- Perceptually uniform (consistent brightness)
|
||||
- Predictable lightness adjustments
|
||||
- Better for color manipulation
|
||||
- Future-proof
|
||||
|
||||
**Syntax:** `oklch(L C H / A)`
|
||||
- L (Lightness): 0-1 (0% black, 100% white)
|
||||
- C (Chroma): 0-0.4 (saturation, 0 = gray)
|
||||
- H (Hue): 0-360 (degrees on color wheel)
|
||||
- A (Alpha): 0-1 (optional)
|
||||
|
||||
**Examples:**
|
||||
```css
|
||||
--primary: oklch(0.65 0.24 267); /* Blue */
|
||||
--primary-hover: oklch(0.75 0.24 267); /* Lighter */
|
||||
--primary-muted: oklch(0.65 0.12 267); /* Less saturated */
|
||||
```
|
||||
|
||||
### HSL
|
||||
**Good for:** Quick adjustments, legacy support
|
||||
|
||||
```css
|
||||
--primary: hsl(267, 70%, 60%);
|
||||
--primary-light: hsl(267, 70%, 80%); /* Lighter */
|
||||
```
|
||||
|
||||
### RGB/Hex
|
||||
**Good for:** Designer handoff, legacy browsers
|
||||
|
||||
```css
|
||||
--primary: #667eea;
|
||||
--primary-rgb: rgb(102, 126, 234);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Semantic Color System
|
||||
|
||||
### Light Mode Base
|
||||
```css
|
||||
:root {
|
||||
/* Background layers */
|
||||
--bg-base: oklch(1 0 0); /* Pure white */
|
||||
--bg-surface: oklch(0.98 0 0); /* Subtle gray */
|
||||
--bg-elevated: oklch(1 0 0); /* White (cards) */
|
||||
|
||||
/* Text */
|
||||
--text-primary: oklch(0.15 0 0); /* Near black */
|
||||
--text-secondary: oklch(0.45 0 0); /* Medium gray */
|
||||
--text-tertiary: oklch(0.65 0 0); /* Light gray */
|
||||
|
||||
/* UI */
|
||||
--border: oklch(0.85 0 0); /* Light border */
|
||||
--divider: oklch(0.90 0 0); /* Subtle divider */
|
||||
|
||||
/* Interactive */
|
||||
--primary: oklch(0.65 0.24 267); /* Brand blue */
|
||||
--primary-hover: oklch(0.70 0.24 267);
|
||||
--primary-active: oklch(0.60 0.24 267);
|
||||
|
||||
/* Semantic */
|
||||
--success: oklch(0.70 0.15 160); /* Green */
|
||||
--warning: oklch(0.75 0.15 85); /* Yellow */
|
||||
--error: oklch(0.65 0.20 25); /* Red */
|
||||
--info: oklch(0.70 0.15 250); /* Blue */
|
||||
}
|
||||
```
|
||||
|
||||
### Dark Mode
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Backgrounds */
|
||||
--bg-base: oklch(0.145 0 0); /* Very dark */
|
||||
--bg-surface: oklch(0.185 0 0); /* Slightly lighter */
|
||||
--bg-elevated: oklch(0.225 0 0); /* Cards */
|
||||
|
||||
/* Text (inverted) */
|
||||
--text-primary: oklch(0.95 0 0); /* Near white */
|
||||
--text-secondary: oklch(0.65 0 0); /* Medium gray */
|
||||
--text-tertiary: oklch(0.45 0 0); /* Darker gray */
|
||||
|
||||
/* UI */
|
||||
--border: oklch(0.30 0 0);
|
||||
--divider: oklch(0.25 0 0);
|
||||
|
||||
/* Interactive (slightly adjusted for dark) */
|
||||
--primary: oklch(0.70 0.22 267);
|
||||
--primary-hover: oklch(0.75 0.22 267);
|
||||
--primary-active: oklch(0.65 0.22 267);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color Contrast (WCAG)
|
||||
|
||||
### Minimum Requirements
|
||||
|
||||
**Level AA (Standard):**
|
||||
- Normal text (<18pt): 4.5:1 contrast
|
||||
- Large text (≥18pt or 14pt bold): 3:1 contrast
|
||||
- UI components: 3:1 contrast
|
||||
|
||||
**Level AAA (Enhanced):**
|
||||
- Normal text: 7:1 contrast
|
||||
- Large text: 4.5:1 contrast
|
||||
|
||||
### Testing Tools
|
||||
- **contrast-ratio.com** - Quick check
|
||||
- **WebAIM Contrast Checker**
|
||||
- **Figma/Sketch plugins**
|
||||
- **Chrome DevTools** (built-in)
|
||||
|
||||
### Common Mistakes
|
||||
```css
|
||||
/* ❌ BAD: Insufficient contrast (2.5:1) */
|
||||
color: #999;
|
||||
background: #fff;
|
||||
|
||||
/* ✅ GOOD: Sufficient contrast (4.6:1) */
|
||||
color: #666;
|
||||
background: #fff;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color Palettes
|
||||
|
||||
### Building a Palette
|
||||
|
||||
**Start with Primary:**
|
||||
```css
|
||||
--primary-50: oklch(0.95 0.05 267);
|
||||
--primary-100: oklch(0.90 0.10 267);
|
||||
--primary-200: oklch(0.85 0.15 267);
|
||||
--primary-300: oklch(0.75 0.18 267);
|
||||
--primary-400: oklch(0.70 0.21 267);
|
||||
--primary-500: oklch(0.65 0.24 267); /* Base */
|
||||
--primary-600: oklch(0.60 0.24 267);
|
||||
--primary-700: oklch(0.50 0.22 267);
|
||||
--primary-800: oklch(0.40 0.20 267);
|
||||
--primary-900: oklch(0.30 0.18 267);
|
||||
```
|
||||
|
||||
### Color Harmonies
|
||||
|
||||
**Analogous (Adjacent):**
|
||||
- Blue: 240°
|
||||
- Blue-Purple: 260°
|
||||
- Purple: 280°
|
||||
|
||||
**Complementary (Opposite):**
|
||||
- Blue: 240°
|
||||
- Orange: 30° (240° + 150°)
|
||||
|
||||
**Triadic (120° apart):**
|
||||
- Blue: 240°
|
||||
- Red: 0°
|
||||
- Yellow: 120°
|
||||
|
||||
---
|
||||
|
||||
## Color Psychology
|
||||
|
||||
### Meanings by Color
|
||||
|
||||
**Blue (240-270°):**
|
||||
- Trust, stability, professionalism
|
||||
- Tech companies, finance, healthcare
|
||||
- Calming, reliable
|
||||
|
||||
**Green (120-160°):**
|
||||
- Growth, health, nature
|
||||
- Environmental, finance, wellness
|
||||
- Positive, fresh
|
||||
|
||||
**Red (0-30°):**
|
||||
- Energy, urgency, passion
|
||||
- Food, entertainment, alerts
|
||||
- Attention-grabbing, bold
|
||||
|
||||
**Yellow (60-100°):**
|
||||
- Optimism, warmth, caution
|
||||
- Energy, warnings, highlights
|
||||
- Bright, cheerful
|
||||
|
||||
**Purple (270-300°):**
|
||||
- Luxury, creativity, wisdom
|
||||
- Beauty, premium products
|
||||
- Sophisticated, mysterious
|
||||
|
||||
**Orange (30-60°):**
|
||||
- Friendliness, enthusiasm, confidence
|
||||
- Retail, food, calls-to-action
|
||||
- Energetic, approachable
|
||||
|
||||
---
|
||||
|
||||
## Gradients
|
||||
|
||||
### Linear Gradients
|
||||
```css
|
||||
/* Simple two-color */
|
||||
background: linear-gradient(135deg,
|
||||
oklch(0.65 0.24 267),
|
||||
oklch(0.60 0.22 290)
|
||||
);
|
||||
|
||||
/* Multi-stop */
|
||||
background: linear-gradient(to bottom,
|
||||
oklch(0.70 0.24 267) 0%,
|
||||
oklch(0.65 0.22 280) 50%,
|
||||
oklch(0.60 0.20 290) 100%
|
||||
);
|
||||
```
|
||||
|
||||
### Radial Gradients
|
||||
```css
|
||||
background: radial-gradient(circle at center,
|
||||
oklch(0.70 0.24 267),
|
||||
oklch(0.50 0.22 280)
|
||||
);
|
||||
```
|
||||
|
||||
### Mesh Gradients (Modern)
|
||||
```css
|
||||
background:
|
||||
radial-gradient(at 20% 30%, oklch(0.65 0.24 267) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 70%, oklch(0.70 0.20 290) 0px, transparent 50%),
|
||||
oklch(0.145 0 0);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Considerations
|
||||
|
||||
### Color Blindness
|
||||
**Types:**
|
||||
- **Deuteranopia** (red-green, most common)
|
||||
- **Protanopia** (red-green)
|
||||
- **Tritanopia** (blue-yellow, rare)
|
||||
|
||||
**Solutions:**
|
||||
- Never rely on color alone (use icons, labels)
|
||||
- Test with simulators (Figma, Chrome DevTools)
|
||||
- High contrast alternatives
|
||||
- Patterns/textures in addition to color
|
||||
|
||||
### Reduced Contrast Mode
|
||||
```css
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
--text-primary: oklch(0 0 0); /* Pure black */
|
||||
--bg-base: oklch(1 0 0); /* Pure white */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Dark Mode Preferences
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Automatic dark mode */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
/* Automatic light mode */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools & Resources
|
||||
|
||||
**Color Pickers:**
|
||||
- oklch.com - Modern color picker
|
||||
- coolors.co - Palette generator
|
||||
- color.adobe.com - Adobe Color
|
||||
- paletton.com - Color schemes
|
||||
|
||||
**Contrast Checkers:**
|
||||
- contrast-ratio.com
|
||||
- webaim.org/resources/contrastchecker
|
||||
- whocanuse.com (detailed breakdown)
|
||||
|
||||
**Accessibility:**
|
||||
- Stark (Figma/Sketch plugin)
|
||||
- Color Oracle (color blindness simulator)
|
||||
- Chrome DevTools (built-in)
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Safe Color Choices
|
||||
|
||||
**Neutral Grays:**
|
||||
```css
|
||||
--gray-50: oklch(0.98 0 0);
|
||||
--gray-100: oklch(0.95 0 0);
|
||||
--gray-200: oklch(0.90 0 0);
|
||||
--gray-300: oklch(0.83 0 0);
|
||||
--gray-400: oklch(0.70 0 0);
|
||||
--gray-500: oklch(0.56 0 0);
|
||||
--gray-600: oklch(0.45 0 0);
|
||||
--gray-700: oklch(0.35 0 0);
|
||||
--gray-800: oklch(0.25 0 0);
|
||||
--gray-900: oklch(0.15 0 0);
|
||||
```
|
||||
|
||||
**Status Colors:**
|
||||
```css
|
||||
--success: oklch(0.70 0.15 160); /* Green */
|
||||
--warning: oklch(0.75 0.15 85); /* Yellow */
|
||||
--error: oklch(0.65 0.20 25); /* Red */
|
||||
--info: oklch(0.70 0.15 250); /* Blue */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*For dark mode implementation, see dark-mode.md. For complete design systems, see SKILL.md.*
|
||||
5
.opencode/skills/ui-ux-master/references/dark-mode.md
Normal file
5
.opencode/skills/ui-ux-master/references/dark-mode.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Dark Mode
|
||||
|
||||
Semantic colors, elevation strategy, testing both modes
|
||||
|
||||
*See color-systems.md for palettes*
|
||||
@@ -0,0 +1,5 @@
|
||||
# Design Trends
|
||||
|
||||
Glassmorphism, Neo-brutalism, Neumorphism, Claymorphism
|
||||
|
||||
*See SKILL.md for examples*
|
||||
5
.opencode/skills/ui-ux-master/references/forms.md
Normal file
5
.opencode/skills/ui-ux-master/references/forms.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Forms
|
||||
|
||||
Input validation, error messages, accessible labels, progressive disclosure
|
||||
|
||||
*See SKILL.md for patterns*
|
||||
@@ -0,0 +1,5 @@
|
||||
# Layout Patterns
|
||||
|
||||
CSS Grid, Flexbox, 8pt grid system, spacing scales
|
||||
|
||||
*See web-design.md for implementation*
|
||||
@@ -0,0 +1,5 @@
|
||||
# Navigation Patterns
|
||||
|
||||
Top Nav, Tab Bar, Sidebar, Hamburger, Breadcrumbs
|
||||
|
||||
*See apple-ios.md and web-design.md for details*
|
||||
@@ -0,0 +1,8 @@
|
||||
# Responsive Design
|
||||
|
||||
Breakpoints: 640px, 1024px, 1440px
|
||||
Mobile-first approach
|
||||
Fluid typography with clamp()
|
||||
Container queries
|
||||
|
||||
*See web-design.md for implementation*
|
||||
5
.opencode/skills/ui-ux-master/references/typography.md
Normal file
5
.opencode/skills/ui-ux-master/references/typography.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Typography
|
||||
|
||||
Font pairing rules, type scales, line heights, web fonts
|
||||
|
||||
*See SKILL.md for guidelines*
|
||||
354
.opencode/skills/ui-ux-master/references/web-design.md
Normal file
354
.opencode/skills/ui-ux-master/references/web-design.md
Normal file
@@ -0,0 +1,354 @@
|
||||
# Modern Web Design Patterns
|
||||
|
||||
Complete guide to modern web design including responsive layouts, performance, and progressive enhancement.
|
||||
|
||||
## Core Web Principles
|
||||
|
||||
### 1. Mobile-First
|
||||
Start with mobile design, progressively enhance for larger screens
|
||||
|
||||
### 2. Performance
|
||||
Fast load times (<3s), optimized assets, minimal JS
|
||||
|
||||
### 3. Accessibility
|
||||
Semantic HTML, keyboard nav, screen reader friendly
|
||||
|
||||
### 4. Progressive Enhancement
|
||||
Works everywhere, enhanced where supported
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Breakpoints
|
||||
```css
|
||||
/* Mobile first */
|
||||
.container { width: 100%; padding: 16px; }
|
||||
|
||||
/* Tablet: 640px+ */
|
||||
@media (min-width: 640px) {
|
||||
.container { padding: 24px; }
|
||||
}
|
||||
|
||||
/* Desktop: 1024px+ */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wide: 1440px+ */
|
||||
@media (min-width: 1440px) {
|
||||
.container { max-width: 1400px; }
|
||||
}
|
||||
```
|
||||
|
||||
### Responsive Patterns
|
||||
- **Stack → Columns:** 1 col mobile, 2-4 desktop
|
||||
- **Hide/Show:** Progressive disclosure
|
||||
- **Reorder:** CSS Grid `order` property
|
||||
- **Fluid Typography:** `clamp()` for responsive text
|
||||
|
||||
---
|
||||
|
||||
## Layout Systems
|
||||
|
||||
### CSS Grid
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
### Flexbox
|
||||
```css
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
### Container Queries
|
||||
```css
|
||||
@container (min-width: 400px) {
|
||||
.card { display: grid; grid-template-columns: 1fr 2fr; }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Modern CSS Techniques
|
||||
|
||||
### CSS Custom Properties
|
||||
```css
|
||||
:root {
|
||||
--primary: oklch(0.649 0.237 267);
|
||||
--spacing-m: 16px;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--primary);
|
||||
padding: var(--spacing-m);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
```
|
||||
|
||||
### oklch() Colors
|
||||
```css
|
||||
/* Better than HSL - perceptually uniform */
|
||||
:root {
|
||||
--primary: oklch(0.65 0.24 267); /* L C H */
|
||||
--hover: oklch(0.75 0.24 267); /* Lighter */
|
||||
}
|
||||
```
|
||||
|
||||
### Modern Selectors
|
||||
```css
|
||||
/* :has() - parent selector */
|
||||
.card:has(img) { padding-top: 0; }
|
||||
|
||||
/* :is() - grouping */
|
||||
:is(h1, h2, h3) { font-family: Display; }
|
||||
|
||||
/* :where() - zero specificity */
|
||||
:where(ul, ol) { padding-left: 1rem; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Cards
|
||||
```html
|
||||
<div class="card">
|
||||
<img src="..." alt="..." />
|
||||
<div class="card-body">
|
||||
<h3>Title</h3>
|
||||
<p>Description</p>
|
||||
<button>Action</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
```
|
||||
|
||||
### Navigation
|
||||
```html
|
||||
<nav class="navbar">
|
||||
<div class="nav-brand">Logo</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<button class="nav-toggle">☰</button>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Modal
|
||||
```html
|
||||
<dialog class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Modal Title</h2>
|
||||
<p>Content here...</p>
|
||||
<button onclick="this.closest('dialog').close()">Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Image Optimization
|
||||
```html
|
||||
<!-- Responsive images -->
|
||||
<img
|
||||
src="image-800.jpg"
|
||||
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
|
||||
sizes="(max-width: 640px) 100vw, 800px"
|
||||
alt="Description"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- Modern formats with fallback -->
|
||||
<picture>
|
||||
<source srcset="image.avif" type="image/avif" />
|
||||
<source srcset="image.webp" type="image/webp" />
|
||||
<img src="image.jpg" alt="Description" />
|
||||
</picture>
|
||||
```
|
||||
|
||||
### Font Loading
|
||||
```css
|
||||
/* Preload critical fonts */
|
||||
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
|
||||
|
||||
/* font-display for FOUT control */
|
||||
@font-face {
|
||||
font-family: 'MyFont';
|
||||
src: url('font.woff2') format('woff2');
|
||||
font-display: swap; /* or optional, fallback */
|
||||
}
|
||||
```
|
||||
|
||||
### Critical CSS
|
||||
- Inline critical above-the-fold CSS
|
||||
- Load rest async
|
||||
- Use `<link rel="preload">` for fonts/assets
|
||||
|
||||
---
|
||||
|
||||
## Accessibility
|
||||
|
||||
### Semantic HTML
|
||||
```html
|
||||
<header>
|
||||
<nav aria-label="Main navigation">...</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1>Title</h1>
|
||||
<p>Content...</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside aria-label="Related links">...</aside>
|
||||
|
||||
<footer>...</footer>
|
||||
```
|
||||
|
||||
### ARIA Attributes
|
||||
```html
|
||||
<!-- Landmark roles (when semantic HTML insufficient) -->
|
||||
<div role="navigation" aria-label="Breadcrumbs">...</div>
|
||||
|
||||
<!-- State -->
|
||||
<button aria-pressed="false">Toggle</button>
|
||||
|
||||
<!-- Live regions -->
|
||||
<div aria-live="polite">Status message</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<button aria-label="Close modal">✕</button>
|
||||
```
|
||||
|
||||
### Skip Links
|
||||
```html
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Progressive Web Apps (PWA)
|
||||
|
||||
### Manifest
|
||||
```json
|
||||
{
|
||||
"name": "My App",
|
||||
"short_name": "App",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#667eea",
|
||||
"icons": [
|
||||
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
|
||||
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Service Worker (Basic)
|
||||
```javascript
|
||||
// Cache-first strategy
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => response || fetch(event.request))
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS Frameworks & Libraries
|
||||
|
||||
### Tailwind CSS (Utility-First)
|
||||
```html
|
||||
<div class="p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition">
|
||||
<h3 class="text-xl font-bold mb-2">Title</h3>
|
||||
<p class="text-gray-600">Description</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS-in-JS (React)
|
||||
```javascript
|
||||
const Button = styled.button`
|
||||
padding: 12px 24px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
&:hover { background: var(--primary-hover); }
|
||||
`;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
### Feature Detection
|
||||
```javascript
|
||||
if ('IntersectionObserver' in window) {
|
||||
// Use Intersection Observer
|
||||
} else {
|
||||
// Fallback
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Feature Queries
|
||||
```css
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.glass { backdrop-filter: blur(10px); }
|
||||
}
|
||||
|
||||
@supports not (backdrop-filter: blur(10px)) {
|
||||
.glass { background: rgba(255,255,255,0.9); }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Checklist
|
||||
|
||||
✅ Mobile-first responsive
|
||||
✅ Fast load (<3s)
|
||||
✅ Accessible (WCAG AA)
|
||||
✅ Semantic HTML
|
||||
✅ Optimized images
|
||||
✅ Works without JS (progressive enhancement)
|
||||
✅ Cross-browser tested
|
||||
✅ Touch-friendly (44px targets)
|
||||
|
||||
---
|
||||
|
||||
*For responsive patterns, see responsive-design.md. For forms, see forms.md.*
|
||||
Reference in New Issue
Block a user