How do I install the Angular Coding skill?

Run npx skillmds@latest add khaihuynhvn/angular-coding in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Angular Coding safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Angular Coding?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Angular Coding free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Angular Coding?

khaihuynhvn (@khaihuynhvn) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Angular Coding by khaihuynhvn — Agent Skill

Name: Angular Coding
Author: khaihuynhvn

Angular Coding

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.

khaihuynhvn aa83e6a 7 files · 30.5 KB Updated Sep 17, 2026

File contents

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:

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

Quick Reference

Naming Conventions (All Versions)

Type	Convention	Example
Signal	Prefix `$`	`$user`, `$state`
Observable	Suffix `$`	`isLoading$`, `data$`
Private	Prefix `_`	`_destroyed$`, `_load()`

Core Principles

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

Decision Flow

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

base.md - Common patterns all versions
module-based.md - NgModule patterns (v13-14)
standalone.md - Standalone components (v15+)
signals.md - Signals API (v16+)
control-flow.md - @if/@for/@defer (v17+)
advanced-v18-19.md - Signal inputs, linkedSignal (v18+)

---name: angular-codingdescription: 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 StandardsVersion-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:```Glob: **/*.service.ts → Xem service patternGlob: **/*.component.ts → Xem component pattern Glob: **/*.model.ts → Xem model/interface patternGrep: 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:| 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 |## Quick Reference### Naming Conventions (All Versions)| Type | Convention | Example ||------|------------|---------|| Signal | Prefix `$` | `$user`, `$state` || Observable | Suffix `$` | `isLoading$`, `data$` || Private | Prefix `_` | `_destroyed$`, `_load()` |### Core Principles| 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 |### Decision Flow```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- [base.md](base.md) - Common patterns all versions- [module-based.md](module-based.md) - NgModule patterns (v13-14)- [standalone.md](standalone.md) - Standalone components (v15+)- [signals.md](signals.md) - Signals API (v16+)- [control-flow.md](control-flow.md) - @if/@for/@defer (v17+)- [advanced-v18-19.md](advanced-v18-19.md) - Signal inputs, linkedSignal (v18+)

Frequently asked questions