Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Kiến trúc sư Angular

Skill giúp thiết kế và viết code Angular 17+ với standalone components, signals, NgRx, RxJS, tối ưu bundle và kiểm thử.

Lập trìnhTrung cấp★ 11,594⑂ 1,119Điểm AI 9/10Cập nhật lần cuối: 7 thg 8, 2026

Làm được gì

  • Sinh standalone component Angular 17+ dùng signals (input.required, output, computed) và OnPush.
  • Cấu hình routing nâng cao: lazy loading, guards, resolvers.
  • Dựng NgRx: actions, reducer, selectors, effects, entity adapter.
  • Áp dụng mẫu RxJS an toàn: takeUntilDestroyed, xử lý lỗi trong stream.
  • Hiệu năng & test: trackBy, kiểm tra bundle bằng ng build --configuration production, viết test với TestBed và nhắm coverage >85%.
  • Danh sách MUST DO / MUST NOT DO giúp tránh lỗi phổ biến: quên unsubscribe, mutate state, lạm dụng any.

Phù hợp với ai

  • Dev frontend làm dự án Angular 17+ hoặc đang migrate từ NgModule.
  • Nhóm cần một khuôn mẫu NgRx thống nhất cho toàn bộ dự án.
  • Tech lead cần kiểm soát change detection, kích thước bundle và độ phủ test trong app doanh nghiệp.

Ví dụ sử dụng

  1. "Tạo component user-card standalone dùng signals và OnPush" → nhận component kèm file test.
  2. "Thêm NgRx store cho tính năng users" → bộ actions/reducer/selectors/effects và cách kiểm tra bằng Redux DevTools.
  3. "Tách route admin thành lazy load kèm auth guard" → cấu hình route, guard và lệnh kiểm tra bundle.

· · · 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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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 Claude 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.

  1. Mở terminal.
  2. Clone repo: git clone https://github.com/Jeffallan/claude-skills.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy toàn bộ thư mục skill (gồm cả references/): cp -r claude-skills/skills/angular-architect ~/.claude/skills/
  5. Kiểm tra: ls ~/.claude/skills/angular-architect phải thấy SKILL.md và thư mục references/.
  6. Khởi động lại Claude Code, rồi yêu cầu ví dụ "tạo standalone component", "setup NgRx store" trong dự án Angular để skill tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT