Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Frontend Design Router

Skill điều phối mọi yêu cầu UI/UX: chọn đúng ruleset thiết kế, hiệu năng và design-system để cho ra giao diện ở mức 'senior designer'.

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

Skill này làm gì

Đây là một router, không phải bộ quy tắc đơn lẻ. Khi có yêu cầu về frontend/UI/UX, skill sẽ nạp đúng số file tối thiểu trong references/ rồi thực thi theo hướng dẫn đó:

  • design: 12 "taste skill" (minimal, brutalist, soft/premium, redesign, image-to-code…) và 70 hệ thống thương hiệu (Stripe, Linear, Notion, Vercel, Apple…). Bắt buộc phải có DESIGN.md (token màu, typography, spacing, motion, accessibility, nợ thiết kế) trước khi viết component.
  • perfection: đo Lighthouse bằng Playwright Chromium thật, chuẩn 100 điểm mọi hạng mục, ngân sách render cho React; cấm gỡ animation hay ẩn nội dung để lấy điểm.
  • ui-ux-db: CLI tìm palette, cặp font, loại biểu đồ, cấu trúc landing page.
  • designpowers: persona, ràng buộc accessibility, phê bình thiết kế (phát hiện UI "phẳng"), nợ thiết kế, handoff.

Nếu người dùng đưa ảnh chụp hoặc URL, skill coi đó là "hợp đồng thị giác": trích style runtime bằng getComputedStyle, dựng lại thành primitive tái dùng, rồi QA bằng /visual-qa ở 375/768/1280px.

Phù hợp với ai

  • Người thấy AI luôn tạo ra UI "đúng mà nhạt"
  • Dev solo/startup cần landing page hoặc dashboard đúng tinh thần thương hiệu
  • Frontend engineer bị yêu cầu vừa đẹp vừa Lighthouse 100
  • Nhóm muốn chuẩn hoá design system và quy trình handoff

Ví dụ sử dụng

  1. "Làm hero SaaS cao cấp kiểu Stripe" → nạp stripe.md + soft-skill.md + perfection/README.md, chốt token vào DESIGN.md, dựng primitive rồi mới làm trang.
  2. "Dashboard này trông tệ, cải thiện đi" → dùng redesign-skill.md audit trước, định nghĩa lại token, thêm micro-interaction có ý nghĩa, kiểm tra 3 breakpoint.
  3. "Code y hệt ảnh chụp này" → image-to-code-skill.md trích màu/khoảng cách/trạng thái/responsive, triển khai thành component tái dùng, QA đối chiếu từng pixel.
  4. "Palette và font nào phù hợp thương hiệu wellness?" → tra nhanh bằng CLI của ui-ux-db.

· · · Hướng dẫn cài đặt · · ·

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 packages/omo-opencode/src/features/builtin-skills/frontend từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/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/omo-opencode/src/features/builtin-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.

  1. Mở terminal và chuyển tới thư mục làm việc.
  2. Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ thư mục skill (cần cả references và scripts): cp -r oh-my-openagent/packages/omo-opencode/src/features/builtin-skills/frontend ~/.claude/skills/frontend
  5. Kiểm tra bằng ls ~/.claude/skills/frontend xem có SKILL.md và references/ không.
  6. Muốn dùng phần audit hiệu năng, hãy cài Node/npm + Playwright và uv (trình chạy Python) trước.
  7. Khởi động lại Claude Code, thử yêu cầu "thiết kế landing page" hoặc "audit Lighthouse" để xác nhận skill được kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION