Claude Skill Visualize Mechanism — Development skill for Claude Code

visualize-mechanism

Một Claude Code skill: dựng **trang HTML một file** giải thích một cơ chế / một luồng / một vấn đề hiệu năng bằng **hình động so sánh trước–sau**, thay cho tường chữ.

Mỗi đề xuất tối ưu được một hình riêng: hai panel chạy song song (viền đỏ = hiện tại, viền xanh = sau khi sửa), counter đếm được, và kết thúc ở một khung hình tĩnh tự nói được kết luận — để ảnh chụp màn hình gửi cho nhau vẫn còn nghĩa.

Cài

git clone https://github.com/callmehai/claude-skill-visualize-mechanism.git \
  ~/.claude/skills/visualize-mechanism

Mở lại Claude Code là skill xuất hiện. Gọi bằng cách nói tự nhiên — "vẽ hình minh hoạ cái này", "visualize giúp tôi", "làm html cho dễ hiểu", "chưa tưởng tượng được" — hoặc gõ thẳng `/visualize-mechanism`.

Muốn chỉ dùng cho một project thì clone vào `/.claude/skills/visualize-mechanism` thay vì `~/.claude/`.

Trong này có gì

File	Nội dung
SKILL.md	Bốn luật không được phá, khung 8 mục của trang, sáu khuôn hình tái dùng, mười cái bẫy đã dính, checklist verify trước khi publish.
reference/runtime.html	Kho phụ tùng, không phải trang để publish. Mở bằng trình duyệt là thấy sáu khuôn hình chạy thật; vào đó copy hệ token 3 trạng thái theme, CSS sáu khuôn + khung trace, và runtime JS. Chữ trong đó là ví dụ còn lại từ một lần review thật — thay hết bằng số của việc đang làm.

Sáu khuôn hình: request train · lưới ô + chấm probe · hai node + gói tin · sequence ladder + cột đo · rack tích luỹ · dải frame main thread. Chọn khuôn theo *luận điểm*, không theo *công nghệ*.

Yêu cầu

• Claude Code, và tool Artifact để publish trang (không có Artifact thì vẫn ra file HTML, chỉ là phải tự mở/tự host).
• Bước verify dùng MCP server chrome-devtools — không bắt buộc, nhưng sáu hình động hand-built mà chưa xem qua trình duyệt thì đừng publish.

Ghi chú

Skill viết bằng **tiếng Việt** vì nó sinh ra cho một team nói tiếng Việt; muốn dùng cho team khác thì dịch `SKILL.md`,