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

Hướng dẫn phát triển Frontend (Next.js 15)

Bộ quy tắc giúp Claude viết component, page và data fetching chuẩn mực trong dự án Next.js 15 + React 19 + Shadcn/ui.

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

Làm được gì

Cung cấp cho Claude bộ quy chuẩn khi viết code Next.js 15:

  • Phân biệt Server / Client Component: mặc định là Server Component, chỉ thêm "use client" khi cần tương tác, hooks hoặc browser API
  • Cấu trúc App Router: app/{route}/page.tsx, loading.tsx, error.tsx, route động, route group, thư mục features/
  • Data fetching & Server Actions: fetch trực tiếp bằng async/await trong Server Component, mutation dùng "use server" kèm validate bằng zod
  • Styling: Tailwind utility + helper cn() + component Shadcn/ui
  • Hiệu năng & TypeScript: next/image, next/font, streaming với Suspense, strict mode, cấm any
  • Kèm checklist tạo component/page và template code copy là dùng được

Phù hợp với ai

  • Lập trình viên frontend khởi tạo dự án mới với Next.js 15 App Router
  • Team lead muốn AI tuân theo đúng convention của đội
  • Người học React còn lẫn lộn giữa Server và Client Component
  • Nhóm dùng Shadcn/ui + Tailwind làm stack chuẩn

Ví dụ sử dụng

  1. "Tạo trang danh sách bài viết" → sinh app/posts/page.tsx (Server Component) fetch dữ liệu, component PostList, kèm loading.tsx, error.tsx và metadata SEO
  2. "Thêm form đăng bài" → component "use client" kết hợp Server Action trong app/actions/posts.ts có validate zod
  3. "Refactor component này" → bỏ "use client" thừa, gom class điều kiện bằng cn(), thay any bằng interface props rõ ràng

· · · 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/aiskillstore/marketplace/HEAD/skills/0chan-smc/frontend-dev-guidelines/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/0chan-smc/frontend-dev-guidelines từ repo GitHub aiskillstore/marketplace vào ~/.claude/skills/frontend-dev-guidelines/ 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/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.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 kho skill về thư mục tạm: git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Sao chép riêng skill này: cp -r /tmp/aiskillstore/skills/0chan-smc/frontend-dev-guidelines ~/.claude/skills/
  5. Kiểm tra bằng ls ~/.claude/skills/frontend-dev-guidelines xem có file SKILL.md không.
  6. Khởi động lại Claude Code, rồi thử yêu cầu "tạo trang mới" trong dự án Next.js — skill sẽ tự kích hoạt.
  7. Nên kiểm tra trước alias @/ trong tsconfig.json và việc đã cài Shadcn/ui để kết quả sinh ra khớp với dự án.
Xem mã nguồn trên GitHub ↗