メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Continuous communication channel via MCP AI Interaction tool. Activate with 'khởi động ai_interaction'. Enables real-time Vietnamese conversation with action-first principle - execute first, explain minimally.
Codebase analysis tool for quality-first editing. Scan before edit to understand relationships, patterns, and impact.
Web research with automatic fallback mechanism. WebFetch → Browser MCP → User assistance via ai_interaction. Use when need to browse web.
SOC 職業分類に基づく
| 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. |
Version-aware Angular development patterns.
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).
Step 0: Scan Existing Patterns (Nếu project có code)
Trước khi tạo mới, scan project để follow convention đang dùng:
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:
"@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:
| Version | Files to Read |
|---|---|
| v13-14 | base.md + module-based.md |
| v15-16 | base.md + standalone.md + signals.md (preview) |
| v17 | base.md + standalone.md + signals.md + control-flow.md |
| v18-19+ | base.md + standalone.md + signals.md + control-flow.md + advanced-v18-19.md |
| Type | Convention | Example |
|---|---|---|
| Signal | Prefix $ | $user, $state |
| Observable | Suffix $ | isLoading$, data$ |
| Private | Prefix _ | _destroyed$, _load() |
| Priority | Principle | Guideline |
|---|---|---|
| 🥇 | Angular-native first | 95% dùng Angular built-in (reactive forms, validators, pipes, directives). 5% custom code khi Angular không hỗ trợ |
| 🥈 | Performance | OnPush, signals, object mapping > array loop, minimal subscriptions |
| 🥉 | Readability | Simple code, dễ đọc, dễ sửa cho dev khác. OOP + SOLID |
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%)