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
1.9 KiB
1.9 KiB
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