Trợ lý Symfony LiveComponent
Kỹ năng hướng dẫn xây dựng UI phản hồi bằng Symfony UX LiveComponent, tự render lại qua AJAX mà không cần viết JavaScript.
Nó làm được gì
Dạy Claude cách thiết kế và viết component phản hồi với Symfony UX LiveComponent: #[AsLiveComponent], #[LiveProp] (writable, url, hydrateWith), #[LiveAction], ràng buộc dữ liệu data-model với modifier debounce/on(blur)/minlength, trạng thái tải data-loading, tích hợp Symfony Form qua ComponentWithFormTrait, giao tiếp giữa component bằng emit/#[LiveListener], polling, defer/lazy và data-live-ignore. Kèm theo lời khuyên về hiệu năng và các lỗi thường gặp (thiếu {{ attributes }}).
Phù hợp với ai
- Lập trình viên PHP làm việc với Symfony và Twig
- Người muốn có tìm kiếm tức thời, bộ lọc, kiểm tra form realtime mà không cần SPA
- Nhóm mới áp dụng LiveComponent, cần nắm nhanh mẫu chuẩn và cạm bẫy
Ví dụ sử dụng
- "Tạo component tìm kiếm sản phẩm lọc ngay khi tôi gõ" → sinh code với
data-model="debounce(300)|query"và đồng bộ URL - "Chuyển form đăng ký sang LiveComponent, kiểm tra hợp lệ khi blur" → dùng
ComponentWithFormTrait - "Khi component con lưu xong thì danh sách cha tự cập nhật" → mẫu
emit()+#[LiveListener]
· · · 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/live-component/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)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
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/live-component từ repo GitHub smnandre/symfony-ux-skills vào ~/.claude/skills/live-component/ 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 && mkdir -p ~/.claude/skills && cp -r symfony-ux-skills/skills/live-component ~/.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.
- Mở terminal.
- Clone repo:
git clone https://github.com/smnandre/symfony-ux-skills.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills - Sao chép kỹ năng:
cp -r symfony-ux-skills/skills/live-component ~/.claude/skills/ - Kiểm tra thư mục
references/(api.md, patterns.md, gotchas.md) đã được sao chép cùng. - Khởi động lại Claude Code và thử yêu cầu: "Xây dựng tìm kiếm realtime bằng LiveComponent".
- Trong dự án Symfony, cài package:
composer require symfony/ux-live-component.