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

.opencode/skills/ui-ux-design-user-experience/references/4-interaction-design.md

@@ -0,0 +1,80 @@
+
+### User Flows
+
+**Creating User Flows:**
+1. Identify the task or goal
+2. Map entry points
+3. Document each step and decision
+4. Include success and error paths
+5. Identify drop-off points
+
+**Standard Symbols:**
+- Rectangles: Screens/pages
+- Diamonds: Decision points
+- Arrows: Flow direction
+- Ovals: Start/end points
+- Parallelograms: User input
+
+### Wireframing
+
+**Fidelity Levels:**
+- **Low-Fidelity**: Sketches, basic shapes, placeholder content
+- **Mid-Fidelity**: Grayscale, real content, basic interactions
+- **High-Fidelity**: Near-final design, realistic data
+
+**Essential Elements:**
+- Layout structure and grid
+- Content placement and hierarchy
+- Navigation elements
+- Interactive components
+- Annotations for developers
+
+**Tools:** Figma, Sketch, Balsamiq, Whimsical
+
+### Prototyping
+
+**Fidelity Levels:**
+- **Paper Prototypes**: Quick sketches for early testing
+- **Clickable Wireframes**: Basic interactive flows
+- **High-Fidelity Prototypes**: Near-production interactivity
+
+**Uses:**
+- Concept validation
+- Usability testing
+- Stakeholder presentations
+- Developer communication
+
+**Tools:** Figma, Principle, ProtoPie, Framer, InVision
+
+### Micro-interactions
+
+**Components:**
+1. **Trigger**: User action or system condition that initiates
+2. **Rules**: What happens when triggered
+3. **Feedback**: Visual, audio, or haptic response
+4. **Loops and Modes**: How interaction changes over time
+
+**Examples:**
+- Like button animation
+- Pull-to-refresh indicator
+- Password strength meter
+- Toggle switch animation
+- Form field validation feedback
+
+### Animations and Transitions
+
+**Principles:**
+- **Easing**: Natural acceleration/deceleration (ease-in-out preferred)
+- **Duration**: 200-500ms for most UI animations
+- **Choreography**: Coordinated element movement
+- **Purpose**: Always serve functional or emotional purpose
+
+**Types:**
+- Page transitions, loading animations
+- Hover states, focus indicators
+- Reveal animations, progress indicators
+- Celebratory animations (confetti, success)
+
+**Tools:** After Effects, Principle, Lottie, CSS animations
+
+---