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
This commit is contained in:
52
.opencode/skills/frontend-developer/references/angular.md
Normal file
52
.opencode/skills/frontend-developer/references/angular.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user