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

Stimulus (Symfony UX)

Skill giúp Claude viết controller Stimulus và gắn data-attribute đúng chuẩn trong dự án Symfony UX.

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

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

Hướng dẫn Claude làm việc với Stimulus JS trong Symfony UX theo đúng quy ước.

  • Áp dụng chính xác data-controller, data-action, data-*-target, data-*-value, data-*-class, data-*-outlet
  • Tuân thủ quy tắc đặt tên file (hello_controller.js → data-controller="hello", thư mục con dùng --)
  • Vòng đời connect() / disconnect() và nguyên tắc dọn dẹp, tương thích điều hướng Turbo
  • Phím tắt, sự kiện toàn cục trên window/document, modifier như :prevent
  • Lazy-load thư viện nặng bằng /* stimulusFetch: 'lazy' */
  • Truyền dữ liệu server từ Twig sang controller qua values, kèm helper stimulus_controller()
  • Liên kết tới api.md / patterns.md / gotchas.md để tra cứu sâu

Skill cũng nêu rõ khi nào KHÔNG dùng: cập nhật một phần trang thì dùng Turbo, phản ứng render phía server thì dùng Live Component, template tái sử dụng thì dùng Twig Component.

Dành cho ai

  • Lập trình viên Symfony dùng Symfony UX (AssetMapper hoặc Webpack Encore)
  • Người đã dùng Stimulus nhưng còn lẫn lộn targets/values/outlets
  • Ai cần bọc thư viện JS bên thứ ba thành controller Stimulus

Ví dụ sử dụng

  1. "Tạo dropdown menu bằng Stimulus" → dùng nhiều controller kết hợp và data-action="click->dropdown#toggle"
  2. "Modal đóng khi nhấn ESC" → dùng keydown.esc@window->modal#close
  3. "Nhúng biểu đồ Chart.js" → controller lazy-load /* stimulusFetch: 'lazy' */ và truyền dữ liệu từ Twig qua values

· · · 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/stimulus/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/stimulus từ repo GitHub smnandre/symfony-ux-skills vào ~/.claude/skills/stimulus/ 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/stimulus ~/.claude/skills/stimulus

⚠ Đâ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 skills nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy skill kèm thư mục tham chiếu: cp -r symfony-ux-skills/skills/stimulus ~/.claude/skills/stimulus
  5. Kiểm tra bằng ls ~/.claude/skills/stimulus — phải thấy SKILL.md và references/.
  6. Khởi động lại Claude Code, rồi thử yêu cầu như "tạo nút toggle bằng Stimulus" trong dự án Symfony.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT