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/angular.md

@@ -0,0 +1,52 @@
+# Modern Angular Architecture
+
+**Status**: Definitive Guide
+**Stack**: Angular 17+
+
+## 🏗 Architecture: Standalone & Zone-less
+
+### 1. Standalone Components
+
+- **Ban**: `NgModule` (unless for legacy libs).
+- **Enforce**: `standalone: true` in all components, directives, and pipes.
+- **Why**: Tree-shaking, easier testing, simplified learning curve.
+
+### 2. Signals (State Management)
+
+- **Signals over Observables**: Use Signals for synchronous state. Use RxJS ONLY for complex asynchronous event streams (debounce, switchMap).
+- **Ban**: `Zone.js` (eventually). Prepare for zoneless by using `ChangeDetectionStrategy.OnPush` everywhere.
+
+```typescript
+// ✅ GOOD: Signal
+@Component({ ... changeDetection: ChangeDetectionStrategy.OnPush })
+export class Counter {
+  count = signal(0);
+  double = computed(() => this.count() * 2);
+
+  increment() {
+    this.count.update(c => c + 1);
+  }
+}
+```
+
+### 3. Control Flow Syntax
+
+- **Use**: `@if`, `@for`, `@switch`.
+- **Ban**: `*ngIf`, `*ngFor` (legacy structural directives).
+
+## ⚡ Performance Patterns
+
+### 1. Deferrable Views
+
+- Use `@defer` to lazy load components without routing.
+- Criteria: `@defer (on viewport)` for below-the-fold content.
+
+### 2. Hydration
+
+- Enable Client Hydration in `app.config.ts`.
+- Avoid direct DOM manipulation which breaks hydration.
+
+## 🧪 Testing
+
+- **Harnesses**: Use Component Harnesses for robust tests.
+- **Signals**: Test signals by verifying computed outputs.

.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.

.opencode/skills/references/modern-signals.md

@@ -0,0 +1,43 @@
+# Modern Signals & Fine-Grained Reactivity
+
+**Stack**: Svelte 5 (Runes), SolidJS, Qwik
+
+## 🧠 The Philosophy: "No Virtual DOM"
+
+Unlike React/Vue, these frameworks target the DOM directly.
+
+- **Fine-Grained**: Only the text node that changes updates. No component re-renders.
+- **Mental Model**: Code runs _once_ (setup), then reactivity takes over.
+
+## 🧱 Framework specifics
+
+### Svelte 5 (Runes)
+
+- **State**: `let count = $state(0)`
+- **Derived**: `let double = $derived(count * 2)`
+- **Side Effects**: `$effect(() => ...)`
+- **Snippets**: Replace slots with `{#snippet}`.
+
+### SolidJS
+
+- **Read/Write Split**: `const [count, setCount] = createSignal(0)`
+- **DOM Access**: strictly in `onMount`.
+- **Control Flow**: Use `<Show>`, `<For>` (don't use map).
+
+### Qwik (Resumability)
+
+- **The Golden Rule**: Do not execute JS on the client unless checking an event.
+- **Serialized State**: All state must be serializable (JSON).
+- **$**: The optimizer barrier. `onClick$`, `useSignal$`.
+
+## ⚡ Performance Targets
+
+1.  **Hydration**:
+    - **Svelte/Solid**: Fast hydration.
+    - **Qwik**: No hydration (Resumability).
+2.  **Closures**: Avoid creating closures in render loops (except Qwik where `$` handles it).
+
+## 🧪 Testing
+
+- **E2E**: Playwright is the gold standard for all three.
+- **Unit**: Vitest.

.opencode/skills/references/vue-nuxt.md

@@ -0,0 +1,55 @@
+# Vue & Nuxt 3 Architecture
+
+**Status**: Definitive Guide
+**Stack**: Vue 3 (Composition API), Nuxt 3
+
+## 🏗 Architecture: Composition & Modules
+
+### 1. Composition API Only
+
+- **Ban**: Options API (`data`, `methods`).
+- **Enforce**: `<script setup lang="ts">`.
+- **Why**: Better TypeScript support, logic reuse via composables.
+
+### 2. Nuxt Directory Structure
+
+```
+server/              # API routes (Nitro)
+components/          # Auto-imported components
+composables/         # Auto-imported logic
+pages/               # File-based routing
+layouts/             # Layouts
+stores/              # Pinia definitions
+```
+
+## ⚡ Performance Patterns
+
+### 1. Data Fetching
+
+- **SSR-Friendly**: Use `useFetch` or `useAsyncData`.
+- **Keying**: Always provide a unique key if parameters change.
+- **Lazy**: `lazy: true` to prevent blocking navigation.
+
+```ts
+// ✅ GOOD
+const { data, pending } = await useFetch("/api/posts", {
+  lazy: true,
+  server: false, // If client-only execution is needed
+});
+```
+
+### 2. State Management (Pinia)
+
+- **Setup Stores**: Use the function syntax (like `setup()`), not the object syntax.
+- **Dedupe**: Don't put everything in store. Use `useState` for simple shared state.
+
+### 3. Compute Stability
+
+- Use `computed()` for derived state.
+- Use `shallowRef()` for large objects that don't need deep reactivity.
+
+## 🧪 Testing
+
+- **Unit**: Vitest.
+- **Component**: Vue Test Utils.
+- **E2E**: Nuxt Test Utils (Playwright wrapper).