aa489c7eb8
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
50 lines
1.9 KiB
Markdown
50 lines
1.9 KiB
Markdown
|
|
### Navigation Patterns
|
|
|
|
- **Top Navigation**: Horizontal menu, common for websites
|
|
- **Side Navigation**: Vertical menu, ideal for dashboards
|
|
- **Hamburger Menu**: Hidden menu, mobile-first approach
|
|
- **Bottom Navigation**: Mobile apps, 3-5 primary destinations
|
|
- **Breadcrumbs**: Show location in hierarchy
|
|
- **Tabs**: Switch between related content views
|
|
- **Mega Menu**: Large dropdown with categories and links
|
|
|
|
### Form Patterns
|
|
|
|
- **Single-Column Layout**: One field per row, optimal for mobile
|
|
- **Multi-Step Forms**: Break complex forms into steps with progress indicator
|
|
- **Inline Validation**: Real-time feedback as users type
|
|
- **Field Labels**: Always visible, above or beside field
|
|
- **Optional vs Required**: Mark optional fields (not required)
|
|
- **Input Masks**: Format phone numbers, dates, credit cards
|
|
- **Autocomplete**: Suggest values, reduce typing errors
|
|
|
|
### Data Display Patterns
|
|
|
|
- **Tables**: Structured data with sorting and filtering
|
|
- **Cards**: Grouped information with visual hierarchy
|
|
- **Lists**: Sequential items with consistent formatting
|
|
- **Grids**: Visual browsing, product catalogs
|
|
- **Timelines**: Chronological events
|
|
- **Dashboards**: KPIs and metrics at a glance
|
|
|
|
### Feedback Patterns
|
|
|
|
- **Toast Notifications**: Brief, auto-dismissing messages
|
|
- **Modals**: Focused attention, confirmation dialogs
|
|
- **Inline Messages**: Contextual feedback near relevant elements
|
|
- **Progress Indicators**: Determinate or indeterminate loading
|
|
- **Empty States**: Helpful messaging when no content exists
|
|
- **Error States**: Clear error messages with recovery guidance
|
|
|
|
### Mobile Patterns
|
|
|
|
- **Pull-to-Refresh**: Swipe down to update content
|
|
- **Swipe Actions**: Reveal actions on list items
|
|
- **Infinite Scroll**: Load more content as user scrolls
|
|
- **Bottom Sheets**: Contextual options from bottom of screen
|
|
- **FAB (Floating Action Button)**: Primary action, always visible
|
|
- **Gestures**: Tap, swipe, pinch, long-press, drag
|
|
|
|
---
|