Router Thiết kế Frontend

Skill điều phối toàn bộ công việc frontend: tự động định tuyến yêu cầu UI, redesign và audit hiệu năng vào 4 bộ quy tắc chuyên sâu để cho ra giao diện đạt chuẩn designer cấp cao.

Thiết kế · UINâng cao★ 67,531⑂ 5,507Điểm AI 9/10Cập nhật lần cuối: 9 thg 8, 2026

Skill này làm gì

Hoạt động như một router: phân tích yêu cầu (dựng mới, redesign, thêm animation, audit hiệu năng/accessibility) rồi chỉ nạp đúng những tệp tham chiếu cần thiết.
Kết nối 4 bộ quy tắc: design (12 skill thẩm mỹ + 70 hệ thống thiết kế thương hiệu), perfection (Lighthouse 100 điểm đo bằng Playwright Chromium thật), ui-ux-db (CLI tìm palette, cặp font, loại biểu đồ, cấu trúc landing page), designpowers (persona, accessibility, phê bình, handoff).
Bắt buộc tạo DESIGN.md (token, typography, spacing, motion, ràng buộc accessibility, nợ thiết kế) trước khi viết code UI, và kiểm chứng cuối bằng /visual-qa ở 375/768/1280px trên trình duyệt thật.
Áp dụng nguyên tắc chung: không dùng emoji làm icon, chỉ animate bằng transform/opacity/filter, cấm animation vô nghĩa, "đúng nhưng phẳng" bị coi là thất bại.

Phù hợp với ai

Lập trình viên React/Next.js muốn thoát khỏi giao diện "trông như AI làm".
Nhóm cần sao chép chính xác screenshot, mockup Figma hoặc phong cách của một thương hiệu cụ thể.
Người cần đạt Lighthouse 100 ở mọi mục, Core Web Vitals và WCAG bằng số đo thực tế.

Ví dụ sử dụng

"Làm landing page kiểu Linear" → nạp design/linear.app.md + skill thẩm mỹ + perfection, viết DESIGN.md rồi mới code.
"Thêm micro-interaction cho dashboard này" → xếp thêm interaction-skill.md (danh mục beui.dev) lên skill style hiện tại và triển khai theo token motion.
"Site của tôi chậm và điểm accessibility thấp" → dùng perfection/README.md cùng recipe tooling React, build production rồi đo mobile/desktop 3–5 lần lấy trung vị để tìm nguyên nhân gốc.

· · · 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/code-yeongyu/oh-my-openagent/HEAD/packages/shared-skills/skills/frontend/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.

↓ 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 packages/shared-skills/skills/frontend từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/code-yeongyu-frontend/ 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/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend

⚠ Đâ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 và chuyển tới thư mục làm việc.
Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Tạo thư mục skill: mkdir -p ~/.claude/skills
Copy skill: cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/frontend
Kiểm tra các thư mục con references/ (design, perfection, ui-ux-db, designpowers) và scripts/ đã được copy đầy đủ — thiếu thì router sẽ không hoạt động.
Nếu muốn dùng phần audit hiệu năng, cài sẵn Python 3, uv và Playwright (Chromium).
Khởi động lại Claude Code và thử một yêu cầu frontend như "thiết kế landing page cho tôi" để xác nhận skill được kích hoạt.

Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION