majiayu000 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
OnPushby 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.