OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry angular-michsindlinger-agent-os-extended

Angular frontend development patterns for [PROJECT_NAME]

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/angular-michsindlinger-agent-os-extended" ~/.claude/skills/majiayu000-claude-skill-registry-angular-michsindlinger-agent-os-extended && rm -rf "$T"
manifest: skills/data/angular-michsindlinger-agent-os-extended/SKILL.md
tags
#angular#frontend#typescript#development#testing
source content

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

ModuleFileUse When
Component Patternscomponents.mdCreating/modifying components
State Managementstate-management.mdAdding state, signals, stores
API Integrationapi-integration.mdHTTP calls, services, interceptors
Forms & Validationforms-validation.mdForms, validators, error display
Dos and Don'tsdos-and-donts.mdProject-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

<!-- 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.