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

CSS Native – Hiệu ứng không cần thư viện

Hướng dẫn Claude tạo animation cuộn, chuyển trang và hiệu ứng popover chỉ bằng CSS hiện đại, không cần GSAP hay Framer Motion.

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

Làm được gì

  • Cung cấp mẫu code cho scroll-driven animation (animation-timeline: scroll() / view()) và animation-range.
  • Tổng hợp View Transitions API (cả SPA và MPA), @starting-style, transition-behavior: allow-discrete, anchor positioning, container queries.
  • Các công thức hiệu ứng hình ảnh: clip-path, backdrop-filter, mix-blend-mode, mesh gradient, conic gradient.
  • Bảng quyết định khi nào dùng CSS thuần và khi nào cần GSAP / Framer Motion.
  • Danh sách "Không nên làm" kèm lý do (ví dụ tránh transition: all, tránh animate width/top).

Phù hợp với ai

  • Lập trình viên frontend muốn giảm dung lượng bundle bằng cách bỏ thư viện animation.
  • Web developer / UI engineer muốn áp dụng CSS mới vào dự án thực tế.
  • Người cần animation mở/đóng dialog, popover, tooltip mà không dùng setTimeout trong JS.

Ví dụ sử dụng

  1. "Làm thanh tiến trình theo scroll không dùng JS" → sinh code với scroll(root block).
  2. "Chuyển từ danh sách card sang trang chi tiết mượt như app" → cấu hình view-transition-name cho MPA.
  3. "Modal đóng lại bị mất hiệu ứng" → áp dụng @starting-style cùng allow-discrete.

· · · 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 repo: git clone https://github.com/AThevon/genjutsu.git /tmp/genjutsu
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r /tmp/genjutsu/skills/_jutsu/css-native ~/.claude/skills/
  5. Kiểm tra file references/modern-css.md đã được copy (chứa bảng hỗ trợ trình duyệt).
  6. Khởi động lại Claude Code và thử yêu cầu: "tạo animation scroll chỉ bằng CSS" để xem skill có kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT