AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Cấu trúc bài thuyết trình HTML

Skill kiến thức mô tả định dạng slide, hệ thống cấp độ, điều hướng và cấu trúc section của một bài thuyết trình HTML một file.

Tài liệu · Văn phòngTrung cấp★ 68,873⑂ 6,858Điểm AI 5/10Cập nhật lần cuối: 9 thg 11, 2026

Làm được gì

  • Cung cấp cho Claude quy ước markup của bài trình chiếu nằm trong presentation/index.html (HTML một file, CSS/JS nội tuyến).
  • Giải thích thuộc tính data-slide (số thứ tự) và data-level (cấp độ hành trình), kèm mẫu cho slide tiêu đề và slide phân mục.
  • Mô tả thanh hành trình 4 cấp Low / Medium / High / Pro tương ứng 25% / 50% / 75% / 100%, kèm bảng ánh xạ từng Part với cấp độ.
  • Hướng dẫn điều hướng bằng goToSlide(n), totalSlides tự tính từ DOM, và quy trình đánh số lại toàn bộ slide sau khi thêm/xóa/sắp xếp lại.
  • Nhắc rõ không được viết tay .level-badge trong HTML vì JS sẽ tự chèn lúc chạy.

Phù hợp với ai

  • Người trực tiếp chỉnh sửa bài trình chiếu trong repo claude-code-best-practice.
  • Ai đang duy trì một slide deck HTML đơn file và muốn tham khảo cách quản lý số thứ tự slide.
  • Người muốn học mẫu "đóng gói kiến thức riêng của dự án thành skill" cho Claude Code.

Ví dụ sử dụng

  1. "Thêm 2 slide sau Part 3" → Claude tạo slide đúng định dạng, đánh số lại toàn bộ data-slide và cập nhật các liên kết goToSlide() trong mục lục.
  2. "Tạo Part 7 ở cấp độ Pro" → sinh slide phân mục với class section-slide và data-level="pro" đúng chuẩn.
  3. "Kiểm tra xem số slide có bị trùng hoặc thiếu không" → Claude rà soát theo 4 bước trong quy tắc đánh số lại.

· · · 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/shanraisshan/claude-code-best-practice/HEAD/.claude/skills/presentation/presentation-structure/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 AI Skill Mart.
Copy thư mục .claude/skills/presentation/presentation-structure từ repo GitHub shanraisshan/claude-code-best-practice vào ~/.claude/skills/presentation-structure/ 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/shanraisshan/claude-code-best-practice.git /tmp/ccbp && mkdir -p ~/.claude/skills && cp -r /tmp/ccbp/.claude/skills/presentation/presentation-structure ~/.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: git clone https://github.com/shanraisshan/claude-code-best-practice.git
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r claude-code-best-practice/.claude/skills/presentation/presentation-structure ~/.claude/skills/
  5. Khởi động lại Claude Code và gõ /skills để xác nhận presentation-structure đã xuất hiện.
  6. Lưu ý: skill giả định dự án có file presentation/index.html; hãy sửa bảng cấp độ và dải slide cho khớp dự án của bạn.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT