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
53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
# 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.
|