Files

Luca Sacchi Ricciardi aa489c7eb8 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

2026-04-03 13:13:59 +02:00

2.3 KiB

Raw Blame History

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.

2.3 KiB Raw Blame History