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

CSS Native – Hoạt ảnh thuần CSS

Bộ hướng dẫn tạo hoạt ảnh cuộn, chuyển trang và hiệu ứng xuất hiện bằng CSS hiện đại, không cần thư viện.

Thiết kế · UITrung cấp★ 457⑂ 34Điểm AI 9/10Cập nhật lần cuối: 5 thg 10, 2026

Làm được gì

  • Đưa ra bảng quyết định khi nào dùng CSS thuần và khi nào nên dùng GSAP/Framer Motion (dưới 3 hoạt ảnh, scroll reveal, tooltip → CSS; timeline 5+ bước, spring vật lý → thư viện).
  • Cung cấp đoạn code sẵn dùng cho animation-timeline: scroll()/view(), animation-range, View Transitions API (cả SPA và MPA), @starting-style + allow-discrete, anchor positioning và container queries.
  • Công thức hiệu ứng thị giác: chuyển động clip-path, kính mờ backdrop-filter, mix-blend-mode, mesh gradient và conic gradient.
  • Bảng "Không nên làm": tránh transition: all, tránh animate width/height/top/left, luôn bọc hoạt ảnh cuộn trong @supports, luôn có position-try-fallbacks.

Phù hợp với ai

  • Lập trình viên front-end muốn giảm dung lượng bundle bằng cách bỏ bớt thư viện hoạt ảnh.
  • Người làm landing page, portfolio cần hiệu ứng cuộn và chuyển trang mượt.
  • Người dùng Claude Code muốn AI viết đúng cú pháp CSS mới nhất.

Ví dụ sử dụng

  1. "Tạo thanh tiến trình chạy theo cuộn trang bằng CSS thuần" → sinh code scroll(root block) kèm fallback @supports cho Firefox.
  2. "Ảnh bìa bay mượt từ danh sách sang trang chi tiết" → dùng chung view-transition-name và @view-transition { navigation: auto; }.
  3. "Làm modal hiện ra mượt từ display:none" → kết hợp @starting-style với transition-behavior: allow-discrete, không cần hack JS.

· · · 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/AThevon/genjutsu/HEAD/skills/_jutsu/css-native/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 skills/_jutsu/css-native từ repo GitHub AThevon/genjutsu vào ~/.claude/skills/css-native/ 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/AThevon/genjutsu.git /tmp/genjutsu && mkdir -p ~/.claude/skills && cp -r /tmp/genjutsu/skills/_jutsu/css-native ~/.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 mã nguồn: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Sao chép kỹ năng: cp -r genjutsu/skills/_jutsu/css-native ~/.claude/skills/
    • Kiểm tra tệp references/modern-css.md đã được copy kèm chưa.
  5. Khởi động lại Claude Code, rồi thử: "dùng skill css-native làm hiệu ứng reveal khi cuộn".
  6. Đây là sub-skill nội bộ của bộ genjutsu; nếu muốn dùng đầy đủ, hãy cài trọn bộ theo hướng dẫn trong README của repo.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION