Frontend Design Router

Làm được gì

Đây là một router, không phải sổ tay quy tắc. Khi có yêu cầu về frontend, nó chọn đọc số file tham chiếu tối thiểu rồi thực thi theo hướng dẫn đó.

• design: bắt buộc tạo DESIGN.md (hệ thống thiết kế) trước khi viết component; có 12 phong cách (tối giản, brutalist, cao cấp, chuẩn Awwwards…) và 70 hệ thống thương hiệu (Stripe, Linear, Notion, Vercel, Apple…).
• perfection: đo Lighthouse bằng Playwright Chromium thật, mục tiêu 100 điểm ở mọi hạng mục — cấm gỡ animation hay ẩn nội dung để ăn điểm.
• ui-ux-db: CLI tìm bảng màu, cặp font, loại biểu đồ, cấu trúc landing page.
• designpowers: persona, ràng buộc khả năng tiếp cận, phê bình thiết kế, nợ thiết kế, tài liệu bàn giao.

Các nguyên tắc chung: không dùng emoji làm icon, chỉ animate transform/opacity/filter, cấm animation vô nghĩa, và chỉ coi là xong khi qua /visual-qa ở 375/768/1280px.

Phù hợp với ai

• Người thấy giao diện do AI tạo luôn nhạt nhòa, giống nhau
• Lập trình viên cần landing page hoặc dashboard theo tông thương hiệu cụ thể
• Người phụ trách frontend phải đảm bảo cả hiệu năng và WCAG
• Team lead muốn chuẩn hóa tài liệu DESIGN.md

Ví dụ sử dụng

1. "Làm hero section SaaS cao cấp giống Stripe" → nạp stripe.md + soft-skill.md + perfection/README.md, trích token vào DESIGN.md rồi dựng primitive tái sử dụng.
2. "Code lại đúng ảnh chụp màn hình này" → dùng image-to-code-skill.md để trích màu, khoảng cách, trạng thái, ý đồ responsive và đối chiếu pixel bằng /visual-qa.
3. "Trang web chậm, hãy audit giúp" → build production, chạy Lighthouse qua Playwright 3–5 lần cho mobile lẫn desktop, lấy trung vị và sửa từ gốc kiến trúc.

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục packages/skills-loader-core/src/features/builtin-skills/frontend từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/code-yeongyu-frontend-2/ 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.