Claude Skill MartKhám phá skillSkill 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 và RxJS theo chuẩn doanh nghiệp.

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

Làm được gì

Biến Claude thành một kiến trúc sư Angular cấp cao:

  • Tạo standalone component Angular 17+ với OnPush và API signals (input.required(), output(), computed())
  • Thiết kế routing: lazy loading, guards, resolvers
  • Dựng NgRx: actions / reducers / selectors / effects, entity adapter, kiểm tra luồng action bằng Redux DevTools
  • Áp dụng mẫu RxJS: hủy đăng ký bằng takeUntilDestroyed, bắt buộc xử lý lỗi
  • Tối ưu hiệu năng: build production để kiểm tra kích thước bundle
  • Viết test với TestBed, mục tiêu coverage > 85%

Các hướng dẫn chi tiết được tách sang references/components.md, rxjs.md, ngrx.md, routing.md, testing.md và chỉ nạp khi cần, giúp tiết kiệm context.

Phù hợp với ai

  • Nhóm đang chuyển từ kiến trúc NgModule sang standalone/signals của Angular 17+
  • Dự án dùng NgRx nhưng cấu trúc store mỗi người viết một kiểu, thiếu nhất quán
  • Tech lead muốn ép các quy tắc: không rò rỉ subscription, không dùng any, không bỏ test

Ví dụ sử dụng

  1. "Tạo component user-card dạng standalone dùng signals" → sinh component với OnPush, input.required<string>(), state dẫn xuất bằng computed() kèm file test.
  2. "Thêm NgRx store cho tính năng users" → sinh bộ action load/success/failure, reducer bất biến, feature selector và effect gọi HTTP.
  3. "Sửa rò rỉ bộ nhớ trong component này" → refactor subscribe thủ công sang takeUntilDestroyed(destroyRef) hoặc async pipe, thêm trackBy cho *ngFor.

· · · Hướng dẫn cài đặt · · ·

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. Tải repo skill: git clone https://github.com/Jeffallan/claude-skills.git
  3. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy nguyên thư mục skill (để không mất phần 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 thử yêu cầu "tạo standalone component Angular 17" — skill sẽ tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT