AgentSkillsCN

Angular

适用于[PROJECT_NAME]的Angular前端开发模式

SKILL.md
--- frontmatter
description: Angular frontend development patterns for [PROJECT_NAME]
globs:
  - "src/app/**/*.ts"
  - "src/app/**/*.html"
  - "src/app/**/*.scss"
  - "src/app/**/*.css"
alwaysApply: false

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:

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

Project Context

Tech Stack

<!-- Extracted from specwright/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 specwright/product/architecture-decision.md -->

[ARCHITECTURE_PATTERNS]

Project Structure

<!-- Extracted from specwright/product/architecture-structure.md -->
code
[PROJECT_STRUCTURE]

Design System

<!-- Extracted from specwright/product/design-system.md -->

Colors

[DESIGN_COLORS]

Typography

[DESIGN_TYPOGRAPHY]

Spacing

[DESIGN_SPACING]

Components

[DESIGN_COMPONENTS]

Reference: specwright/product/design-system.md

UX Patterns

<!-- Extracted from specwright/product/ux-patterns.md -->

Navigation

[UX_NAVIGATION]

User Flows

[UX_USER_FLOWS]

Feedback States

[UX_FEEDBACK_STATES]

Accessibility

[UX_ACCESSIBILITY]

Reference: specwright/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.