Angular Frontend Skill

Angular Frontend Skill

Project: [PROJECT_NAME] Framework: Angular [VERSION] Generated: [DATE]

Quick Reference

Components

• Smart vs Dumb: Container components handle logic, presentational components are pure
• Change Detection: Use OnPush by default for better performance
• Signals: Prefer signals over BehaviorSubject for reactive state (Angular 16+)

State Management

• Local State: Use signals or component properties
• Shared State: Use services with signals or NgRx/​Signals Store
• Server State: Consider TanStack Query or similar for caching

API Integration

• HttpClient: Always use with interceptors for auth/​error handling
• Error Handling: Use catchError operator, show user-friendly messages
• Loading States: Track loading state for better UX

Forms

• Reactive Forms: Prefer over template-driven for complex forms
• Validation: Custom validators in separate files
• Error Display: Consistent error message components

Testing

• Unit Tests: Use TestBed, mock dependencies
• Component Tests: Use ComponentFixture
• E2E: Cypress or Playwright

Available Modules

How to Load Modules

When you need detailed patterns, read the specific module:

Read: .claude/​skills/​frontend-angular/[module].md

Project Context

Tech Stack

<!-- Extracted from agent-os/​product/​tech-stack.md -->

• Framework: Angular [ANGULAR_VERSION]
• State Management: [STATE_MANAGEMENT_LIBRARY]
• UI Library: [UI_LIBRARY]
• Testing: [TESTING_FRAMEWORK]
• Build Tool: [BUILD_TOOL]

Architecture Patterns

<!-- Extracted from agent-os/​product/​architecture-decision.md -->

[ARCHITECTURE_PATTERNS]

Project Structure

<!-- Extracted from agent-os/​product/​architecture-structure.md -->

[PROJECT_STRUCTURE]

---

Design System

<!-- Extracted from agent-os/​product/​design-system.md -->

Colors

[DESIGN_COLORS]

Typography

[DESIGN_TYPOGRAPHY]

Spacing

[DESIGN_SPACING]

Components

[DESIGN_COMPONENTS]

Reference: agent-os/​product/​design-system.md

---

UX Patterns

<!-- Extracted from agent-os/​product/​ux-patterns.md -->

Navigation

[UX_NAVIGATION]

User Flows

[UX_USER_FLOWS]

Feedback States

[UX_FEEDBACK_STATES]

Accessibility

[UX_ACCESSIBILITY]

Reference: agent-os/​product/​ux-patterns.md

---

Self-Learning

Wenn du während der Implementierung etwas lernst:

• Unerwartetes Verhalten
• Besserer Ansatz gefunden
• Fehler der Zeit gekostet hat

→ Füge es zu dos-and-donts.md in diesem Ordner hinzu.