frontend-designSkill
Một file hướng dẫn giúp agent chọn màu, font và bố cục riêng cho từng trang, thay cho kiểu giao diện mặc định ai cũng thấy.
UI và thiết kếĐã đọc mã và tổng hợp ·
SkillsSkill, MCP, plugin, hook và CLI
Skill Cho Claude Code, Đọc Kỹ Trước Khi Cài
Skill giống một cuốn sổ tay nghề bạn đưa cho trợ lý AI: nó chỉ mở ra khi gặp đúng việc. Mình đọc mã và tài liệu của từng mục, ghi lại nó làm gì, chạm vào file nào trên máy bạn, ưu và nhược, dòng nào cũng có link nguồn.
Mình chọn
frontend-design (Skill)Một file hướng dẫn giúp agent chọn màu, font và bố cục riêng cho từng trang, thay cho kiểu giao diện mặc định ai cũng thấy.
stripe/ai (MCP, Skill)Cho agent đọc và tạo dữ liệu trên tài khoản Stripe (khách hàng, hóa đơn, gói thuê bao, hoàn tiền) qua MCP server của Stripe, kèm các skill hướng dẫn tích hợp Stripe đúng cách.
playwright-mcp (MCP)Cho agent mở trình duyệt, bấm, gõ và đọc trang web qua bản tóm tắt cấu trúc trang, không cần nhìn ảnh chụp.
Nhóm việc
UI và thiết kế
Web và backend
Test và review code
Bảo mật
Tiết kiệm token
Spec và kế hoạch
Docs và file Office
Database
Content và SEO
Agent và workflow
- Đọc mãXem nó chạm vào file nào, có gọi mạng không
- Gom phản hồiTừ GitHub issues và bài review
- Ưu và nhượcMỗi dòng có link nguồn
- Ghi ngày đọcSố sao và phiên bản kèm ngày
- Mục
- 41
- Nhóm việc
- 10
- Loại
- 5
- Đọc gần nhất
Skill, hook, MCP, CLI
Skill, Hook, MCP Là Gì?
3Claude đọc SKILL.md rồi làm theo.
Skill: Một thư mục có file SKILL.md chứa hướng dẫn. Claude chỉ đọc cả file khi gặp đúng loại việc.
Khi nào cần: Khi bạn cứ phải dán lại cùng một hướng dẫn, danh sách kiểm tra hay quy trình nhiều bước vào khung chat.
Ví dụ trong kho: frontend-design, impeccable, ui-ux-pro-max
3Hook chặn lệnh xóa, hỏi lại bạn.
Hook: Một lệnh tự chạy mỗi khi Claude làm một việc nhất định, ví dụ trước khi chạy lệnh xóa file.
Khi nào cần: Khi một việc phải luôn xảy ra ở một bước nhất định, ví dụ chặn lệnh xóa hay định dạng code sau mỗi lần sửa file.
Ví dụ trong kho: impeccable, tdd-guard, destructive_command_guard
3Claude trả lời theo tài liệu đó.
MCP: Một server nhỏ cho Claude thêm công cụ mới, ví dụ đọc tài liệu thư viện hay chạy SQL.
Khi nào cần: Khi bạn cứ phải chép dữ liệu từ một công cụ khác vào khung chat, ví dụ issue hay bảng theo dõi lỗi.
Ví dụ trong kho: Figma-Context-MCP, stripe/ai, mcp-server-cloudflare
3Đọc kết quả terminal rồi trả lời.
CLI: Một chương trình bạn gõ lệnh để chạy trong terminal. Claude cũng chạy được nó qua công cụ Bash.
Khi nào cần: Khi việc đó đã có một chương trình dòng lệnh làm tốt, và bạn muốn Claude gọi nó như bạn gõ trong terminal.
Ví dụ trong kho: agent-browser, gitleaks, rtk
Plugin: Một gói Claude Code cài một lần, bên trong có thể có skill, hook, MCP server và lệnh.
Cho người mới
Mấy Từ Khó, Nói Bằng Lời Thường
- Claude Code
- Trợ lý AI của Anthropic làm việc ngay trên máy bạn: bạn nhắn yêu cầu, nó đọc file, viết code và chạy lệnh giúp bạn. Cần gói Claude trả phí (Pro trở lên) hoặc tài khoản Console.
- Terminal
- Cửa sổ gõ lệnh bằng chữ thay vì bấm chuột. Trên Windows là PowerShell, trên Mac là Terminal. Phần lớn lệnh cài đặt gõ ở đây.
- Skill
- Một thư mục có file
SKILL.md, giống cuốn sổ tay nghề. Claude chỉ đọc dòng mô tả trước; gặp đúng việc mới mở cả sổ ra làm theo, nên skill không tốn chỗ khi chưa dùng. - MCP server
- Một chương trình nhỏ cho Claude thêm công cụ mới, như người giao hàng mang về dữ liệu từ nơi khác (tài liệu thư viện, cơ sở dữ liệu, trình duyệt).
- Hook
- Một lệnh tự chạy mỗi khi Claude làm một việc nhất định, như người gác cổng: ví dụ kiểm tra trước khi Claude chạy lệnh xóa file.
- Plugin và marketplace
- Plugin là gói cài một lần, bên trong có thể có skill, hook và MCP server. Marketplace là danh mục plugin, thường là một repo GitHub; bạn thêm danh mục rồi chọn plugin để cài.
- Repo GitHub
- Thư mục mã nguồn công khai trên GitHub. Số sao (★) cho biết bao nhiêu người đánh dấu, không phải điểm chất lượng.
Mình chọn
Sáu Mục Để Bắt Đầu
stripe/aiMCPSkill
Cho agent đọc và tạo dữ liệu trên tài khoản Stripe (khách hàng, hóa đơn, gói thuê bao, hoàn tiền) qua MCP server của Stripe, kèm các skill hướng dẫn tích hợp Stripe đúng cách.
Web và backendĐã đọc mã và tổng hợp ·
Cho agent mở trình duyệt, bấm, gõ và đọc trang web qua bản tóm tắt cấu trúc trang, không cần nhìn ảnh chụp.
Test và review codeĐã đọc mã và tổng hợp ·
Một hook chạy trước mỗi lệnh shell của agent, chặn các lệnh xóa hoặc ghi đè như rm -rf, git reset --hard, git push --force, DROP TABLE trước khi chúng chạy.
Bảo mậtĐã đọc mã và tổng hợp ·
rtkCLI
Rút gọn kết quả của lệnh shell như git status, npm test, ls trước khi agent đọc, để phần output đó tốn ít token hơn.
Tiết kiệm tokenĐã đọc mã và tổng hợp ·
grill-meSkill
Bắt agent hỏi bạn từng vòng câu hỏi về một ý tưởng hay kế hoạch, mỗi câu kèm một đáp án đề xuất, cho tới khi mọi quyết định đều đã chốt.
Spec và kế hoạchĐã đọc mã và tổng hợp ·
10 nhóm việc
Chọn Theo Việc Bạn Cần Làm
SkillMCPHook
UI và thiết kế
Giúp agent dựng giao diện đẹp hơn: chọn màu, chọn font, làm chuyển động và làm đúng theo bản Figma.
SkillMCPPlugin
Web và backend
Cho agent làm việc với thanh toán Stripe, Cloudflare, báo lỗi Sentry, và tự viết một MCP server mới.
SkillMCPHookCLI
Test và review code
Cho agent mở trình duyệt để thử trang, đọc lỗi trong console, và không cho sửa code khi chưa có test.
SkillHookCLI
Bảo mật
Chặn lệnh xóa nhầm, tìm lỗ hổng trong code, và quét API key bị lộ trước khi đẩy code lên GitHub.
SkillMCPPluginHookCLI
Tiết kiệm token
Cắt bớt chữ agent phải đọc và phải viết, và cho bạn xem mỗi ngày đã dùng bao nhiêu token, hết bao nhiêu tiền.
SkillCLI
Spec và kế hoạch
Viết spec, kế hoạch và danh sách việc trước khi agent bắt đầu code.
SkillMCPCLI
Docs và file Office
Đưa docs mới nhất của thư viện vào prompt, và cho agent đọc hoặc tạo file Excel, PDF.
SkillMCP
Database
Cho agent chạy SQL, xem bảng và quản lý Postgres hoặc Supabase.
SkillMCPCLI
Content và SEO
Kiểm tra SEO của website, lấy nội dung từ trang web và dựng video bằng code.
SkillMCPPlugin
Agent và workflow
Chia việc cho nhiều agent, làm việc với issue và pull request trên GitHub, và viết skill mới.
Phương pháp
Cách Mình Đọc Một Mục
6Viết Ưu, Nhược kèm link nguồn.
Cách cài
Cách Cài Skill, MCP Server Và Plugin Vào Claude Code, Codex
Claude Code
Skill
- Tạo thư mục cho skill trong thư mục skill cá nhân. Skill ở đây dùng được trong mọi dự án trên máy này.
mkdir -p ~/.claude/skills/<skill-name> - Đặt file SKILL.md của skill vào thư mục đó. Muốn skill chỉ chạy trong một repo, dùng .claude/skills/<skill-name>/SKILL.md trong repo đó.
MCP server
- Server chạy ở xa, có địa chỉ URL:
claude mcp add --transport http <name> <url> - Server chạy trên máy bạn. Mọi thứ sau dấu -- là lệnh khởi động server:
claude mcp add [options] <name> -- <command> [args...] - Xem các server đã thêm:
claude mcp list
Plugin
- Trong một phiên Claude Code, thêm marketplace (danh mục plugin) một lần:
/plugin marketplace add owner/repo - Rồi cài plugin từ marketplace đó:
/plugin install <plugin>@<marketplace>
Codex
Skill
- Codex đọc skill có cùng dạng: một thư mục có file SKILL.md, trong đó có name và description. Đặt thư mục vào đây để dùng trong mọi repo:
$HOME/.agents/skills/<skill-name>/SKILL.md - Hoặc đặt trong .agents/skills của một repo để chỉ repo đó dùng. Nếu skill mới chưa hiện, khởi động lại Codex.
MCP server
- Thêm server chạy trên máy bạn:
codex mcp add <server-name> -- <stdio server-command> - Xem các server đã thêm:
codex mcp list
Tài liệu Claude Code ghi rằng plugin bạn cài có thể chạy mã tùy ý trên máy với quyền của tài khoản bạn, và hook, MCP server chạy ngoài sandbox. Đọc tài liệu bảo mật plugin.
Hướng dẫn
Làm Theo Từng Bước Với Các Công Cụ Trong Kho
Claude CodeClaude Code + Remotion: Từ Prompt ra Video MP4Remotion biến component React thành video, Claude Code viết và sửa nó bằng chat. Quy trình 4 cấp độ, cách chọn phong cách và 9 lỗi cần kiểm trước khi render.
Claude CodeHook Claude Code: Vì Sao Exit 1 Không Chặn ĐượcHook PreToolUse chặn rm -rf trước khi Claude Code chạy. Cấu hình, script Node đã thử với 12 lệnh mẫu, và 3 hiểu lầm làm hook tưởng chặn mà không chặn.
Claude CodeQuảng Cáo Giảm 65% Token, Đo Thật Chỉ 8,5%Một skill hứa giảm 65% token, phép đo của JetBrains chỉ thấy 8,5%. Các cách miễn phí có sẵn trong Claude Code, và cách đọc phép đo trước khi cài công cụ ngoài.
Next.jsTăng Tốc Next.js: Lighthouse Mobile 58 lên 71Những gì đã làm trên một site Next.js static export: LCP từ 8,3s còn 5,4s, trang nhẹ từ 1.129 KiB còn 604 KiB. Cả thay đổi có ích lẫn thay đổi làm trang tệ đi.Hỏi đáp
Câu Hỏi Hay Gặp
Skill khác MCP chỗ nào?
Skill là một thư mục có file SKILL.md chứa hướng dẫn. Lúc đầu Claude chỉ đọc dòng mô tả; khi việc bạn nhờ khớp với mô tả đó, Claude mới nạp cả file và làm theo, dùng những công cụ nó đã có. MCP server là một chương trình riêng, chạy trên máy bạn hoặc ở xa qua một URL. Nó cho Claude thêm công cụ mới để đọc hoặc thao tác trên một hệ thống khác, ví dụ issue tracker hay database. Tài liệu skills · Tài liệu MCP
Có an toàn không?
Tài liệu Claude Code ghi rằng plugin có thể chạy mã tùy ý trên máy bạn với quyền của tài khoản bạn; hook, MCP server và các tiến trình plugin khởi động chạy ngoài sandbox. Tài liệu MCP khuyên chỉ kết nối server bạn tin, vì server lấy nội dung từ bên ngoài có thể đưa câu lệnh lạ vào prompt (prompt injection). Trên mỗi trang mục, mình ghi mục đó đọc và ghi file nào, gọi mạng tới đâu, chạy script gì lúc cài, đọc từ mã ở một commit cụ thể và kèm link tới từng file. Mình không chấm điểm an toàn: bạn đọc phần đó rồi tự quyết có cài hay không. Tài liệu bảo mật plugin
Dùng với Codex được không?
Với skill và MCP server thì được. Skill của Claude Code theo chuẩn mở Agent Skills, và Codex đọc skill cùng dạng thư mục có file SKILL.md, đặt trong $HOME/.agents/skills hoặc .agents/skills của repo. Codex thêm MCP server bằng lệnh codex mcp add. Hook và plugin trong kho được viết theo cách cài của Claude Code. Mỗi trang mục chỉ ghi tên những công cụ mà README của tác giả nêu, kèm link tới đoạn README đó. Tài liệu skills của Codex · Tài liệu MCP của Codex
Cài một skill tải từ GitHub thế nào?
Có hai đường. Nếu repo đóng gói sẵn thành plugin (README ghi lệnh /plugin marketplace add), bạn mở Claude Code, gõ lệnh đó vào khung chat để thêm danh mục, rồi gõ /plugin install tên-plugin@tên-danh-mục. Nếu repo chỉ có thư mục skill, bạn chép nguyên thư mục chứa SKILL.md vào ~/.claude/skills/ (dùng cho mọi dự án) hoặc .claude/skills/ trong dự án. Mình khuyên đọc file SKILL.md và phần “Nó chạm vào những gì” trên trang của mục trước khi cài.
Mình không biết code thì dùng skill được không?
Được. Skill viết bằng chữ thường trong file Markdown, và sau khi cài, Claude tự dùng khi việc bạn nhờ khớp với mô tả của skill, hoặc bạn gọi bằng /tên-skill trong khung chat. Phần cần cẩn thận là hook và MCP server, vì chúng chạy chương trình trên máy bạn; với hai loại này mình ghi rõ trên mỗi trang mục chúng chạm vào đâu.