fk

fk-skills

Hướng dẫn thiết kế cho AI coding agents. 1 skill, 23 lệnh, chế độ live iteration trên trình duyệt, và 44 quy tắc phát hiện lỗi thiết kế tất định dành cho frontend do AI tạo ra.

Bắt đầu nhanh: Từ thư mục gốc của project, chạy npx fk install, sau đó chạy /fk setup trong AI coding tool của bạn.

---

Tại sao cần fk-skills?

Mọi model AI đều được huấn luyện trên cùng một bộ template SaaS. Không có định hướng thiết kế, bạn sẽ nhận được kết quả giống nhau ở mọi project: font Inter cho tất cả mọi thứ, gradient tím-xanh, card lồng trong card, chữ xám trên nền màu, icon tile vuông bo góc phía trên mọi heading.

fk-skills giải quyết vấn đề đó bằng cách:

• Một luồng setup. /fk setup tạo ra PRODUCT.md và DESIGN.md, giúp các lệnh sau biết được đối tượng người dùng, định hướng brand/sản phẩm, voice, các tham chiếu cần tránh, màu sắc, typography, và components.
• 23 lệnh. Ngôn ngữ thiết kế chung giữa bạn và AI: finish, check, review, trim, motion, amplify, calm, và nhiều hơn nữa.
• 44 quy tắc phát hiện tất định cộng với các kiểm tra chỉ dùng LLM. CLI và browser extension chạy các quy tắc tất định mà không cần LLM hay API key.

---

Cách hoạt động

fk-skills hoạt động theo 3 tầng:

Tầng 1: Context (Ngữ cảnh) Trước khi làm bất cứ điều gì, skill cần hiểu project của bạn. /fk setup viết ra PRODUCT.md (chiến lược: người dùng, brand, nguyên tắc) và DESIGN.md (thị giác: màu sắc, typography, components). Mọi lệnh khác đọc 2 file này trước khi làm việc: đây là lý do tại sao AI hiểu được "tone" của từng project thay vì ra kết quả generic.

Tầng 2: Commands (Lệnh) 23 lệnh được tổ chức theo mục đích, từ setup cho đến kiểm tra, cải thiện thị giác, kỹ thuật, và live iteration. Mỗi lệnh nhận context từ Tầng 1 và áp dụng đúng bộ hướng dẫn thiết kế cho nhiệm vụ đó.

Tầng 3: Detector (Phát hiện lỗi) 44 quy tắc tất định chạy trên HTML/CSS để tự động phát hiện anti-pattern: không cần AI, không cần API key. Chạy được trong CLI, browser extension, và hook tích hợp với editor.

---

23 Lệnh: 6 Nhóm

Nhóm 1: Khởi tạo & Lên kế hoạch

Chạy các lệnh này đầu tiên. Chúng tạo ra ngữ cảnh mà tất cả các lệnh khác dựa vào.

Lệnh	Chức năng
/fk setup	Lệnh khởi tạo bắt buộc khi bắt đầu project mới. Hỏi về người dùng, brand, nguyên tắc thiết kế, sau đó tự viết PRODUCT.md và DESIGN.md. Chỉ cần chạy một lần.
/fk plan	Lên kế hoạch UX/UI trước khi code. Chạy discovery interview, xem mockup nếu có, tạo design brief đã được xác nhận.
/fk spec	Tự đọc codebase hiện tại rồi tạo DESIGN.md: extract màu sắc, font, spacing, border radius, pattern đang dùng. Hữu ích khi cần document design của project đã có sẵn.
/fk build	Flow đầy đủ từ đầu đến cuối: khám phá yêu cầu, xem mockup, build, iterate bằng mắt cho đến khi đúng.

Ví dụ:

/fk setup
/fk plan thêm trang checkout mới

---

Nhóm 2: Đánh giá & Kiểm tra

Dùng để tìm vấn đề trước khi sửa.

Lệnh	Chức năng
/fk review	Đánh giá UX tổng thể: visual hierarchy, information architecture, cognitive load, cảm xúc người dùng. Ra điểm định lượng, test theo persona, tự phát hiện anti-pattern.
/fk check	Kiểm tra kỹ thuật: accessibility, performance, responsive, theming. Ra báo cáo với mức độ nghiêm trọng P0–P3 và hướng xử lý cụ thể.

Ví dụ:

/fk review trang landing
/fk check trang blog

---

Nhóm 3: Cải thiện thị giác

Dùng khi design đang chạy được nhưng chưa đẹp hoặc chưa đúng.

Lệnh	Chức năng
/fk amplify	Design quá nhàm, quá an toàn, thiếu cá tính? Lệnh này tăng visual impact mà vẫn giữ usability.
/fk calm	Design quá mạnh, quá chói, quá áp đảo? Lệnh này giảm bớt cường độ mà vẫn giữ chất lượng.
/fk trim	Bỏ đi những thứ không cần thiết. Làm UI gọn hơn, tập trung hơn, bớt ồn ào.
/fk color	Thêm màu sắc chiến lược vào UI đang quá đơn điệu hoặc xám xịt.
/fk type	Cải thiện typography: chọn font đúng, phân cấp heading/body rõ ràng, kích thước và weight hợp lý.
/fk space	Sửa layout và khoảng cách: grid đơn điệu, spacing lộn xộn, hierarchy yếu, thứ không thẳng hàng.
/fk finish	Pass cuối cùng trước khi ship: sửa alignment, spacing, inconsistency: các chi tiết nhỏ quyết định cảm giác "bóng" hay "thô".

Ví dụ:

/fk amplify trang hero
/fk finish form thanh toán
/fk trim sidebar navigation

---

Nhóm 4: Cảm xúc & Chuyển động

Dùng khi design cần "thở" và "sống động" hơn.

Lệnh	Chức năng
/fk joy	Thêm moments of joy và unexpected touches: từ "chạy được" lên "thích dùng". Micro-animation, easter egg nhỏ, chi tiết bất ngờ.
/fk motion	Thiết kế animation và micro-interaction có mục đích: không chỉ cho đẹp mà cải thiện trải nghiệm thực sự.
/fk wow	Khi muốn làm thứ gì đó thực sự ấn tượng, vượt giới hạn thông thường: shader, spring physics, scroll animation, 60fps.