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

Hướng dẫn phát triển Angular

Skill cung cấp cho Claude bộ quy ước Angular/TypeScript: type-safety, signals, tối ưu hiệu năng và bảo mật.

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

Làm được gì

  • Nạp cho Claude bộ quy tắc cần tuân theo khi viết hoặc review code Angular/TypeScript.
  • Bắt buộc dùng interface cho model, tránh any, đặt tên biến mô tả rõ, tên file kebab-case theo chuẩn Angular.
  • Khuyến nghị các pattern Angular hiện đại: standalone component, signals, hàm inject(), async pipe, lazy loading, NgOptimizedImage, deferrable views.
  • Gồm hướng dẫn tối ưu hiệu năng (trackBy với ngFor, pure pipe, không thao tác DOM trực tiếp) và bảo mật (tránh innerHTML, dùng sanitization sẵn có của Angular).
  • Yêu cầu viết unit test theo mẫu Arrange-Act-Assert.

Phù hợp với ai

  • Lập trình viên frontend làm dự án Angular phiên bản mới muốn code theo cú pháp hiện đại.
  • Tech lead cần giữ style nhất quán (thụt lề 2 space, nháy đơn, ưu tiên const).
  • Nhóm đang chuyển dần từ kiến trúc NgModule sang standalone/signals.

Ví dụ sử dụng

  1. "Tạo component hiển thị hồ sơ người dùng" → sinh standalone component dùng signals và inject(), file đặt tên user-profile.component.ts.
  2. "Danh sách này render chậm, tối ưu giúp tôi" → thêm trackBy, tách pure pipe, giảm re-render không cần thiết.
  3. "Review service này" → loại bỏ any, định nghĩa interface, bổ sung test .spec.ts theo Arrange-Act-Assert.

· · · 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/Mindrally/skills/HEAD/angular-development/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 angular-development từ repo GitHub Mindrally/skills vào ~/.claude/skills/angular-development/ 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/Mindrally/skills.git /tmp/mindrally-skills && mkdir -p ~/.claude/skills && cp -r /tmp/mindrally-skills/angular-development ~/.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 skill về thư mục tạm: git clone https://github.com/Mindrally/skills.git /tmp/mindrally-skills
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy riêng skill này: cp -r /tmp/mindrally-skills/angular-development ~/.claude/skills/
  5. Kiểm tra bằng ls ~/.claude/skills/angular-development xem có file SKILL.md.
  6. Khởi động lại Claude Code, mở thư mục dự án Angular và thử yêu cầu "tạo component Angular" để skill được áp dụng.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0