Agent skill

angular-michsindlinger-agent-os-extended

Angular frontend development patterns for [PROJECT_NAME]

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/angular-michsindlinger-agent-os-extended

SKILL.md

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

Module File Use When
Component Patterns components.md Creating/modifying components
State Management state-management.md Adding state, signals, stores
API Integration api-integration.md HTTP calls, services, interceptors
Forms & Validation forms-validation.md Forms, validators, error display
Dos and Don'ts dos-and-donts.md Project-specific learnings

How to Load Modules

When you need detailed patterns, read the specific module:

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

Project Context

Tech Stack

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

Architecture Patterns

[ARCHITECTURE_PATTERNS]

Project Structure

[PROJECT_STRUCTURE]

Design System

Colors

[DESIGN_COLORS]

Typography

[DESIGN_TYPOGRAPHY]

Spacing

[DESIGN_SPACING]

Components

[DESIGN_COMPONENTS]

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

UX Patterns

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.

Didn't find tool you were looking for?

Be as detailed as possible for better results