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.1 KiB
Markdown
50 lines
1.1 KiB
Markdown
|
|
### Dashboard Design
|
|
|
|
**Purpose:** Provide at-a-glance view of key metrics and actions
|
|
|
|
**Elements:**
|
|
- KPI cards, charts, graphs
|
|
- Navigation, filters, search
|
|
- Notifications, quick actions
|
|
|
|
**Best Practices:**
|
|
- Prioritize most important information
|
|
- Use visual hierarchy to guide attention
|
|
- Enable customization and personalization
|
|
- Optimize for different screen sizes
|
|
|
|
### Form Design
|
|
|
|
**Best Practices:**
|
|
- Single-column layout preferred
|
|
- Clear labels above fields
|
|
- Logical field grouping
|
|
- Inline validation with helpful messages
|
|
- Smart defaults and autofill
|
|
- Clear primary and secondary actions
|
|
|
|
### Data Visualization
|
|
|
|
**Chart Types:**
|
|
- Bar charts, line charts, pie charts
|
|
- Area charts, scatter plots, heatmaps
|
|
- Tables, sparklines, gauges
|
|
|
|
**Best Practices:**
|
|
- Choose appropriate chart for data type
|
|
- Use color meaningfully
|
|
- Provide context and labels
|
|
- Enable interactivity (tooltips, filtering)
|
|
|
|
### Complex Workflows
|
|
|
|
**Workflow Design:**
|
|
- Break into clear steps
|
|
- Show progress indicators
|
|
- Allow saving and resuming
|
|
- Provide validation at each step
|
|
- Confirm completion and next steps
|
|
|
|
---
|