VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:ui-styling

Styling bằng shadcn/ui và Tailwind

Xây UI React accessible bằng shadcn/ui, primitive Radix, utility Tailwind, theme, dark mode, layout responsive, design token, visual chất lượng canvas và script hỗ trợ.

01

Xác nhận ngữ cảnh UI

02

Khởi tạo stack

03

Thêm component

04

Ghép primitive

Nguyên tắc 01

Ghép primitive trước khi tự tạo component custom

Nguyên tắc 02

Dùng trực tiếp utility Tailwind; chỉ tách component khi lặp thật sự

Nguyên tắc 03

Thiết kế mobile-first và giữ dark mode nhất quán

Nguyên tắc 04

Accessibility-first nghĩa là đúng bàn phím, focus, label và screen reader

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

01

Khởi động

Đầu vào, phạm vi, route

  1. 1 Xác nhận ngữ cảnh UI Dùng cho framework React, component accessible, styling bằng utility, layout responsive, design system, visual design, table, chart hoặc command palette.
  2. 2 Khởi tạo stack Chạy shadcn init cho thiết lập component + Tailwind, hoặc cấu hình Tailwind-only cho dự án không cần component shadcn.
02

Xử lý

Agent / skill thực thi

  1. 3 Thêm component Dùng shadcn add hoặc script hỗ trợ để cài button, card, dialog, form, table, command và component cần thiết.
  2. 4 Ghép primitive Xây UI phức tạp từ các primitive Radix/shadcn nhỏ và ghép được thay vì widget custom nguyên khối.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Áp dụng utility Dùng class Tailwind cho layout, spacing, typography, màu, border, shadow, biến thể responsive và dark mode.
  2. 6 Tùy biến theme Định nghĩa CSS variable, token ngữ nghĩa, palette, font, variant, tích hợp next-themes và utility tùy chỉnh.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Kiểm accessibility Dùng accessibility từ Radix, HTML semantic, focus state, điều hướng bàn phím, hỗ trợ screen reader và mẫu validation form.
  2. 8 Nâng chất lượng visual Áp dụng phân cấp thị giác, token nhất quán, responsive mobile-first, tương đương dark mode, class thân thiện hiệu năng và nguyên tắc canvas design.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:ui-styling [component or layout]

Đối số

[component or layout] Bắt buộc

Bề mặt UI hoặc yêu cầu styling

Component, page, layout, visual artifact, theme, token, hành vi responsive, trạng thái accessibility và ranh giới tệp cần triển khai hoặc tinh chỉnh. Nêu tệp được bảo vệ, quyền đổi package, breakpoint mục tiêu, kỳ vọng light/dark và check chứng minh UI hoạt động.

/ak:ui-styling "Thêm dialog tài khoản accessible dùng tokens hiện có; preserve components.json, hỗ trợ keyboard focus và reduced motion, test light/dark trên mobile và desktop, và không overwrite các file UI hiện có"

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Form dialog accessible Khuyến nghị 
/ak:ui-styling build an accessible account dialog form with validation, focus return, dark mode, and mobile layout
Dùng khi:
UI React cần primitive form và dialog shadcn/Radix được style bằng utility Tailwind.
Kết quả:
Chọn component shadcn, ghép mẫu Form/Input/Button/Dialog, thêm thông báo validation, hành vi focus bằng bàn phím, spacing responsive và class dark mode.
Token theme 
/ak:ui-styling customize dashboard theme tokens, color palette, typography, component variants, and a theme toggle
Dùng khi:
Giao diện cần tùy biến theme nhất quán cho màu, font, variant và hành vi light/dark.
Kết quả:
Dùng hướng dẫn theme để định nghĩa CSS variable và token ngữ nghĩa, nối hành vi dark mode và giữ variant component khớp design system.
UI dữ liệu responsive 
/ak:ui-styling create responsive analytics cards, a data table, loading states, and command palette styling
Dùng khi:
Màn hình nhiều dữ liệu cần layout Tailwind mobile-first, component hiển thị shadcn và phân cấp thị giác.
Kết quả:
Dựng card, table và command pattern từ primitive ghép được với breakpoint Tailwind, styling theo state, cấu trúc accessible và dark mode tương đương.
Hệ visual canvas 
/ak:ui-styling design a canvas-based launch poster system with minimal text, refined composition, and reusable visual tokens
Dùng khi:
Task cần visual design, poster, brand material hoặc prototype polished với phản hồi visual nhanh.
Kết quả:
Áp dụng reference canvas design-system cho bố cục theo triết lý, hệ màu và không gian, ít chữ và output visual chất lượng trình bày.

Phạm vi xử lý

  • shadcn/ui
  • Radix UI
  • Tailwind CSS
  • theme
  • dark mode
  • responsive design
  • form
  • hệ visual

Tiếp theo