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

Frontend Design Router

Skill điều hướng mọi việc UI/UX — dựng trang, redesign, motion, audit hiệu năng — qua 4 bộ quy tắc để đạt chất lượng như designer senior.

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

Làm được gì

Đây không phải một tập luật mà là bộ định tuyến: nó xác định loại yêu cầu, 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, phong cách Awwwards…) kết hợp với 70 hệ thống thiết kế thương hiệu (Linear, Stripe, Vercel, Notion, Apple…). Bắt buộc hai cổng: phải có DESIGN.md trước khi viết component, và cài react-grab / react-scan / react-doctor cho dự án React.
  • perfection: đo bằng Playwright Chromium thật, mục tiêu Lighthouse 100 ở mọi hạng mục, cấm gian lận bằng cách bỏ animation hay ẩn nội dung.
  • ui-ux-db: CLI tìm kiếm CSV cho palette màu, cặp font, loại biểu đồ, cấu trúc landing page, hoặc sinh design system từ từ khóa.
  • designpowers: tầng vận hành thiết kế — persona, ràng buộc accessibility, critique chống "giao diện phẳng", design debt, handoff.

Ngoài ra còn có luồng clone từ ảnh/URL, catalog tương tác beui.dev và nghiên cứu màn hình app thật qua lazyweb (chỉ dùng curl theo công thức có sẵn).

Phù hợp với ai

  • Dev thấy UI do AI tạo ra luôn "nhìn là biết AI làm"
  • Founder/team startup cần landing page, SaaS dashboard đẳng cấp Linear/Stripe
  • Frontend engineer bị yêu cầu vừa đẹp vừa đạt Core Web Vitals
  • Nhóm muốn chuẩn hóa DESIGN.md trước khi viết code

Ví dụ sử dụng

  1. "Làm landing page kiểu Linear" → nạp design/README.md + linear.app.md + taste-skill.md + perfection/README.md, viết DESIGN.md với token/typography/motion rồi mới dựng primitives.
  2. "Website chậm, audit giúp mình" → build production, chạy lighthouse-audit.py với preset mobile + desktop 3–5 lần lấy trung vị, kèm checklist render dư của React.
  3. "Thêm micro-interaction cho trang này" → nạp interaction-skill.md, tra pattern gần nhất trong beui.dev, đọc source thật rồi map vào motion token của DESIGN.md, luôn tôn trọng reduced motion.
  4. "Code y hệt screenshot này" → dùng image-to-code-skill.md trích token/spacing/state vào DESIGN.md, cuối cùng chạy /visual-qa chế độ so pixel.

· · · 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/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/

⚠ Đâ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: 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ộ skill (phải giữ đủ references/ và scripts/): cp -r oh-my-openagent/packages/shared-skills/skills/frontend ~/.claude/skills/
  5. Kiểm tra: ls ~/.claude/skills/frontend/references phải thấy các thư mục design, perfection, ui-ux-db, designpowers.
  6. Nếu muốn dùng phần audit hiệu năng, cài trước uv (Python runner) và Playwright kèm Chromium.
  7. Khởi động lại Claude Code, rồi thử câu như "thiết kế lại trang chủ" hoặc "audit Lighthouse cho site này".
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION