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

Twig Component (Symfony UX)

Skill hướng dẫn Claude tạo component UI tái sử dụng, render phía server bằng Symfony UX TwigComponent.

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

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

Dạy Claude cách xây dựng các khối UI tái sử dụng (button, alert, card, badge, modal...) bằng Symfony UX TwigComponent.

  • Phân biệt class component (#[AsTwigComponent]) và anonymous component chỉ có Twig ({% props %})
  • Khai báo props, truyền biểu thức Twig với tiền tố :, dùng mount() để tính state dẫn xuất
  • Block/slot mặc định và có tên, lồng component vào nhau
  • Computed property qua method get* và truy cập bằng this.xxx
  • Xử lý {{ attributes }}: defaults(), without(), render(), has()
  • Component như service (autowiring), hook PreMount/PostMount, cấu hình twig_component.yaml

Skill cũng nói rõ giới hạn: nếu cần re-render theo input người dùng thì dùng LiveComponent, hành vi JS dùng Stimulus, điều hướng trang dùng Turbo.

Phù hợp với ai

  • Lập trình viên PHP/Symfony (backend hoặc fullstack)
  • Nhóm muốn dựng design system, component library bằng Twig
  • Người đã quen React/Vue nhưng mới với component render phía server

Ví dụ sử dụng

  1. "Tạo component Alert nhận type success/danger và option dismissible" → nhận cả class PHP, template Twig và cách gọi
  2. "Tạo component Modal có slot header/content/footer" → dùng mẫu <twig:block name="...">
  3. "Tạo component hiển thị sản phẩm nổi bật, inject ProductRepository" → component dùng như service, lặp qua this.products

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

  1. Mở terminal.
  2. Clone repo skill: 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 riêng skill này: cp -r symfony-ux-skills/skills/twig-component ~/.claude/skills/
  5. Kiểm tra đã có ~/.claude/skills/twig-component/SKILL.md và thư mục references/.
  6. Khởi động lại Claude Code, thử hỏi "tạo Button component bằng TwigComponent" để xem skill có kích hoạt.
  7. Trong dự án thật, nhớ cài package: composer require symfony/ux-twig-component.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT