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/references/core-performance.md

@@ -0,0 +1,68 @@
+# Core Performance & Accessibility Standards
+
+**Status**: Mandaory
+**Applies To**: ALL Frameworks (React, Vue, Angular, Svelte, etc.)
+
+## 🚀 Performance: The "Zero-Overhead" Standard
+
+### 1. Core Web Vitals (The Holy Trinity)
+
+You must optimize for these metrics _before_ writing business logic.
+
+- **LCP (Largest Contentful Paint)**: < 2.5s
+  - **Strategy**: The LCP element (usually Hero Image or H1) must be in the initial HTML.
+  - **Ban**: Never lazy-load the LCP image. Never use client-side rendering for the LCP element.
+  - **Code**: `<img fetchpriority="high" decoding="sync" ... />`
+
+- **INP (Interaction to Next Paint)**: < 200ms
+  - **Strategy**: Break up long tasks.
+  - **Ban**: `useEffect` or watchers that run heavy computation on input. Yield to main thread (`scheduler.yield()` or `setTimeout(..., 0)`).
+
+- **CLS (Cumulative Layout Shift)**: < 0.1
+  - **Strategy**: Rigidly defined dimensions for all media and containers.
+  - **Ban**: Images without `width/height`. Ad containers without `min-height`.
+
+### 2. Bundle Analysis
+
+- **Budget**: Initial JS < 50KB (gzip).
+- **Tree-Shaking**: Import specific functions, not whole libraries.
+  - ✅ `import { map } from 'lodash-es'`
+  - ❌ `import _ from 'lodash'`
+- **Splitting**: Route-level splitting is mandatory. Component-level splitting for heavy interactions (modals, charts).
+
+### 3. Image Optimization
+
+- **Formats**: AVIF > WebP > JPG/PNG.
+- **Responsive**: Use `srcset` and `sizes`.
+- **Lazy**: `loading="lazy"` for everything below the fold.
+
+---
+
+## ♿ Accessibility: The "Keyboard First" Standard
+
+**Rule**: If you can't use it with `Tab` + `Enter`/`Space`, it is broken.
+
+### 1. Semantic HTML
+
+- **Buttons**: Use `<button>`, not `<div onClick>`.
+- **Links**: Use `<a>` with `href`, not `<button onClick="go()">`.
+- **Landmarks**: `<main>`, `<nav>`, `<aside>`, `<header>`, `<footer>`.
+
+### 2. Focus Management
+
+- **Visible Focus**: Never remove `outline` without replacing it with a custom high-contrast focus style.
+- **Trap Focus**: Modals must trap focus inside them.
+
+### 3. ARIA (Last Resort)
+
+- Use ARIA only when HTML is insufficient.
+- **No ARIA > Bad ARIA**.
+- **Images**: `alt=""` for decorative, descriptive text for informational.
+
+---
+
+## 🔒 Security Basics
+
+- **XSS**: Sanitize all `innerHTML`.
+- **Deps**: Audit `npm audit` regularly.
+- **HTTPS**: Enforce HSTS.