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

Symfony UX – Điều phối stack frontend

Skill giúp chọn đúng công cụ Symfony UX (Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, UX Map) qua cây quyết định và các mẫu code thực tế.

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

Làm được gì

  • Dùng cây quyết định để chỉ ra nên dùng Stimulus, Turbo Drive/Frame/Stream, TwigComponent, LiveComponent, UX Icons hay UX Map cho từng nhu cầu.
  • Bảng so sánh nhanh: có cần JavaScript không, có render lại phía server không, binding hai chiều, realtime, lazy loading.
  • 7 mẫu triển khai kèm code PHP/Twig: component tĩnh, component + Stimulus, ô tìm kiếm LiveComponent, Turbo Frame, Turbo Stream nhiều vùng, LiveComponent trong Frame, realtime với Mercure.
  • Gợi ý cấu trúc thư mục, lệnh composer require và danh sách anti-pattern cần tránh (dùng LiveComponent cho nội dung tĩnh, quên chiều cao cho <div> bản đồ, quên chạy ux:icons:lock trước khi deploy).

Phù hợp với ai

  • Lập trình viên PHP/Symfony muốn làm giao diện tương tác mà hạn chế JavaScript.
  • Đội ngũ hay phân vân "Turbo Frame hay LiveComponent?".
  • Người mới tiếp cận Symfony UX, cần chuẩn hoá kiến trúc frontend cho dự án.

Ví dụ sử dụng

  1. "Tôi muốn ô tìm kiếm hiện kết quả ngay khi gõ" → skill đưa mẫu LiveComponent với data-model="debounce(300)|query".
  2. "Sau khi gửi bình luận cần cập nhật cả danh sách lẫn bộ đếm" → mẫu Turbo Stream với template .stream.html.twig.
  3. "Dropdown chỉ cần bật/tắt phía client" → hướng dẫn dùng TwigComponent + Stimulus thay vì LiveComponent.

· · · 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/symfony-ux/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/symfony-ux từ repo GitHub smnandre/symfony-ux-skills vào ~/.claude/skills/symfony-ux/ 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 && cp -r /tmp/symfony-ux-skills/skills/* ~/.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/smnandre/symfony-ux-skills.git
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Sao chép: cp -r symfony-ux-skills/skills/* ~/.claude/skills/ (nên copy cả bộ để có các skill chi tiết cho Stimulus, Turbo, LiveComponent...).
  5. Khởi động lại Claude Code và kiểm tra symfony-ux đã xuất hiện trong danh sách skill.
  6. Trong dự án Symfony, hỏi ví dụ: "Nên dùng Turbo Frame hay LiveComponent cho phần này?" để kích hoạt skill.
  7. Cài gói cần thiết bằng composer require symfony/ux-turbo symfony/ux-live-component (Google Maps cần API key riêng).
Xem mã nguồn trên GitHub ↗Giấy phép: MIT