Frontend Patterns

TypeScript, Vue.js, Angular und moderne Web-Development Patterns fuer performante, barrierefreie Frontends.

---

Ueberblick

Der Frontend Patterns Skill umfasst:

• Component Architecture — Composition, Smart/Dumb Components
• State Management — Pinia, NgRx, Signals
• TypeScript Patterns — Generics, Utility Types, Type Guards
• Performance — Lazy Loading, Code Splitting, SSR
• Accessibility — WCAG 2.1 AA, ARIA, Keyboard Navigation

Kernthemen

Component Patterns

Pattern	Beschreibung
Smart/Dumb	Container (Logik) vs. Presentational (UI)
Composables (Vue)	Wiederverwendbare Logik extrahieren
Render Props	Flexible Rendering-Delegation
Compound Components	Zusammengehoerige Komponenten-Gruppen

Framework-spezifisch

Vue.js 3Angular 17+

• Composition API (ref, computed, watch)
• Pinia Store Pattern
• VueUse Composables
• Dynamic Components

• Signals und RxJS
• Standalone Components
• Control Flow (@if, @for)
• Dependency Injection

Performance-Checkliste

• Lazy Loading fuer Routes und Heavy Components
• Code Splitting mit Dynamic Imports
• Virtual Scrolling fuer grosse Listen
• Image Optimization (WebP, responsive, lazy)
• Memoization wo sinnvoll

Verwandte Agents

• Frontend Expert
• Code Reviewer

---

Quelldatei: skills/frontend-patterns/SKILL.md