AgentSkillsCN

angular-coding

遵循版本感知的 Angular 编码规范。自动从 package.json 中识别 Angular 版本,并应用相应的开发模式。当用户编写 Angular 组件、服务或 TypeScript 代码时,可使用此技能。

SKILL.md
--- frontmatter
name: angular-coding
description: Angular coding standards with version-aware patterns. Automatically detects Angular version from package.json and applies appropriate patterns. Use when writing Angular components, services, or TypeScript code.

Angular Coding Standards

Version-aware Angular development patterns.

Pre-Edit Analysis

Trước khi edit Angular code, read:C:\Users\BLogic\.cursor\skills\project-scanner\SKILL.md

Quality gates cho high-risk edits (change signature, shared service, delete/rename).

Setup

Step 0: Scan Existing Patterns (Nếu project có code)

Trước khi tạo mới, scan project để follow convention đang dùng:

code
Glob: **/*.service.ts → Xem service pattern
Glob: **/*.component.ts → Xem component pattern  
Glob: **/*.model.ts → Xem model/interface pattern
Grep: FormGroup → Xem form pattern

Step 1: Detect Angular Version

Read package.json and find @angular/core version:

json
"@angular/core": "^17.0.0"  // → v17
"@angular/core": "~15.2.0"  // → v15

Step 2: Load Appropriate Patterns

Based on detected version, read the relevant files:

VersionFiles to Read
v13-14base.md + module-based.md
v15-16base.md + standalone.md + signals.md (preview)
v17base.md + standalone.md + signals.md + control-flow.md
v18-19+base.md + standalone.md + signals.md + control-flow.md + advanced-v18-19.md

Quick Reference

Naming Conventions (All Versions)

TypeConventionExample
SignalPrefix $$user, $state
ObservableSuffix $isLoading$, data$
PrivatePrefix __destroyed$, _load()

Core Principles

PriorityPrincipleGuideline
🥇Angular-native first95% dùng Angular built-in (reactive forms, validators, pipes, directives). 5% custom code khi Angular không hỗ trợ
🥈PerformanceOnPush, signals, object mapping > array loop, minimal subscriptions
🥉ReadabilitySimple code, dễ đọc, dễ sửa cho dev khác. OOP + SOLID

Decision Flow

code
Có vấn đề cần giải quyết?
    ↓
Angular có built-in? (FormControl, Pipe, Directive, Validator...)
    ├─ YES → Dùng Angular (95%)
    └─ NO  → Tạo custom với SOLID pattern (5%)

File Index