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

Hướng dẫn Turbo (Symfony UX)

Skill giúp bạn tạo trải nghiệm giống SPA trong ứng dụng Symfony bằng Turbo Drive, Frames và Streams mà gần như không cần viết JavaScript.

Lập trìnhTrung cấp★ 170⑂ 12Điểm AI 9/10Cập nhật lần cuối: 14 thg 6, 2026

Skill này làm được gì

  • Đưa ra cây quyết định để chọn giữa Drive (điều hướng AJAX tự động), Frames (cập nhật một vùng) và Streams (cập nhật nhiều vùng cùng lúc).
  • Cung cấp code mẫu cho <turbo-frame>, <turbo-stream>, các thuộc tính data-turbo-* và cú pháp component <twig:Turbo:Stream:*>.
  • Hướng dẫn tích hợp Symfony: trả về stream response với TurboBundle::STREAM_FORMAT, nhận biết header Turbo-Frame, phát realtime bằng #[Broadcast] + Mercure.
  • Tổng hợp các pattern phổ biến (sửa inline, modal, tìm kiếm, flash message) và những lưu ý quan trọng như ID frame phải khớp, server nên trả HTML đầy đủ.

Phù hợp với ai

  • Lập trình viên Symfony/Twig muốn có UI mượt mà mà không dùng React/Vue.
  • Người còn nhầm lẫn khi nào dùng Turbo, khi nào dùng Stimulus hay Live Component.
  • Ai cần phân trang không reload, lazy-load một khối nội dung, hoặc thông báo realtime.

Ví dụ sử dụng

  1. "Sau khi thêm bình luận, cập nhật danh sách + số đếm + form" → skill sinh template stream và code controller.
  2. "Chỉ tải khu vực thông báo sau khi trang render" → gợi ý frame với loading="lazy".
  3. "Làm modal xác nhận xoá render từ server" → pattern dùng data-turbo-frame="modal".

· · · 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/smnandre/symfony-ux-skills/HEAD/skills/turbo/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/turbo từ repo GitHub smnandre/symfony-ux-skills vào ~/.claude/skills/turbo/ 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/smnandre/symfony-ux-skills.git /tmp/symfony-ux-skills && mkdir -p ~/.claude/skills && cp -r /tmp/symfony-ux-skills/skills/turbo ~/.claude/skills/turbo

⚠ Đâ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. Clone repo: git clone https://github.com/smnandre/symfony-ux-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill Turbo: cp -r symfony-ux-skills/skills/turbo ~/.claude/skills/turbo
  5. Kiểm tra có file ~/.claude/skills/turbo/SKILL.md và thư mục references/.
  6. Khởi động lại Claude Code và thử hỏi: "làm sao cập nhật một phần trang mà không reload?".
  7. Trong project thật, đừng quên chạy composer require symfony/ux-turbo.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT