Kiến trúc sư Angular
Skill giúp thiết kế và viết code Angular 17+ với standalone components, signals, NgRx và RxJS theo chuẩn doanh nghiệp.
Lập trìnhTrung cấp★ 12,277⑂ 1,176Điểm AI 9/10Cập nhật lần cuối: 30 thg 10, 2026
Giúp được gì
- Sinh standalone component Angular 17+ dùng signals (
input.required,output,computed) và OnPush. - Thiết lập routing nâng cao: lazy loading, guard, resolver; và NgRx đầy đủ action/reducer/selector/effect.
- Chuẩn hóa quản lý subscription RxJS bằng
takeUntilDestroyedhoặcasyncpipe, bắt buộc xử lý lỗi. - Kiểm tra bundle với
ng build --configuration productionvà viết test TestBed nhắm coverage >85%. - Có bảng tài liệu tham chiếu theo chủ đề (
references/components.md,rxjs.md,ngrx.md,routing.md,testing.md).
Phù hợp với ai
- Dev frontend đang làm dự án Angular 17+ hoặc migrate từ NgModule sang standalone.
- Nhóm gặp khó với kiến trúc state NgRx và rò rỉ bộ nhớ do RxJS.
- Tech lead muốn AI tuân thủ nhất quán quy tắc OnPush, strict TypeScript, accessibility.
Ví dụ sử dụng
- "Tạo trang danh sách user bằng standalone component + signals" → nhận component OnPush, service và file test.
- "Thêm NgRx store cho feature users" → scaffold action/reducer/selector/effect kèm bước kiểm tra Redux DevTools.
- "Lazy-load khu vực admin và thêm auth guard" → cấu hình route
loadChildrenvà functional guard.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/angular-architect/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên AI Skill Mart. Copy thư mục skills/angular-architect từ repo GitHub Jeffallan/claude-skills vào ~/.claude/skills/angular-architect/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/Jeffallan/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/skills/angular-architect ~/.claude/skills/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở terminal.
- Clone repo:
git clone https://github.com/Jeffallan/claude-skills.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills - Copy skill (kèm thư mục references):
cp -r claude-skills/skills/angular-architect ~/.claude/skills/ - Kiểm tra trong
~/.claude/skills/angular-architectcóSKILL.mdvà thư mụcreferences/. - Khởi động lại Claude Code, rồi yêu cầu ví dụ: "Tạo standalone component Angular 17 cho trang user".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT