# Table of Contents - [VividKit - Crystal clear AI coding | VividKit](#vividkit-crystal-clear-ai-coding-vividkit) - [Redirecting to: /vi/guides/what-is-claudekit](#redirecting-to-vi-guides-what-is-claudekit) - [VividKit - Visual Interface cho ClaudeKit | VividKit](#vividkit-visual-interface-cho-claudekit-vividkit) - [What is ClaudeKit? - VividKit Documentation | VividKit](#what-is-claudekit-vividkit-documentation-vividkit) - [Giới Thiệu ClaudeKit - VividKit Documentation | VividKit](#gi-i-thi-u-claudekit-vividkit-documentation-vividkit) - [Slash Commands Guide - VividKit Documentation | VividKit](#slash-commands-guide-vividkit-documentation-vividkit) - [Quy Trình Làm Việc - VividKit - Visual Interface cho ClaudeKit | VividKit](#quy-tr-nh-l-m-vi-c-vividkit-visual-interface-cho-claudekit-vividkit) - [Recommended Workflows - VividKit Documentation | VividKit](#recommended-workflows-vividkit-documentation-vividkit) - [Tham Khảo Lệnh - VividKit - Visual Interface cho ClaudeKit | VividKit](#tham-kh-o-l-nh-vividkit-visual-interface-cho-claudekit-vividkit) - [Thiết Kế UI/UX - VividKit - Visual Interface cho ClaudeKit | VividKit](#thi-t-k-ui-ux-vividkit-visual-interface-cho-claudekit-vividkit) - [UI/UX Pro Max Guide - VividKit Documentation | VividKit](#ui-ux-pro-max-guide-vividkit-documentation-vividkit) - [Bypass Permissions - VividKit Documentation | VividKit](#bypass-permissions-vividkit-documentation-vividkit) - [Fix Logs Guide - VividKit Documentation | VividKit](#fix-logs-guide-vividkit-documentation-vividkit) - [Claude Code Switch (CCS) - VividKit Documentation | VividKit](#claude-code-switch-ccs-vividkit-documentation-vividkit) - [Resume Sessions - VividKit Documentation | VividKit](#resume-sessions-vividkit-documentation-vividkit) - [Sửa Lỗi Từ Log - VividKit - Visual Interface cho ClaudeKit | VividKit](#s-a-l-i-t-log-vividkit-visual-interface-cho-claudekit-vividkit) - [Chuyển Đổi Tài Khoản - VividKit - Visual Interface cho ClaudeKit | VividKit](#chuy-n-i-t-i-kho-n-vividkit-visual-interface-cho-claudekit-vividkit) - [Chế Độ YOLO - VividKit - Visual Interface cho ClaudeKit | VividKit](#ch-yolo-vividkit-visual-interface-cho-claudekit-vividkit) - [Tiếp Tục Phiên - VividKit - Visual Interface cho ClaudeKit | VividKit](#ti-p-t-c-phi-n-vividkit-visual-interface-cho-claudekit-vividkit) - [What is ClaudeKit? - VividKit Documentation | VividKit](#what-is-claudekit-vividkit-documentation-vividkit) - [Hướng Dẫn CLI - VividKit - Visual Interface cho ClaudeKit | VividKit](#h-ng-d-n-cli-vividkit-visual-interface-cho-claudekit-vividkit) - [ClaudeKit CLI Guide - VividKit Documentation | VividKit](#claudekit-cli-guide-vividkit-documentation-vividkit) - [Khuyến Mãi & Ưu Đãi AI - VividKit Documentation | VividKit](#khuy-n-m-i-u-i-ai-vividkit-documentation-vividkit) - [AI Promotions & Deals - VividKit Documentation | VividKit](#ai-promotions-deals-vividkit-documentation-vividkit) - [Custom Hooks - VividKit Documentation | VividKit](#custom-hooks-vividkit-documentation-vividkit) - [Custom Hooks - VividKit Documentation | VividKit](#custom-hooks-vividkit-documentation-vividkit) - [Decision Tree - VividKit Documentation | VividKit](#decision-tree-vividkit-documentation-vividkit) - [Flowchart Quyết Định - VividKit Documentation | VividKit](#flowchart-quy-t-nh-vividkit-documentation-vividkit) - [Thông Báo Discord cho Claude Code - VividKit Documentation | VividKit](#th-ng-b-o-discord-cho-claude-code-vividkit-documentation-vividkit) - [Discord Notifications for Claude Code - VividKit Documentation | VividKit](#discord-notifications-for-claude-code-vividkit-documentation-vividkit) --- # VividKit - Crystal clear AI coding | VividKit Desktop App Coming Soon ClaudeKit, Made Visual ====================== Visual interface for ClaudeKit's AI commands and skills. No memorization. No terminal expertise. Just browse and click. **Built for ClaudeKit users: Transform CLI workflows into visual, accessible experiences. Developers and non-developers alike.** [Join the Waitlist](https://vividkit.dev/#waitlist) [Explore Guides](https://vividkit.dev/guides) Visual command palette Skill browser Real-time token tracking The Problem: CLI Power Without Visual Intelligence -------------------------------------------------- ClaudeKit is incredible, but the terminal wasn't built for visual workflows. ### Hard to Discover Capabilities buried in markdown files. No visual catalog of available agents, skills, and commands. ### Hard to Remember Syntax friction even for experts. Constant doc lookups break your flow. ### Hard to Visualize Terminal streams text, but you lose the forest for the trees. No graphs, no timelines, no visual pattern recognition across runs. ### High Barrier The terminal excludes your non-technical stakeholders. PMs and designers can't explore agent capabilities or review run results. VividKit: Visual Interface for ClaudeKit ---------------------------------------- Transform ClaudeKit's powerful agent system into an accessible, visual experience. No terminal expertise required. Prerequisites: ClaudeKit CLI installed Setup: 30s for existing users 🎨 Makes ClaudeKit's 60+ commands accessible through visual GUI 🔍 Browse ClaudeKit's 40+ skills visually (no more directory diving) 🤖 Watch ClaudeKit agents orchestrate in real-time 📊 Track token usage and costs with visual dashboards VividKit - Visual Interface Free for All ClaudeKit Users ---------------------------- VividKit is a CK Wrapper — making ClaudeKit simple and visual. FREE FOR CK USERS ### ClaudeKit Wrapper $0 Confused by ClaudeKit commands? VividKit makes it simple and visual. * Visual Interface for ClaudeKit * Auto-update CK Projects (no daily init) * CCS Built-in (Multi-account) * Browse Commands & Skills Visually * Dark/Light Mode [Join Waitlist — It's Free](https://vividkit.dev/#waitlist) COMING SOON ### Pro Features TBD Premium features shaped by our community. Tell us what you need! * **Multi-terminal Sessions (Planned)** * **Session Persistence (Planned)** * Advanced Analytics (Planned) * Project Workspaces (Planned) * Priority Support [Vote for Features](https://vividkit.dev/#waitlist) Powered by ClaudeKit -------------------- VividKit requires ClaudeKit to work. Here's why it's worth it. ### 17 Specialized Agents Planner, code-reviewer, debugger, tester, UI designer, and 12 more specialized AI personas. ### 60+ Commands & 40+ Skills Bootstrap, plan, code, fix, test, design — complete toolkit from idea to deployment. ### UI/UX Pro Max Skill 50+ UI styles, 21+ color, 50+ font — instant professional designs. [### Get ClaudeKit with 20% Discount\ \ You'll need ClaudeKit to use VividKit. Purchase through our referral link to get an exclusive 20% discount.\ \ Get ClaudeKit (20% OFF)](https://claudekit.cc/?ref=OMG49S8R) Slash Commands at a Glance -------------------------- ClaudeKit's 60+ AI commands, organized by skill level. **In VividKit:** These commands become visual, point-and-click actions. While you wait for VividKit, here's your terminal reference: ### Beginner Commands Start here! `/ask "how does auth work?"` Get technical guidance and architectural advice `/brainstorm "mobile features"` Generate ideas with AI collaboration `/fix "search bug"` Automatically diagnose and repair bugs ### Intermediate Commands Level up! `/plan "add user auth"` Create step-by-step implementation plans `/code plan.md` Implement your plans with AI-generated code `/cook "add dark mode"` All-in-one: brainstorm → plan → implement ### Advanced Commands Pro mode! `/bootstrap "dashboard"` Generate complete project scaffolding `/scout "find API endpoints"` Explore and analyze your codebase `/watzup` Review recent changes and git history ### Pro Tips Save tokens with /clear Use `/clear` to clear conversation history before starting implementation Reference files with @ Use `@plan.md` to reference specific files in commands Create save points often Use `/git:cm` to commit your progress regularly so you can restore if something goes wrong Ask questions anytime Use `/ask` to get technical explanations or architectural guidance ### 📚 Learn More [Getting Started with ClaudeKit →\ \ Useful tips and tutorials for new users](https://vividkit.dev/guides) 🎉 Join 2,000+ on the waitlist Join Waitlist Early Access -------------------------- Free early access. No credit card. No spam.. Thanks for joining! We'll be in touch soon.. Your name \* Your email \* I'm a... \* I'm a... Developer Designer Product Manager Non-tech founder Marketer Student Other What would you like to build with VividKit? (optional) Join Waitlist Joining... 🎉 Welcome aboard! We've added you to the waitlist. Check your email for confirmation! We respect your privacy. Unsubscribe at any time. Privacy Policy --- # Redirecting to: /vi/guides/what-is-claudekit [Redirecting from `/vi/guides/` to `/vi/guides/what-is-claudekit`](https://vividkit.dev/vi/guides/what-is-claudekit) --- # VividKit - Visual Interface cho ClaudeKit | VividKit Desktop App Sắp Ra Mắt ClaudeKit, Trở Nên Trực Quan ============================ Giao diện trực quan cho ClaudeKit AI commands và skills. Không cần nhớ lệnh. Không cần biết terminal. Chỉ việc chọn và click. **Cho ClaudeKit users: Biến CLI workflow thành trải nghiệm visual. Developer và non-developer đều dùng được.** [Tham Gia Waitlist](https://vividkit.dev/vi#waitlist) [Mẹo Dùng ClaudeKit](https://vividkit.dev/vi/guides) Visual Command Palette Skill Browser Token Tracking Real-time Vấn Đề: Sức Mạnh CLI Không Có Trí Thông Minh Trực Quan ------------------------------------------------------ ClaudeKit thật tuyệt vời, nhưng terminal không được tạo ra cho các workflow trực quan. ### Khó Khám Phá Tính năng bị chôn vùi trong file markdown. Không có catalog trực quan về các agent, skill và command có sẵn. ### Khó Nhớ Ma sát cú pháp ngay cả với chuyên gia. Tra cứu docs liên tục phá vỡ flow làm việc. ### Khó Trực Quan Hóa Terminal stream text, nhưng bạn mất cái nhìn tổng thể. Không có biểu đồ, timeline hay nhận dạng pattern trực quan giữa các lần chạy. ### Rào Cản Cao Terminal loại trừ các stakeholder non-tech của bạn. PM và designer không thể khám phá tính năng agent hay xem kết quả chạy. VividKit: Visual Interface cho ClaudeKit ---------------------------------------- Biến hệ thống agent mạnh mẽ của ClaudeKit thành trải nghiệm trực quan, dễ tiếp cận. Không cần chuyên môn về terminal. Điều kiện tiên quyết: Đã cài đặt ClaudeKit CLI Thiết lập: 30 giây cho người dùng hiện tại 🎨 Khiến 60+ lệnh của ClaudeKit trở nên dễ tiếp cận qua GUI trực quan 🔍 Duyệt 40+ skill của ClaudeKit một cách trực quan (không cần lội vào thư mục) 🤖 Xem các agent của ClaudeKit điều phối trong thời gian thực 📊 Theo dõi việc sử dụng và chi phí token qua dashboard trực quan VividKit - Giao Diện Trực Quan Miễn Phí Cho Tất Cả Người Dùng ClaudeKit ---------------------------------------- VividKit là CK Wrapper — giúp ClaudeKit đơn giản và trực quan. MIỄN PHÍ CHO CK USERS ### ClaudeKit Wrapper 0₫ Rối với lệnh ClaudeKit? VividKit giúp bạn đơn giản và trực quan. * Giao Diện Trực Quan cho ClaudeKit * Tự Động Update CK Projects (khỏi chạy init mỗi ngày) * Tích Hợp Sẵn CCS (Đa tài khoản) * Duyệt Commands & Skills Trực Quan * Chế Độ Tối/Sáng [Tham Gia Waitlist — Hoàn Toàn Miễn Phí](https://vividkit.dev/vi/#waitlist) SẮP RA MẮT ### Tính Năng Pro SẼ CẬP NHẬT Tính năng premium do cộng đồng định hình. Cho chúng tôi biết bạn cần gì! * **Nhiều Phiên Terminal (Đã Lên Kế Hoạch)** * **Lưu Trữ Phiên (Đã Lên Kế Hoạch)** * Phân Tích Nâng Cao (Đã Lên Kế Hoạch) * Không Gian Làm Việc Dự Án (Đã Lên Kế Hoạch) * Hỗ Trợ Ưu Tiên [Bình Chọn Tính Năng](https://vividkit.dev/vi/#waitlist) Được hỗ trợ bởi ClaudeKit ------------------------- VividKit yêu cầu ClaudeKit để hoạt động. Đây là lý do tại sao nó đáng giá. ### 17 Agent Chuyên Biệt Planner, code-reviewer, debugger, tester, UI designer, và 12 persona AI chuyên biệt khác. ### 60+ Lệnh & 40+ Skill Bootstrap, plan, code, fix, test, design — bộ công cụ hoàn chỉnh từ ý tưởng đến triển khai. ### Skill UI/UX Pro Max 50+ phong cách UI, 21+ màu sắc, 50+ phông chữ — thiết kế chuyên nghiệp tức thì. [### Nhận ClaudeKit với Giảm Giá 20%\ \ Bạn sẽ cần ClaudeKit để sử dụng VividKit. Mua qua link giới thiệu của chúng tôi để nhận giảm giá độc quyền 20%.\ \ Nhận ClaudeKit (Giảm 20%)](https://claudekit.cc/?ref=OMG49S8R) Slash Commands Tổng Quan ------------------------ 60+ lệnh AI của ClaudeKit, được tổ chức theo cấp độ kỹ năng. **Trong VividKit:** Các lệnh này trở thành hành động trực quan, chỉ cần nhấp chuột. Trong khi chờ VividKit, đây là tài liệu tham khảo terminal của bạn: ### Lệnh Dành Cho Người Mới Bắt đầu từ đây! `/ask "how does auth work?"` Nhận hướng dẫn kỹ thuật và lời khuyên về kiến trúc `/brainstorm "mobile features"` Tạo ý tưởng với sự cộng tác của AI `/fix "search bug"` Tự động chẩn đoán và sửa lỗi ### Lệnh Dành Cho Người Có Kinh Nghiệm Nâng cao kỹ năng! `/plan "add user auth"` Tạo kế hoạch triển khai từng bước `/code plan.md` Triển khai kế hoạch của bạn với mã do AI tạo `/cook "add dark mode"` Tất cả trong một: ý tưởng → kế hoạch → triển khai ### Lệnh Nâng Cao Chế độ chuyên nghiệp! `/bootstrap "dashboard"` Tạo khung dự án hoàn chỉnh `/scout "find API endpoints"` Khám phá và phân tích codebase của bạn `/watzup` Xem lại các thay đổi gần đây và lịch sử git ### Mẹo Chuyên Nghiệp Tiết kiệm token với /clear Sử dụng `/clear` để xóa lịch sử cuộc trò chuyện trước khi bắt đầu triển khai Tham chiếu file với @ Sử dụng `@plan.md` để tham chiếu các file cụ thể trong lệnh Tạo điểm lưu thường xuyên Sử dụng `/git:cm` để commit tiến trình của bạn thường xuyên để có thể khôi phục nếu có lỗi xảy ra Hỏi câu hỏi bất cứ lúc nào Sử dụng `/ask` để nhận giải thích kỹ thuật hoặc hướng dẫn về kiến trúc ### 📚 Tìm Hiểu Thêm [Bắt Đầu Với ClaudeKit →\ \ Mẹo và tutorial hữu ích cho người dùng mới](https://vividkit.dev/guides) 🎉 Tham gia 2,000+ người trong danh sách chờ Tham Gia Waitlist Early Access ------------------------------ Early access miễn phí. Không cần credit card. Không spam.. Cảm ơn! Chúng tôi sẽ liên hệ sớm.. Tên của bạn \* Email của bạn \* Tôi là... \* Tôi là... Developer Designer Quản Lý Sản Phẩm Non-tech Founder Marketing Sinh Viên Khác Bạn muốn xây dựng gì với VividKit? (optional) Tham Gia Waitlist Đang tham gia... 🎉 Chào mừng bạn! Chúng tôi đã thêm bạn vào danh sách chờ. Kiểm tra email để xác nhận! Chúng tôi tôn trọng quyền riêng tư của bạn. Hủy đăng ký bất cứ lúc nào. Chính Sách Quyền Riêng Tư --- # What is ClaudeKit? - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) What is ClaudeKit? ------------------ A simple guide for everyone — non-technical users, beginners, and anyone curious about ClaudeKit! What is ClaudeKit? **ClaudeKit** is like giving Claude (the AI assistant) a **super-powered toolbox**. It transforms Claude from a basic chatbot into a **professional coding assistant** that can do many specialized tasks automatically. ### Think of it like this: Imagine you're building a house. Instead of hiring one general worker who knows a bit of everything, ClaudeKit gives you access to: An **architect** (for planning) An **interior designer** (for making things beautiful) A **builder** (for actual construction) A **quality inspector** (for checking everything works) A **maintenance expert** (for fixes) ### The Construction Team Metaphor ClaudeKit works like a **smart project manager** that coordinates a team of specialists: ![ClaudeKit Construction Team Metaphor](https://vividkit.dev/guides/claudekit-team-metaphor.png) **Key Idea:** _"You just say what you want to build. ClaudeKit brings the right experts automatically."_ ### The 5 Building Blocks of ClaudeKit ClaudeKit is built around **5 main pillars**: Agents Specialized Team Members Commands Easy Shortcuts Skills Pre-built Knowledge Workflows Step-by-Step Recipes Hooks Smart Automation ![ClaudeKit 5 Pillars](https://vividkit.dev/guides/claudekit-5-pillars.png) ### How ClaudeKit Processes Your Request Here's what happens when you use ClaudeKit: 1 You type a simple command 2 ClaudeKit understands your request 3 Multiple agents work together 4 You get your completed project! ![ClaudeKit Workflow](https://vividkit.dev/guides/claudekit-workflow.png) ### Before vs After: Life Without and With ClaudeKit WITHOUT ClaudeKit WITH ClaudeKit Write detailed instructions every time Just type /plan or /fix Remember all best practices yourself Built-in skills handle it automatically Do everything step by step manually Automated workflows do the work Start from scratch each project Reusable templates and patterns One general AI for everything Team of experts for each task ![ClaudeKit Before vs After Comparison](https://vividkit.dev/guides/claudekit-comparison.png) ### Quick Start: Common Commands You'll Love [View All Commands](https://vividkit.dev/guides/workflows) #### For Beginners `/ask` Get answers to any question `/brainstorm` Explore ideas together `/fix` Fix errors automatically #### For Building Things `/plan` Create step-by-step plans `/code` Implement your plans `/cook` All-in-one feature builder #### For Git & Documentation `/git:cm` Smart commit messages `/git:pr` Create pull requests `/docs:update` Update documentation ### Summary ClaudeKit = Claude + Superpowers It's a system that makes Claude smarter and more organized by giving it: Agents Commands Skills Workflows Hooks Important: ClaudeKit is a paid product that does NOT include AI models. You need to purchase ClaudeKit separately AND subscribe to Claude (from Anthropic) to power the AI capabilities. [Get ClaudeKit (20% OFF)](https://claudekit.cc/?ref=OMG49S8R) Ready to Get Started? After purchasing ClaudeKit, you can set up and install it via the CLI tool. Our detailed guide walks you through every step. [View CLI Installation Guide](https://vividkit.dev/guides/cli) --- # Giới Thiệu ClaudeKit - VividKit Documentation | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) ClaudeKit là gì? ---------------- Hướng dẫn đơn giản cho mọi người — cả những ai không rành kỹ thuật, người mới bắt đầu, hay bất kỳ ai muốn tìm hiểu về ClaudeKit! ClaudeKit là gì? **ClaudeKit** giống như việc trang bị cho Claude (trợ lý AI) một **bộ công cụ siêu mạnh**. Nó biến Claude từ một chatbot thông thường thành **trợ lý lập trình chuyên nghiệp** có thể tự động thực hiện nhiều tác vụ chuyên biệt. ### Hãy tưởng tượng thế này: Bạn đang xây nhà. Thay vì thuê một thợ biết mỗi thứ một chút, ClaudeKit cho bạn tiếp cận: **Kiến trúc sư** (để lập kế hoạch) **Nhà thiết kế nội thất** (để làm đẹp) **Thợ xây** (để thi công thực tế) **Kiểm định viên** (để đảm bảo chất lượng) **Thợ bảo trì** (để sửa chữa) ### Ví Dụ Đội Xây Dựng ClaudeKit hoạt động như một **quản lý dự án thông minh** điều phối đội ngũ chuyên gia: ![ClaudeKit Construction Team Metaphor](https://www.vividkit.dev/guides/claudekit-team-metaphor-vi.png) **Ý tưởng chính:** _"Bạn chỉ cần nói muốn xây gì. ClaudeKit tự động triệu tập đúng chuyên gia."_ ### 5 Thành Phần Cốt Lõi của ClaudeKit ClaudeKit được xây dựng xung quanh **5 trụ cột chính**: Agents Đội ngũ chuyên gia Commands Lệnh tắt tiện lợi Skills Kiến thức có sẵn Workflows Quy trình từng bước Hooks Tự động hóa thông minh ![ClaudeKit 5 Pillars](https://www.vividkit.dev/guides/claudekit-5-pillars-vi.png) ### ClaudeKit Xử Lý Yêu Cầu Như Thế Nào Đây là những gì xảy ra khi bạn dùng ClaudeKit: 1 Bạn gõ một lệnh đơn giản 2 ClaudeKit hiểu yêu cầu của bạn 3 Các agents phối hợp làm việc 4 Bạn nhận được dự án hoàn chỉnh! ![ClaudeKit Workflow](https://www.vividkit.dev/guides/claudekit-workflow-vi.png) ### So Sánh: Cuộc Sống Có và Không Có ClaudeKit KHÔNG CÓ ClaudeKit CÓ ClaudeKit Phải viết hướng dẫn chi tiết mỗi lần Chỉ cần gõ /plan hoặc /fix Tự nhớ tất cả best practices Skills tích hợp xử lý tự động Làm từng bước thủ công Workflow tự động hoàn thành Làm lại từ đầu mỗi dự án Template và pattern tái sử dụng Một AI làm mọi thứ Đội chuyên gia cho từng tác vụ ![ClaudeKit Before vs After Comparison](https://www.vividkit.dev/guides/claudekit-comparison-vi.png) ### Bắt Đầu Nhanh: Các Lệnh Phổ Biến [Xem Tất Cả Lệnh](https://www.vividkit.dev/vi/guides/workflows) #### Cho Người Mới `/ask` Get answers to any question `/brainstorm` Explore ideas together `/fix` Fix errors automatically #### Cho Việc Xây Dựng `/plan` Create step-by-step plans `/code` Implement your plans `/cook` All-in-one feature builder #### Cho Git & Tài Liệu `/git:cm` Smart commit messages `/git:pr` Create pull requests `/docs:update` Update documentation ### Tóm Lại ClaudeKit = Claude + Siêu Năng Lực Đây là hệ thống giúp Claude thông minh và có tổ chức hơn bằng cách cung cấp: Agents Commands Skills Workflows Hooks Quan trọng: ClaudeKit là sản phẩm trả phí và KHÔNG bao gồm AI models. Bạn cần mua ClaudeKit riêng VÀ đăng ký gói Claude (từ Anthropic) để sử dụng các tính năng AI. [Mua ClaudeKit (Giảm 20%)](https://claudekit.cc/?ref=OMG49S8R) Sẵn Sàng Bắt Đầu? Sau khi mua ClaudeKit, bạn có thể cài đặt qua công cụ CLI. Hướng dẫn chi tiết của chúng tôi sẽ dẫn bạn qua từng bước. [Xem Hướng Dẫn Cài Đặt CLI](https://www.vividkit.dev/vi/guides/cli) --- # Slash Commands Guide - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Commands Reference ------------------ Comprehensive list of all available commands What are Slash Commands? Think of slash commands as **magic shortcuts** 🪄 — just type `/command` and let AI do the heavy lifting! No coding required, just tell ClaudeKit what you want. Example `/cook "add a login button"` → AI builds the entire feature for you! 🎉 ### Beginner Start here! Perfect for your first steps with AI coding `/ask` Ask technical questions `/brainstorm` Explore ideas together `/fix` Fix bugs automatically ### Intermediate Level up! Build complete features with ease `/plan` Create step-by-step plans `/code` Implement your plans `/cook` All-in-one feature builder ### Advanced Pro mode! Build entire projects from scratch `/bootstrap` Create complete projects `/scout` Explore your codebase `/watzup` Review recent changes Your Coding Journey in 3 Simple Steps ------------------------------------- From idea to working code — no programming knowledge needed! 1 ### Start with an Idea Have an idea? Just talk to ClaudeKit like you would to a friend! `/brainstorm "I want to add a dark mode toggle to my website"` AI helps you explore different approaches and possibilities 2 ### Create a Plan AI creates a detailed roadmap for building your feature `/plan "Create dark mode toggle"` Plan includes: * What files to create/modify * Step-by-step instructions * How to test everything works **Important Context Tip:** Run `/clear` before starting the build to ensure the AI focuses only on the approved plan. 3 ### AI Builds It! Sit back and watch AI write the code, test it, and make it perfect! `/code @plan.md` AI implements the entire plan AI automatically: * Writes all the code * Runs tests to verify it works * Reviews code quality #### Pro Tip: Skip Steps with /cook Want it even faster? Use `/cook` to do all 3 steps at once! `/cook "add dark mode toggle"` → AI brainstorms, plans, and implements everything automatically! 🚀 All Commands by Category ------------------------ ### Planning & Development From idea to code implementation `/plan ⚡⚡⚡` Medium Create detailed implementation plans `/code ⚡` Easy Implement existing plans with tests `/cook ⚡⚡⚡` Medium All-in-one: plan + code + test `/bootstrap ⚡⚡⚡⚡⚡` Advanced Create complete projects from scratch `/brainstorm ⚡⚡` Easy Explore ideas and possibilities ### Fixing & Debugging Resolve issues and errors `/fix ⚡⚡` Medium Smart auto-fix for any issue `/debug ⚡⚡` Medium Find the root cause of issues `/fix:test ⚡` Easy Fix failing tests `/fix:ui ⚡` Easy Fix UI/design issues `/fix:types ⚡` Easy Fix TypeScript errors `/fix:ci ⚡` Medium Fix CI/CD pipeline issues ### Testing & Quality Ensure code quality and reliability `/test ⚡` Easy Run tests and analyze results `/review:codebase ⚡⚡` Medium Comprehensive code review `/watzup ⚡` Easy Review recent changes ### Navigation & Help Find your way around `/ask ⚡` Easy Ask technical questions `/scout ⚡⚡` Medium Search and explore codebase `/ck-help ⚡` Easy Interactive ClaudeKit guide `/resume ⚡` Advanced Resume session from ID ### Design & Content Create beautiful designs and content `/design:fast ⚡` Easy Quick design generation `/design:good ⚡⚡` Medium High-quality designs `/content:enhance ⚡` Easy Improve existing content ### Git & Version Control Manage your code versions `/git:cm ⚡` Easy Smart commit messages `/git:pr ⚡` Easy Create pull requests `/git:merge ⚡⚡` Medium Merge with conflict resolution Tips for Beginners ------------------ Talk Like a Human No need for technical jargon! Explain what you want in plain English. AI understands you! Use @ to Reference Files Type `@filename` to tell AI which files to work with Start Small Begin with simple commands like `/ask` or `/brainstorm` to get comfortable Don't Be Afraid to Experiment AI helps you learn as you go. Try different commands and see what happens! ### Understanding the Symbols #### Difficulty Levels: Easy Great for beginners Medium Some AI coordination needed Advanced Full project workflows #### Token Consumption: ⚡ Low token usage ⚡⚡ Medium token usage ⚡⚡⚡ High token usage ⚡⚡⚡⚡⚡ Maximum token usage Need more commands? [See full docs from official Claudekit site.](https://docs.claudekit.cc/docs/commands) --- # Quy Trình Làm Việc - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) Quy Trình Được Đề Xuất ---------------------- Các hướng dẫn từng bước giúp bạn sử dụng AI để xây dựng phần mềm mà không cần biết code. Mới với ClaudeKit? Các quy trình này bao gồm các chuỗi lệnh hoạt động cùng nhau để hoàn thành các tác vụ phổ biến. Hoàn hảo để bắt đầu! ### Xây Dựng Feature Mới Beginner Tốt nhất cho: Thêm feature mới vào app của bạn ~15-30 phút 4 bước 1 `/brainstorm` Brainstorm ý tưởng Thảo luận feature với AI để khám phá các khả năng và nhận feedback 2 `/plan` Tạo implementation plan AI tạo plan chi tiết từng bước để build feature 3 Review & điều chỉnh plan Xem plan, đặt câu hỏi và yêu cầu thay đổi nếu cần 4 `/code @plan.md` Implement plan AI viết code theo plan, chạy tests và review công việc 💡 Mẹo: Sử dụng /clear trước /code để tiết kiệm tokens ### Sửa Lỗi (Bug Fix) Beginner Tốt nhất cho: Sửa lỗi và hành vi không mong muốn ~5-15 phút 3 bước 1 `/debug` Debug vấn đề AI phân tích code để tìm root cause 2 `/fix` Apply fix AI sửa bug và giải thích gì sai và cách fix 3 `/test` Verify fix Chạy tests để đảm bảo bug đã được sửa và không break gì khác 💡 Tip: /fix tự động route đến specialized fix commands ### Quick Implementation Intermediate Tốt nhất cho: Features nhỏ khi bạn biết mình muốn gì ~10-20 phút 1 bước 1 `/cook "nhiệm vụ của bạn"` All-in-one command AI tự động research, plan, implement, test và review feature /cook "nhiệm vụ của bạn" tự động làm gì: * Research best practices và technologies * Tạo và execute implementation plan * Viết và test code * Review quality và best practices 💡 Tip: Skip planning steps để có kết quả nhanh hơn ### Bootstrap Project Mới Advanced Tốt nhất cho: Tạo app hoàn chỉnh từ đầu ~1-2 giờ 1 bước 1 `/bootstrap "mô tả ứng dụng của bạn"` Full project setup AI build toàn bộ project: research, architecture, design, implementation và docs /bootstrap "mô tả ứng dụng của bạn" tự động làm gì: * Research và chọn tech stack * Project structure và architecture * UI/UX design và wireframes * Full implementation với tests * Comprehensive documentation ⚠️ Warning: Command này dùng nhiều AI tokens ### Mẹo Chuyên Nghiệp Tiết kiệm token với /clear Sử dụng `/clear` để xóa lịch sử cuộc trò chuyện trước khi bắt đầu triển khai Tham chiếu file với @ Sử dụng `@plan.md` để tham chiếu các file cụ thể trong lệnh Tạo điểm lưu thường xuyên Sử dụng `/git:cm` để commit tiến trình của bạn thường xuyên để có thể khôi phục nếu có lỗi xảy ra Hỏi câu hỏi bất cứ lúc nào Sử dụng `/ask` để nhận giải thích kỹ thuật hoặc hướng dẫn về kiến trúc Scout trước khi code Sử dụng `/scout` để tìm nhanh các file liên quan trong codebase của bạn Debug trước khi sửa Sử dụng `/debug` trước để tìm nguyên nhân gốc rễ, sau đó dùng `/fix` khi đã sẵn sàng Khám phá lệnh với /ck-help Gõ `/ck-help` để xem tất cả 60+ lệnh được tổ chức theo danh mục Luôn bắt đầu với /plan Tạo một kế hoạch có cấu trúc trước, sau đó sử dụng `/code` để thực hiện từng bước ### Tham Khảo Lệnh Phổ Biến `/brainstorm` Khám phá ý tưởng và khả năng `/plan` Tạo kế hoạch triển khai `/cook` Triển khai tính năng từ đầu đến cuối `/code` Triển khai các kế hoạch có sẵn `/fix` Sửa lỗi và vấn đề `/test` Chạy và phân tích tests `/debug` Điều tra vấn đề `/ask` Nhận hướng dẫn kỹ thuật `/clear` Xóa lịch sử cuộc trò chuyện Cần thêm quy trình? Xem [tài liệu đầy đủ từ trang web chính thức của Claudekit](https://docs.claudekit.cc/docs/workflows) . --- # Recommended Workflows - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Recommended Workflows --------------------- Step-by-step guides helping you use AI to build software without knowing how to code. New to ClaudeKit? These workflows consist of sequences of commands that work together to accomplish common tasks. Perfect for getting started! ### Build a New Feature Beginner Best for: Adding new functionality to your app ~15-30 min 4 steps 1 `/brainstorm` Explore ideas Discuss your feature idea with AI to explore possibilities and get feedback 2 `/plan` Create implementation plan AI creates a detailed step-by-step plan for building your feature 3 Review & adjust the plan Look through the plan, ask questions, and request changes if needed 4 `/code @plan.md` Implement the plan AI writes the code following the plan, runs tests, and reviews the work 💡 Tip: Use /clear before /code to save tokens ### Fix a Bug Beginner Best for: Fixing errors and unexpected behavior ~5-15 min 3 steps 1 `/debug` Investigate the issue AI analyzes your code to find the root cause of the problem 2 `/fix` Apply the fix AI fixes the bug and explains what was wrong and how it was fixed 3 `/test` Verify the fix Run tests to make sure the bug is fixed and nothing else broke 💡 Tip: /fix automatically routes to specialized fix commands ### Quick Implementation Intermediate Best for: Small features when you know what you want ~10-20 min 1 steps 1 `/cook "your task"` All-in-one command AI researches, plans, implements, tests, and reviews the feature automatically What /cook "your task" does automatically: * Research best approaches and technologies * Create and execute implementation plan * Write and test the code * Review for quality and best practices 💡 Tip: Skip planning steps for faster results ### Start New Project Advanced Best for: Creating a complete app from scratch ~1-2 hours 1 steps 1 `/bootstrap "describe your app"` Complete project setup AI builds your entire project: research, architecture, design, implementation, and documentation What /bootstrap "describe your app" does automatically: * Research and tech stack selection * Project structure and architecture * UI/UX design and wireframes * Complete implementation with tests * Comprehensive documentation ⚠️ Warning: This uses significant AI tokens ### Pro Tips Save tokens with /clear Use `/clear` to clear conversation history before starting implementation Reference files with @ Use `@plan.md` to reference specific files in commands Create save points often Use `/git:cm` to commit your progress regularly so you can restore if something goes wrong Ask questions anytime Use `/ask` to get technical explanations or architectural guidance Scout before coding Use `/scout` to quickly find relevant files in your codebase Debug before fixing Use `/debug` first to find root cause, then `/fix` when ready Discover commands with /ck-help Type `/ck-help` to see all 60+ commands organized by category Always start with /plan Create a structured plan first, then use `/code` to execute it step-by-step ### Common Commands Reference `/brainstorm` Explore ideas and possibilities `/plan` Create implementation plans `/cook` Implement features end-to-end `/code` Implement existing plans `/fix` Fix bugs and issues `/test` Run and analyze tests `/debug` Investigate issues `/ask` Get technical guidance `/clear` Clear conversation history Need more workflows? See [full docs from official Claudekit site](https://docs.claudekit.cc/docs/workflows) . --- # Tham Khảo Lệnh - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) Tham Khảo Lệnh -------------- Danh sách đầy đủ các slash commands Slash Commands Là Gì? Hãy nghĩ về slash commands như là **các phím tắt thần kỳ** 🪄 — chỉ cần gõ `/command` và để AI làm phần việc nặng nhọc! Không cần code, chỉ cần nói cho ClaudeKit biết bạn muốn gì. Ví dụ `/cook "add a login button"` → AI xây dựng toàn bộ tính năng cho bạn! 🎉 ### Người Mới Bắt đầu ở đây! Hoàn hảo cho những bước đầu tiên của bạn với lập trình AI `/ask` Đặt câu hỏi kỹ thuật `/brainstorm` Cùng nhau khám phá ý tưởng `/fix` Sửa lỗi tự động ### Trung Cấp Nâng trình! Xây dựng các tính năng hoàn chỉnh một cách dễ dàng `/plan` Tạo kế hoạch từng bước `/code` Triển khai kế hoạch của bạn `/cook` Trình xây dựng tính năng tất cả trong một ### Nâng Cao Chế độ Pro! Xây dựng toàn bộ dự án từ đầu `/bootstrap` Tạo dự án hoàn chỉnh `/scout` Khám phá codebase của bạn `/watzup` Xem xét các thay đổi gần đây Hành Trình Code Của Bạn Trong 3 Bước ------------------------------------ Từ ý tưởng đến mã hoạt động — không cần kiến thức lập trình! 1 ### Bắt Đầu Với Một Ý Tưởng Có ý tưởng? Chỉ cần nói chuyện với ClaudeKit như nói với một người bạn! `/brainstorm "Tôi muốn thêm nút chuyển đổi chế độ tối vào trang web của mình"` AI giúp bạn khám phá các cách tiếp cận và khả năng khác nhau 2 ### Tạo Kế Hoạch AI tạo lộ trình chi tiết để xây dựng tính năng của bạn `/plan "Tạo nút chuyển đổi chế độ tối"` Kế hoạch bao gồm: * Những file nào cần tạo/sửa đổi * Hướng dẫn từng bước * Cách kiểm tra mọi thứ hoạt động **Mẹo Ngữ Cảnh Quan Trọng:** Chạy `/clear` trước khi bắt đầu xây dựng để đảm bảo AI chỉ tập trung vào kế hoạch đã được phê duyệt. 3 ### AI Xây Dựng Nó! Ngồi lại và xem AI viết code, kiểm tra nó và làm cho nó hoàn hảo! `/code @plan.md` AI triển khai toàn bộ kế hoạch AI tự động: * Viết tất cả code * Chạy kiểm thử để xác minh nó hoạt động * Xem xét chất lượng code #### Mẹo Pro: Bỏ Qua Các Bước Với /cook Muốn nhanh hơn nữa? Sử dụng `/cook` để thực hiện cả 3 bước cùng một lúc! `/cook "add dark mode toggle"` → AI brainstorms, lên kế hoạch và triển khai mọi thứ tự động! 🚀 Tất Cả Lệnh Theo Danh Mục ------------------------- ### Lập Kế Hoạch & Phát Triển Từ ý tưởng đến triển khai mã nguồn `/plan ⚡⚡⚡` Trung Bình Tạo kế hoạch triển khai chi tiết `/code ⚡` Dễ Triển khai các kế hoạch có sẵn với kiểm thử `/cook ⚡⚡⚡` Trung Bình Tất cả trong một: plan + code + test `/bootstrap ⚡⚡⚡⚡⚡` Nâng Cao Tạo dự án hoàn chỉnh từ đầu `/brainstorm ⚡⚡` Dễ Khám phá ý tưởng và khả năng ### Sửa Lỗi & Gỡ Lỗi Giải quyết các vấn đề và lỗi `/fix ⚡⚡` Trung Bình Sửa lỗi tự động thông minh cho mọi vấn đề `/debug ⚡⚡` Trung Bình Tìm nguyên nhân gốc rễ của vấn đề `/fix:test ⚡` Dễ Sửa các bài kiểm thử bị lỗi `/fix:ui ⚡` Dễ Sửa các vấn đề UI/thiết kế `/fix:types ⚡` Dễ Sửa các lỗi TypeScript `/fix:ci ⚡` Trung Bình Sửa các vấn đề đường ống CI/CD ### Kiểm Thử & Chất Lượng Đảm bảo chất lượng và độ tin cậy của mã `/test ⚡` Dễ Chạy kiểm thử và phân tích kết quả `/review:codebase ⚡⚡` Trung Bình Đánh giá mã toàn diện `/watzup ⚡` Dễ Xem xét các thay đổi gần đây ### Điều Hướng & Trợ Giúp Tìm đường và thông tin trợ giúp `/ask ⚡` Dễ Đặt câu hỏi kỹ thuật `/scout ⚡⚡` Trung Bình Tìm kiếm và khám phá codebase `/ck-help ⚡` Dễ Hướng dẫn ClaudeKit tương tác `/resume ⚡` Nâng Cao Tiếp tục phiên làm việc từ ID ### Design & Content Create beautiful designs and content `/design:fast ⚡` Dễ Tạo thiết kế nhanh `/design:good ⚡⚡` Trung Bình Thiết kế chất lượng cao `/content:enhance ⚡` Dễ Cải thiện nội dung hiện có ### Git & Version Control Manage your code versions `/git:cm ⚡` Dễ Thông điệp commit thông minh `/git:pr ⚡` Dễ Tạo pull requests `/git:merge ⚡⚡` Trung Bình Gộp code và giải quyết xung đột Mẹo Cho Người Mới Bắt Đầu ------------------------- Nói Chuyện Như Con Người Không cần thuật ngữ kỹ thuật! Giải thích những gì bạn muốn bằng ngôn ngữ đơn giản. AI hiểu bạn! Sử Dụng @ Để Tham Chiếu File Gõ `@filename` để cho AI biết file nào cần làm việc Bắt Đầu Nhỏ Bắt đầu với các lệnh đơn giản như `/ask` hoặc `/brainstorm` để làm quen Đừng Ngại Thử Nghiệm AI giúp bạn học hỏi khi bạn làm. Thử các lệnh khác nhau và xem điều gì xảy ra! ### Hiểu Các Ký Hiệu #### Mức Độ Khó: Dễ Tuyệt vời cho người mới bắt đầu Trung Bình Cần một chút phối hợp với AI Nâng Cao Quy trình dự án đầy đủ #### Tiêu Thụ Token: ⚡ Sử dụng ít token ⚡⚡ Sử dụng token trung bình ⚡⚡⚡ Sử dụng nhiều token ⚡⚡⚡⚡⚡ Sử dụng token tối đa Cần thêm lệnh? [Xem tài liệu đầy đủ từ trang web chính thức của Claudekit.](https://docs.claudekit.cc/docs/commands) --- # Thiết Kế UI/UX - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) UI/UX Pro Max ------------- Tạo thiết kế UI chuyên nghiệp, sẵn sàng cho sản phẩm chỉ trong vài giây với sức mạnh của ClaudeKit. UI/UX Pro Max Là Gì? -------------------- Một kỹ năng AI chuyên biệt đóng vai trò là đối tác thiết kế chuyên nghiệp của bạn. Nó giúp bạn tạo ra các giao diện người dùng nhất quán, dễ tiếp cận và đẹp mắt mà không cần phải là một nhà thiết kế. [Mã nguồn trên GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) Bên Trong Có Gì • 50+ Phong Cách UI • 21+ Bảng Màu • 50+ Cặp Phông Chữ • 20+ Loại Biểu Đồ ### Cho Mọi Người Không cần biết code! Hoàn hảo nếu bạn đang xây dựng trang đích, hồ sơ năng lực, hoặc muốn thiết kế đẹp mà không cần kiến thức kỹ thuật. * ✓ Chủ Doanh Nghiệp * ✓ Người Sáng Tạo Nội Dung * ✓ Doanh Nhân ### Cho Lập Trình Viên Tăng tốc quy trình! Nhận hệ thống thiết kế, bảng màu sẵn sàng cho code, và các thực hành tốt nhất cho từng stack ngay lập tức. * ✓ Frontend Devs * ✓ Fullstack Devs * ✓ Indie Hackers ### Cho Nhà Thiết Kế Cảm hứng nhanh chóng! Khám phá các hệ thống thiết kế được tuyển chọn, tìm hiểu các xu hướng mới, và duy trì sự nhất quán. * ✓ UI Designers * ✓ UX Designers * ✓ Product Designers Cách Hoạt Động (3 Bước Đơn Giản) -------------------------------- Từ con số không đến thiết kế chuyên nghiệp trong vài phút — không cần kỹ năng thiết kế! 1 ### Nói Cho AI Biết Bạn Muốn Gì Chỉ cần mô tả dự án của bạn bằng ngôn ngữ tự nhiên! Không cần thuật ngữ kỹ thuật. `Bạn nói:` "Tôi cần một trang đích cho doanh nghiệp spa cao cấp của mình" AI hiểu: loại sản phẩm (spa), ngành (làm đẹp/sức khỏe), phong cách cần thiết (sang trọng) 2 ### AI Tìm Kiếm Trong Cơ Sở Dữ Liệu Thiết Kế Ở hậu trường, AI tìm kiếm trong 8 tên miền thiết kế để xây dựng hệ thống thiết kế hoàn hảo cho bạn Đang tìm kiếm cho bạn: **Style Guide** (sang trọng, mềm mại) **Màu Sắc** (bảng màu spa) **Typography** (font chữ sang trọng) **Bố Cục** (trang đích) **Quy Tắc UX** (thực hành tốt nhất) **Khả Năng Truy Cập** (tiêu chuẩn) 3 ### Nhận Code Đẹp, Sẵn Sàng Cho Sản Phẩm AI tạo ra HTML/CSS hoàn chỉnh với tất cả các lựa chọn thiết kế được thực hiện hoàn hảo. Những gì bạn nhận được: * Bảng màu chuyên nghiệp được áp dụng * Font chữ đẹp với liên kết Google Fonts * Thiết kế đáp ứng (hoạt động trên mọi thiết bị) * Hoạt ảnh và tương tác mượt mà * Tuân thủ khả năng truy cập (WCAG AA) #### Kết Quả: Thiết Kế Chuyên Nghiệp Trong Vài Phút! Những gì trước đây mất hàng giờ nghiên cứu và thiết kế giờ được hoàn thành trong vài giây. Chỉ cần sao chép code và bạn đã sẵn sàng ra mắt! **Thời Gian Tiết Kiệm:** Cách truyền thống: 6-8 giờ Với UI/UX Pro Max: 2-5 phút Bạn Có Thể Xây Dựng Gì ---------------------- ### Landing Pages Tạo các trang đích tuyệt đẹp cho bất kỳ doanh nghiệp nào • Sản Phẩm SaaS • Cửa Hàng E-commerce • Dịch Vụ Y Tế • Làm Đẹp & Sức Khỏe ### Dashboards Xây dựng bảng điều khiển giàu dữ liệu với các biểu đồ hoàn hảo • Dashboard Phân Tích • Admin Panels • Trí Tuệ Doanh Nghiệp • Công Cụ Giám Sát ### Portfolios Trưng bày công việc của bạn với các portfolio đẹp mắt • Portfolio Nhà Thiết Kế • Showcase Lập Trình Viên • Công Việc Sáng Tạo • Trang Web Nhiếp Ảnh ### Mobile Apps Thiết kế ứng dụng di động cho mọi nền tảng • Ứng Dụng React Native • Ứng Dụng Flutter • SwiftUI (iOS) • Progressive Web Apps 50+ Phong Cách UI Để Lựa Chọn ----------------------------- Từ tối giản đến glassmorphism — tìm phong cách hoàn hảo cho dự án của bạn Glassmorphism Hiệu ứng kính mờ Minimalism Sạch sẽ & đơn giản Aurora UI Gradient rực rỡ Dark Mode Bóng tối chuyên nghiệp Neumorphism Bóng đổ mềm mại Brutalism Thô và táo bạo Claymorphism Hiệu ứng đất sét 3D ...và nhiều hơn nữa! Khám phá tất cả phong cách Mẹo Cho Người Mới Bắt Đầu ------------------------- Sử Dụng Ngôn Ngữ Tự Nhiên Chỉ cần nói "Tôi muốn một trang web spa". Không cần thuật ngữ kỹ thuật. Mô Tả Tâm Trạng Đề cập xem bạn muốn nó "yên bình", "năng động", "chuyên nghiệp", hay "vui vẻ". Bắt Đầu Đơn Giản Bắt đầu với một trang. Thích nó? Yêu cầu AI tạo thêm theo cùng phong cách. Lặp Lại Ngay Lập Tức "Làm cho nó nhiều màu sắc hơn!" - AI cập nhật thiết kế trong vài giây. Cách Sử Dụng Với ClaudeKit -------------------------- Chỉ cần thêm cụm từ ma thuật này để kích hoạt hệ thống trí tuệ thiết kế! ### Cụm Từ Ma Thuật: `Using ui-ux-pro-max skill, ` Vậy thôi! AI sẽ tự động tìm kiếm cơ sở dữ liệu thiết kế và tạo code đẹp cho bạn. ### Hướng Dẫn Từng Bước: 1 **Bắt đầu prompt của bạn với:** `Using ui-ux-pro-max skill,` 2 **Mô tả những gì bạn muốn:** Nói chuyện tự nhiên về dự án, ngành nghề, sở thích phong cách, màu sắc, tâm trạng, v.v. 3 **Nhấn Enter & Xem Phép Màu!** AI tìm kiếm cơ sở dữ liệu thiết kế, tạo hệ thống thiết kế của bạn, và giao code sẵn sàng cho sản phẩm. ### Prompt ClaudeKit Thực Tế (Sao Chép & Thử!): Người Mới Landing Page `Using ui-ux-pro-max skill, tạo một trang landing page (trang đích) đẹp cho phòng tập yoga của tôi. Tôi muốn màu sắc êm dịu, yên bình và phông chữ thanh lịch. Hãy làm cho nó trông chuyên nghiệp nhưng chào đón.` AI sẽ tìm kiếm màu sắc làm đẹp/sức khỏe, typography sang trọng, phong cách tối giản, và tạo HTML hoàn chỉnh Trung Cấp Dashboard `Using ui-ux-pro-max skill, xây dựng một bảng điều khiển phân tích SaaS với phong cách glassmorphism và chế độ tối. Bao gồm các biểu đồ dữ liệu.` AI sẽ tìm kiếm phong cách glassmorphism, màu sắc SaaS, mẫu dark mode, các loại biểu đồ, và thực hành tốt nhất cho React Nâng Cao E-commerce `Using ui-ux-pro-max skill, thiết kế một trang sản phẩm thương mại điện tử sang trọng cho đồng hồ cao cấp. Cảm giác cao cấp với typography thanh lịch. Bao gồm bố cục trưng bày sản phẩm với tính năng phóng to. Xây dựng bằng Next.js.` AI sẽ tìm kiếm e-commerce sang trọng, màu sắc cao cấp, typography thanh lịch, bố cục trưng bày sản phẩm, và các mẫu Next.js #### 💡 Mẹo Pro Để Có Kết Quả Tốt Hơn: * • Đề cập đến ngành nghề của bạn (y tế, làm đẹp, fintech) để có đề xuất màu sắc/phong cách tốt hơn * • Cụ thể về phong cách (sang trọng, vui tươi, tối giản, hiện đại) để khớp thiết kế chính xác * • Yêu cầu các framework cụ thể nếu cần ("Using Tailwind", "Using React") Ví Dụ Prompt Để Thử ------------------- Sao chép các ví dụ này và tùy chỉnh chúng cho dự án của bạn! 1 `"Tạo một trang landing page cho phòng tập yoga của tôi. Sử dụng màu sắc êm dịu và phông chữ thanh lịch."` → AI sẽ tìm kiếm: màu sắc làm đẹp/sức khỏe + typography sang trọng + phong cách tối giản 2 `"Xây dựng một bảng điều khiển SaaS hiện đại với chế độ tối và phong cách glassmorphism."` → AI sẽ tìm kiếm: phong cách glassmorphism + màu sắc SaaS + mẫu dark mode + loại biểu đồ 3 `"Thiết kế một portfolio cho nhiếp ảnh gia. Làm cho nó tối giản, sạch sẽ và tập trung vào trưng bày."` → AI sẽ tìm kiếm: phong cách tối giản + bố cục portfolio + typography thanh lịch 4 `"Tạo một trang chủ thương mại điện tử cho đồng hồ sang trọng với cảm giác cao cấp."` → AI sẽ tìm kiếm: e-commerce sang trọng + màu sắc thanh lịch + typography cao cấp + bố cục trưng bày sản phẩm Những Gì AI Kiểm Tra Trước Khi Giao ----------------------------------- Mọi thiết kế đều được xác thực tự động cho chất lượng và khả năng truy cập ### Chất Lượng Hình Ảnh * ✓ Không dùng biểu tượng emoji (sử dụng icon SVG chuyên nghiệp) * ✓ Kích thước và kiểu dáng icon nhất quán * ✓ Logo đúng thương hiệu từ các nguồn chính thức * ✓ Hiệu ứng hover không gây thay đổi bố cục ### Tương Tác * ✓ Các phần tử bấm được có con trỏ cursor-pointer * ✓ Phản hồi hình ảnh rõ ràng khi hover/click * ✓ Chuyển đổi mượt mà (150-300ms) * ✓ Điều hướng bằng bàn phím hoạt động hoàn hảo ### Khả Năng Truy Cập * ✓ Độ tương phản văn bản đạt chuẩn WCAG AA (4.5:1) * ✓ Tất cả hình ảnh đều có văn bản thay thế mô tả * ✓ Đầu vào biểu mẫu có nhãn thích hợp * ✓ Tôn trọng tùy chọn giảm chuyển động ### Đáp Ứng * ✓ Hoạt động trên di động (320px+) * ✓ Tối ưu hóa cho máy tính bảng (768px+) * ✓ Hoàn hảo trên máy tính để bàn (1024px+) * ✓ Không cuộn ngang trên bất kỳ thiết bị nào --- # UI/UX Pro Max Guide - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) UI/UX Pro Max ------------- Create professional, production-ready UI designs in seconds with the power of ClaudeKit. What is UI/UX Pro Max? ---------------------- A specialized AI skill that acts as your professional design partner. It helps you generate consistent, accessible, and beautiful user interfaces without needing to be a designer. [Source code on GitHub](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) What's Inside • 50+ UI Styles • 21+ Color Palettes • 50+ Font Pairings • 20+ Chart Types ### For Everyone No coding needed! Perfect if you're building landing pages, portfolios, or want beautiful designs without technical knowledge. * ✓ Business Owners * ✓ Content Creators * ✓ Entrepreneurs ### For Developers Speed up workflow! Get design systems, code-ready color palettes, and stack-specific best practices instantly. * ✓ Frontend Devs * ✓ Fullstack Devs * ✓ Indie Hackers ### For Designers Inspiration fast! Discover curated design systems, explore trending styles, and maintain consistency. * ✓ UI Designers * ✓ UX Designers * ✓ Product Designers How It Works (3 Simple Steps) ----------------------------- From zero to professional design in minutes — no design skills required! 1 ### Tell AI What You Want Just describe your project in plain English! No technical jargon needed. `You say:` "I need a landing page for my luxury spa business" AI understands: product type (spa), industry (beauty/wellness), style needed (elegant) 2 ### AI Searches Design Database Behind the scenes, AI searches 8 design domains to build your perfect design system Searching for you: **Style Guide** (elegant, soft) **Colors** (spa palette) **Typography** (luxury fonts) **Layout** (landing page) **UX Rules** (best practices) **Accessibility** (standards) 3 ### Get Beautiful, Production-Ready Code AI creates complete HTML/CSS with all design choices perfectly implemented. What you receive: * Professional color scheme applied * Beautiful fonts with Google Fonts links * Responsive design (works on all devices) * Smooth animations and interactions * Accessibility compliant (WCAG AA) #### Result: Professional Design in Minutes! What used to take hours of research and design work is done in seconds. Just copy the code and you're ready to launch! **Time Saved:** Traditional way: 6-8 hours With UI/UX Pro Max: 2-5 minutes What You Can Build ------------------ ### Landing Pages Create stunning landing pages for any business • SaaS Products • E-commerce Stores • Healthcare Services • Beauty & Wellness ### Dashboards Build data-rich dashboards with perfect charts • Analytics Dashboards • Admin Panels • Business Intelligence • Monitoring Tools ### Portfolios Showcase your work with beautiful portfolios • Designer Portfolios • Developer Showcases • Creative Work • Photography Sites ### Mobile Apps Design mobile apps for any platform • React Native Apps • Flutter Apps • SwiftUI (iOS) • Progressive Web Apps 50+ UI Styles to Choose From ---------------------------- From minimalist to glassmorphism — find the perfect style for your project Glassmorphism Frosted glass effect Minimalism Clean & simple Aurora UI Vibrant gradients Dark Mode Professional darkness Neumorphism Soft shadows Brutalism Raw & bold Claymorphism 3D clay effect ...and more! Explore all styles Tips for Beginners ------------------ Use Plain English Just say "I want a spa website". No technical terms needed. Describe Mood Mention if you want it "calm", "energetic", "professional", or "fun". Start Simple Start with one page. Like it? Ask AI to make more in the same style. Iterate Instantly "Make it more colorful!" - AI updates the design in seconds. How to Use with ClaudeKit ------------------------- Just add this magic phrase to activate the design intelligence system! ### The Magic Phrase: `Using ui-ux-pro-max skill, ` That's it! AI will automatically search design databases and create beautiful code for you. ### Step-by-Step Guide: 1 **Start your prompt with:** `Using ui-ux-pro-max skill,` 2 **Describe what you want:** Talk naturally about your project, industry, style preferences, colors, mood, etc. 3 **Press Enter & Watch the Magic!** AI searches design databases, creates your design system, and delivers production-ready code. ### Real ClaudeKit Prompts (Copy & Try!): Beginner Landing Page `Using ui-ux-pro-max skill, create a beautiful landing page for my yoga studio. I want calming, peaceful colors and elegant fonts. Make it look professional but welcoming.` AI will search beauty/wellness colors, elegant typography, minimalist style, and create complete HTML Intermediate Dashboard `Using ui-ux-pro-max skill, build a SaaS analytics dashboard with glassmorphism style and dark mode. Include data charts.` AI will search glassmorphism style, SaaS colors, dark mode patterns, chart types, and React best practices Advanced E-commerce `Using ui-ux-pro-max skill, design a luxury e-commerce product page for high-end watches. Premium feel with elegant typography. Include product showcase layout with zoom feature. Build with Next.js.` AI will search luxury e-commerce, premium colors, elegant typography, product showcase layout, and Next.js patterns #### 💡 Pro Tips for Better Results: * • Mention your industry (healthcare, beauty, fintech) for better color/style recommendations * • Be specific about style (elegant, playful, minimal, modern) for accurate design matching * • Ask for specific frameworks if needed ("Using Tailwind", "Using React") Example Prompts to Try ---------------------- Copy these examples and customize them for your project! 1 `"Create a landing page for my yoga studio. Use calming colors and elegant fonts."` → AI will search: beauty/wellness colors + elegant typography + minimalist style 2 `"Build a modern SaaS dashboard with dark mode and glassmorphism style."` → AI will search: glassmorphism style + SaaS colors + dark mode patterns + chart types 3 `"Design a portfolio for a photographer. Make it minimal, clean, and showcase-focused."` → AI will search: minimalism style + portfolio layout + elegant typography 4 `"Create an e-commerce homepage for luxury watches with premium feel."` → AI will search: luxury e-commerce + elegant colors + premium typography + product showcase layout What AI Checks Before Delivery ------------------------------ Every design is automatically validated for quality and accessibility ### Visual Quality * ✓ No emoji icons (uses professional SVG icons) * ✓ Consistent icon sizes and styles * ✓ Brand-correct logos from official sources * ✓ Hover effects don't cause layout shifts ### Interactions * ✓ Clickable elements have cursor-pointer * ✓ Clear visual feedback on hover/click * ✓ Smooth transitions (150-300ms) * ✓ Keyboard navigation works perfectly ### Accessibility * ✓ Text contrast meets WCAG AA (4.5:1) * ✓ All images have descriptive alt text * ✓ Form inputs have proper labels * ✓ Respects prefers-reduced-motion ### Responsive * ✓ Works on mobile (320px+) * ✓ Tablet optimized (768px+) * ✓ Desktop perfect (1024px+) * ✓ No horizontal scroll on any device --- # Bypass Permissions - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) YOLO Mode --------- Configure Claude Code to run tools automatically without constant prompting. Power User Feature These settings allow Claude to execute commands on your machine without your explicit approval for every step. **Use with caution. You are placing significant trust in the AI.** 1 #### Fastest Way (Full Bypass) Add this to your project's local settings to allow **ALL** tools to run automatically. File: macOS Linux Windows `/.claude/settings.local.json` (project-local) { "permissions": { "defaultMode": "bypassPermissions" } } CRITICAL WARNING This gives the AI full autonomy. In rare cases, it could theoretically run destructive commands like `rm -rf ...` if it hallucinates or misinterprets a task. **Only use this in isolated environments or if you have good backups (git).** 2 #### Recommended Configuration (Safer Approach) Allow all commands by default, but block dangerous operations that could cause irreversible damage. File: macOS Linux Windows `/.claude/settings.local.json` (project-local) { "permissions": { "allow": [], "deny": [\ "Bash(rm ~/)",\ "Bash(rm /)",\ "Bash(prisma db push)",\ "Bash(npx prisma db push)",\ "Bash(npm run db:push)",\ "Bash(bun run db:push)",\ "Bash(pnpm run db:push)",\ "Bash(rm -rf /:*)",\ "Bash(rm -rf ~:*)",\ "Bash(sudo rm -rf :*::*)",\ "Bash(dd if=/dev/zero of=/dev/sd*:*)",\ "Bash(mkfs.:*::*)",\ "Bash(fdisk:*)",\ "Bash(parted:*)",\ "Bash(chown -R /:*)",\ "Bash(chmod -R 0 /:*)",\ "Bash(shutdown:*)",\ "Bash(reboot:*)",\ "Bash(systemctl poweroff:*)",\ "Bash(git reset --hard:*)",\ "Bash(git clean -fdx:*)",\ "Bash(git push --force:*)",\ "Bash(docker system prune -af:*)",\ "Bash(docker volume rm -f :*::*)",\ "Bash(prisma migrate reset:*)"\ ] } } This configuration uses wildcards to allow all Bash, Read, and Write operations, while the deny list blocks destructive commands like database drops, force pushes, and system modifications. Reference: [Additional Commands List](https://claude.ai/public/artifacts/0581ae4f-52f7-4c11-8944-de2b9b8a6d90) For comprehensive documentation on permission scopes and syntax, visit the [Official Claude Code Documentation](https://docs.anthropic.com/en/docs/claude-code/settings#permissions) --- # Fix Logs Guide - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Fix Logs Guide -------------- Master the art of debugging with /fix:logs Why /fix:logs? The `/fix:logs` command is your intelligent debugging assistant. It reads your error logs and automatically proposes fixes! How to use it right ------------------- 1 ### Pipe logs to file Redirect your application's output to a file named `logs.txt`. This allows the AI to read the errors. `npm run dev > logs.txt 2>&1` 2 ### Start Development Environment Run your application and reproduce the issue or error you are facing. Ensure the error logs are captured in `logs.txt`. 3 ### Analyze and Fix If there are errors, simply run the command: `/fix:logs` Analyzes logs.txt & fixes errors! --- # Claude Code Switch (CCS) - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) CCS - Claude Code Switch ------------------------ One command, zero downtime, multiple accounts Switch between Claude accounts, GLM, Kimi and more instantly. Stop hitting rate limits. Keep working continuously. ### The Problem You're deep in implementation. Context loaded. Solution crystallizing. Then: "You've reached your usage limit." Momentum gone. Context lost. Productivity crater. ### The Solution CCS enables parallel workflows instead of sequential switching: Run all simultaneously: # Terminal 1: Main work (Work Account) ccs work "implement authentication system" # Terminal 2: Side task (Personal Account) ccs personal "review PR #123" # Terminal 3: Cost-optimized task (GLM - 81% cheaper) ccs glm "add tests for all service files" All running simultaneously. No context switching. No downtime. 1 ### Installation Install CCS globally with npm: [Created by @kaitranntt](https://github.com/kaitranntt/ccs) $ npm install -g @kaitranntt/ccs \# Verify installation ccs --version 2 ### Quick Start #### Basic Usage `ccs` \# Claude subscription (default) `ccs glm` \# GLM (cost-optimized) `ccs kimi` \# Kimi (with thinking support) #### Multi-Account Setup Manage multiple accounts for OAuth providers like Gemini, Antigravity, and more: \# First account (default) ccs gemini --auth \# Add another account ccs gemini --auth --add \# Add with nickname for easy identification ccs gemini --auth --add --nickname work \# List all accounts ccs agy --accounts \# Switch to a different account ccs agy --use work Accounts are stored in ~/.ccs/cliproxy/accounts.json and can be managed via web dashboard. Run concurrently in separate terminals terminal-1 work $ ccs work "implement feature" terminal-2 personal $ ccs personal "review code" #### Sync Shared Data \# Sync latest delegation commands and skills from ClaudeKit to CCS: `ccs sync` 3 ### Core Features #### Model Switching `ccs` \# Claude `ccs agy` \# Antigravity `ccs glm` \# GLM-4.6 `ccs kimi` \# Kimi `ccs gemini` \# Gemini 2.5 Pro `ccs codex` \# GPT-5.1 Codex Max #### Slash Command Support Use slash commands inside delegated sessions: `ccs glm "/cook create landing page"` #### OAuth Authentication Zero-config auth for supported models: `ccs gemini` \# Interactive OAuth `ccs gemini --auth` \# Save tokens 4 ### Integration with ClaudeKit CCS works seamlessly with ClaudeKit commands. Use Claude for complex planning and GLM for simple execution: #### Recommended Workflow 1 \# Plan with Claude `ccs "/plan add payment integration"` 2 \# Implement with GLM (cost-optimized) `ccs glm "/cook implement Stripe payment flow"` 3 \# Test with GLM `ccs glm "/fix:test run payment tests"` 4 \# Review with Claude `ccs "/review check payment implementation"` ##### Use Claude for: * Complex planning * Architecture decisions * Code review ##### Use GLM for (81% cheaper): * Simple implementations * Testing & bug fixes * Documentation updates ##### Use Kimi for: * Long-context analysis * Codebase reviews * Multi-file refactoring 5 ### Provider Configuration Configure specific settings for each AI model provider to optimize your workflow. #### Antigravity Configuration Recommended Configure Antigravity to use specific Claude models through a simple interactive menu: `ccs agy --config` \[OK\] CLIProxy binary ready (0.5s) Antigravity Model Selection Note: Models marked \[DEPRECATED\] may be removed in future versions. Select model: 1\. Claude Sonnet 4.5 2\. Gemini 3 Pro \* 3. Claude Opus 4.5 Thinking 4\. Claude Sonnet 4.5 Thinking Enter choice \[1-4\] (default: 3): \_ **Pro Tip:** Claude Opus 4.5 Thinking is recommended for complex coding tasks that require deep reasoning. ##### Verify Model Selection After selecting a model, verify it by running a simple command: `ccs agy "What model are you using?"` Expected output showing your selected model: \> What model are you using? ⏺ I'm powered by Gemini Claude Opus 4.5 (model ID: gemini-claude-opus-4-5-thinking). ##### Logout from Antigravity Clear your Antigravity session: `ccs agy --logout` Expected output: \[OK\] Logged out from Antigravity ##### Multi-Account Management Manage and switch between multiple Antigravity accounts: \# First account (default) `ccs agy --auth` \# Add with nickname for easy identification `ccs agy --auth --add --nickname work` \# List all accounts `ccs agy --accounts` \# Switch to a different account `ccs agy --use work` \# Configure the selected account `ccs agy --config` #### Gemini Configuration Authenticate with Google OAuth to use Gemini models. ##### Step 1: Authenticate with Google `ccs gemini --auth` A browser window will open for Google OAuth authentication. Complete the login in your browser to connect your Google account. Expected output after successful authentication: \[OK\] CLIProxy binary ready (0.0s) \[i\] Opening browser for Google Gemini authentication... \[i\] Complete the login in your browser. \[OK\] Authenticated with Google Gemini (14.8s) \[OK\] Authentication successful ##### Step 2: Select Model (Optional) `ccs gemini --config` \[OK\] CLIProxy binary ready (0.0s) Configure Gemini Model Models marked \[Paid Tier\] require a paid Google account (not free tier). Select model: \* 1. Gemini 3 Pro \[Paid Tier\] 2\. Gemini 2.5 Pro Enter choice \[1-2\] (default: 1): \_ After selecting a model: \[OK\] Model set to: Gemini 3 Pro Config saved: ~/.ccs/gemini.settings.json ##### Verify Your Selection After configuration, verify the selected model: `ccs gemini "Which model are you using?"` \> Which model are you using? ⏺ I am currently using the gemini-3-pro-preview model. ##### Logout from Gemini Clear your Gemini session: `ccs gemini --logout` ##### Multi-Account Management Manage multiple Google accounts for Gemini: \# First account (default) `ccs gemini --auth` \# Add with nickname for easy identification `ccs gemini --auth --add --nickname work` \# List all accounts `ccs gemini --accounts` \# Switch to a different account `ccs gemini --use work` \# Configure the selected account `ccs gemini --config` #### Codex Configuration Authenticate with OpenAI OAuth. This provider requires a paid OpenAI account. Free tier accounts are not supported - you need to subscribe to OpenAI models. ##### Step 1: Authenticate `ccs codex --auth` A browser window will open for OpenAI authentication. Complete the login process in your browser. Expected output: \[OK\] CLIProxy binary ready (0.0s) \[i\] Opening browser for OpenAI authentication... \[i\] Complete the login in your browser. \[OK\] Authenticated with OpenAI (12.5s) \[OK\] Authentication successful ##### Step 2: Verify Your Setup After authentication, verify the setup: `ccs codex "Hello, which model are you using?"` \> Hello, which model are you using? ⏺ I'm running as GPT-5.1-Codex-Max-High (model ID: opus). ##### Logout from Codex Clear your Codex session: `ccs codex --logout` ##### Multi-Account Management Manage multiple OpenAI accounts for Codex: \# First account (default) `ccs codex --auth` \# Add another account `ccs codex --auth --add` \# Add with nickname for easy identification `ccs codex --auth --add --nickname work` \# List all accounts `ccs codex --accounts` Z #### GLM Configuration Z.AI 🚀 **New Update**: Z.AI has introduced GLM-4.6V (8 December 2025) - the latest and most advanced model! Check the official announcement: [https://z.ai/blog/glm-4.6v](https://z.ai/blog/glm-4.6v) Configure GLM-4.6 via API for cost-optimized development tasks. ##### Step 1: Create Settings File Open or create the GLM settings file: File: macOS Linux Windows `~/.ccs/glm.settings.json` Add the following content: { "alwaysThinkingEnabled": true, "env": { "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic", "ANTHROPIC_AUTH_TOKEN": "", "ANTHROPIC_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.6" } } ##### Step 2: Add Profile to Config Add the GLM profile to your CCS config file: File: macOS Linux Windows `~/.ccs/config.json` { "profiles": { "glm": "~/.ccs/glm.settings.json", <-- add this line "default": "~/.claude/settings.json" } } `ccs glm "Which model are you using?"` \> Which model are you using? ⏺ I'm using the GLM-4.6 model. If you see GLM-4.6 model in the response, the configuration works. Otherwise, recheck your settings file and API key. K #### Kimi Configuration Moonshot AI Configure Kimi K2 for long-context analysis and deep thinking tasks. ##### Step 1: Create Settings File Open or create the Kimi settings file: File: macOS Linux Windows `~/.ccs/kimi.settings.json` Add the following content: { "env": { "ANTHROPIC_BASE_URL": "https://api.kimi.com/coding/", "ANTHROPIC_AUTH_TOKEN": "", "ANTHROPIC_MODEL": "kimi-k2-thinking-turbo" }, "alwaysThinkingEnabled": true } ##### Step 2: Add Profile to Config Add the Kimi profile to your CCS config file: File: macOS Linux Windows `~/.ccs/config.json` { "profiles": { "kimi": "~/.ccs/kimi.settings.json", <-- add this line "default": "~/.claude/settings.json" } } ##### Step 3: Verify Configuration Test that Kimi is configured correctly: `ccs kimi "Which model are you using?"` \> Which model are you using? ⏺ I'm using the Kimi K2 Thinking Turbo model. If you see K2 model in the response, the configuration works. Otherwise, recheck your settings file and API key. 6 ### Web Dashboard New CCS features a modern React 19 dashboard with real-time updates for managing your profiles and monitoring account health. Modern UI Real-time Updates Profile Management Health Monitoring Dark Mode Responsive #### Launch Dashboard `ccs config` \# Open dashboard (auto-opens browser) `ccs config --port 3000` \# Specify custom port The dashboard will automatically open in your browser. If not, access it manually at http://localhost:PORT #### Dashboard Preview Light Mode ![CCS Dashboard - Light Mode](https://vividkit.dev/guides/ccs_dashboard_light.png) Dark Mode ![CCS Dashboard - Dark Mode](https://vividkit.dev/guides/ccs_dashboard_dark.png) ##### Account Management Accounts are stored locally and can be managed via the web dashboard. Add, edit, or remove profiles directly from the UI. File: macOS Linux Windows `~/.ccs/cliproxy/accounts.json` ### Troubleshooting #### OAuth Timeout `ccs gemini --auth --headless` #### Port Conflict `ccs doctor` \# Kill process using port 8317 `lsof -ti:8317 | xargs kill` #### Session Not Continuing `ccs glm:continue "next task"` #### Health Check `ccs doctor` ### Hot Deals Available! Get Claude Pro at 50% off ($10/month) and Z.AI Christmas deals with stacking discounts. Limited time offers to maximize your AI coding limits. [View Current Deals](https://vividkit.dev/guides/promotions) ### Resources [GitHub](https://github.com/kaitranntt/ccs) [Documentation](https://github.com/kaitranntt/ccs#readme) [Report Issues](https://github.com/kaitranntt/ccs/issues) [Troubleshooting](https://github.com/kaitranntt/ccs/blob/main/docs/en/troubleshooting.md) --- # Resume Sessions - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Resume External Sessions ------------------------ Continue your work from Claude Web/Desktop in [CCS](https://github.com/kaitranntt/ccs) using cheaper models like GLM or Antigravity. Why Resume Sessions? Sometimes you hit message limits on the official Claude interface, but you're in the middle of a complex task. With the **Resume** feature, you can transfer your session context to [CCS](https://github.com/kaitranntt/ccs) and finish the job using cost-effective models. ### How to Resume a Session 1 #### Find the Session ID Open your local Claude history file to find the ID of the session you want to resume. File: macOS Linux Windows `~/.claude/history.jsonl` $ cat ~/.claude/history.jsonl \# Scroll to the bottom to find your most recent session {"display":"/clear ","timestamp":1765163522956,"project":"...","sessionId":"74f292c0-49fa-41c0-a2d8-dd2c3ef9c4be"} 💡 **Tip:** Look for the `sessionId` field in the JSON object that contains your last prompt. 2 #### Resume in CCS Switch to a cheaper model (like GLM) in [CCS](https://github.com/kaitranntt/ccs) and use the `/resume` command. $ ccs glm \# Start CCS with GLM model \> /resume 74f292c0-49fa-41c0-a2d8-dd2c3ef9c4be \# All context messages from that session will be restored... 3 #### Continue Working Simply type "continue" to let the new model pick up exactly where Claude left off. \> continue GLM Model Based on the previous code, here is the implementation for the remaining components... #### Save 80%+ on Costs Switch from expensive Claude models to GLM or other providers for routine implementation steps. #### No Downtime Don't let message limits stop your flow. Resume immediately in a new environment. --- # Sửa Lỗi Từ Log - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) Hướng Dẫn Sửa Lỗi Qua Log ------------------------- Làm chủ nghệ thuật gỡ lỗi với /fix:logs Tại sao dùng /fix:logs? Lệnh `/fix:logs` là trợ lý gỡ lỗi thông minh của bạn. Nó đọc log lỗi và tự động đề xuất giải pháp sửa chữa! Sử dụng đúng cách ----------------- 1 ### Ghi log ra file Chuyển hướng đầu ra ứng dụng của bạn vào một file tên là `logs.txt`. Điều này cho phép AI đọc được các lỗi. `npm run dev > logs.txt 2>&1` 2 ### Khởi động Môi trường Phát triển Chạy ứng dụng của bạn và tái hiện vấn đề hoặc lỗi bạn đang gặp phải. Đảm bảo rằng log lỗi được ghi lại trong `logs.txt`. 3 ### Phân tích và Sửa chữa Nếu có lỗi xảy ra, chỉ cần chạy lệnh: `/fix:logs` Phân tích logs.txt & sửa lỗi! --- # Chuyển Đổi Tài Khoản - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) CCS - Claude Code Switch ------------------------ Một lệnh, không gián đoạn, nhiều tài khoản Chuyển đổi giữa các tài khoản Claude, GLM, Kimi và nhiều hơn nữa ngay lập tức. Không còn bị giới hạn. Làm việc liên tục. ### Vấn Đề Bạn đang làm việc chăm chỉ. Context đã được load. Giải pháp đang hình thành. Rồi đột nhiên: "Bạn đã đạt giới hạn sử dụng." Mất động lực. Mất context. Năng suất giảm sút. ### Giải Pháp CCS cho phép làm việc song song thay vì chuyển đổi tuần tự: Chạy tất cả cùng lúc: # Terminal 1: Công việc chính (Tài khoản Công việc) ccs work "implement authentication system" # Terminal 2: Tác vụ phụ (Tài khoản Cá nhân) ccs personal "review PR #123" # Terminal 3: Tác vụ tiết kiệm (GLM - rẻ hơn 81%) ccs glm "add tests for all service files" Tất cả chạy đồng thời. Không chuyển ngữ cảnh. Không gián đoạn. 1 ### Cài Đặt Cài đặt CCS toàn cục với npm: [Được tạo bởi @kaitranntt](https://github.com/kaitranntt/ccs) $ npm install -g @kaitranntt/ccs \# Kiểm tra cài đặt ccs --version 2 ### Bắt Đầu Nhanh #### Sử Dụng Cơ Bản `ccs` \# Claude subscription (mặc định) `ccs glm` \# GLM (tối ưu chi phí) `ccs kimi` \# Kimi (hỗ trợ thinking) #### Thiết Lập Đa Tài Khoản Quản lý nhiều tài khoản cho các nhà cung cấp OAuth như Gemini, Antigravity, và hơn thế nữa: \# Tài khoản đầu tiên (mặc định) ccs gemini --auth \# Thêm tài khoản khác ccs gemini --auth --add \# Thêm với nickname để dễ nhận dạng ccs gemini --auth --add --nickname work \# Liệt kê tất cả tài khoản ccs agy --accounts \# Chuyển sang tài khoản khác ccs agy --use work Tài khoản được lưu trữ trong ~/.ccs/cliproxy/accounts.json và có thể quản lý qua web dashboard. Chạy đồng thời trong các terminal riêng biệt terminal-1 work $ ccs work "implement feature" terminal-2 personal $ ccs personal "review code" #### Đồng Bộ Dữ Liệu Chia Sẻ \# Đồng bộ các cập nhật delegation commands và skills mới nhất từ ClaudeKit sang CCS: `ccs sync` 3 ### Tính Năng Chính #### Chuyển Đổi Mô Hình `ccs` \# Claude `ccs agy` \# Antigravity `ccs glm` \# GLM-4.6 `ccs kimi` \# Kimi `ccs gemini` \# Gemini 2.5 Pro `ccs codex` \# GPT-5.1 Codex Max #### Hỗ Trợ Slash Command Sử dụng slash commands trong các phiên ủy quyền: `ccs glm "/cook create landing page"` #### Xác Thực OAuth Xác thực không cần cấu hình cho các mô hình được hỗ trợ: `ccs gemini` \# OAuth tương tác `ccs gemini --auth` \# Lưu tokens 4 ### Tích Hợp với ClaudeKit CCS hoạt động mượt mà với các lệnh ClaudeKit. Dùng Claude cho việc lập kế hoạch phức tạp và GLM cho thực thi đơn giản: #### Quy Trình Đề Xuất 1 \# Lập kế hoạch với Claude `ccs "/plan add payment integration"` 2 \# Thực hiện với GLM (tiết kiệm chi phí) `ccs glm "/cook implement Stripe payment flow"` 3 \# Kiểm thử với GLM `ccs glm "/fix:test run payment tests"` 4 \# Đánh giá với Claude `ccs "/review check payment implementation"` ##### Dùng Claude cho: * Lập kế hoạch phức tạp * Quyết định kiến trúc * Đánh giá code ##### Dùng GLM (rẻ hơn 81%): * Triển khai đơn giản * Testing & sửa lỗi * Cập nhật tài liệu ##### Dùng Kimi cho: * Phân tích ngữ cảnh dài * Đánh giá codebase * Refactor đa file 5 ### Cấu Hình Nhà Cung Cấp Cấu hình các thiết lập cụ thể cho từng nhà cung cấp mô hình AI để tối ưu hóa quy trình làm việc của bạn. #### Cấu Hình Antigravity Khuyên dùng Cấu hình Antigravity để sử dụng các mô hình Claude cụ thể thông qua menu tương tác đơn giản: `ccs agy --config` \[OK\] CLIProxy binary ready (0.5s) Chọn Mô Hình Antigravity Lưu ý: Các mô hình được đánh dấu \[DEPRECATED\] có thể bị loại bỏ trong các phiên bản tương lai. Chọn mô hình: 1\. Claude Sonnet 4.5 2\. Gemini 3 Pro \* 3. Claude Opus 4.5 Thinking 4\. Claude Sonnet 4.5 Thinking Nhập lựa chọn \[1-4\] (default: 3): \_ **Mẹo Pro:** Claude Opus 4.5 Thinking được khuyên dùng cho các tác vụ code phức tạp đòi hỏi suy luận sâu. ##### Xác Nhận Model Đã Chọn Sau khi chọn model, xác nhận bằng lệnh đơn giản: `ccs agy "What model are you using?"` Output mong đợi hiển thị model đã chọn: \> What model are you using? ⏺ I'm powered by Gemini Claude Opus 4.5 (model ID: gemini-claude-opus-4-5-thinking). ##### Đăng Xuất khỏi Antigravity Xóa phiên Antigravity của bạn: `ccs agy --logout` Output mong đợi: \[OK\] Logged out from Antigravity ##### Quản Lý Nhiều Tài Khoản Quản lý và chuyển đổi giữa nhiều tài khoản Antigravity: \# Tài khoản đầu tiên (mặc định) `ccs agy --auth` \# Thêm với nickname để dễ nhận dạng `ccs agy --auth --add --nickname work` \# Liệt kê tất cả tài khoản `ccs agy --accounts` \# Chuyển sang tài khoản khác `ccs agy --use work` \# Cấu hình cho tài khoản đã chọn `ccs agy --config` #### Cấu Hình Gemini Xác thực bằng Google OAuth để sử dụng các model Gemini. ##### Bước 1: Xác thực với Google `ccs gemini --auth` Một cửa sổ trình duyệt sẽ mở để xác thực Google OAuth. Hoàn tất đăng nhập trong trình duyệt để kết nối tài khoản Google của bạn. Output mong đợi sau khi xác thực thành công: \[OK\] CLIProxy binary ready (0.0s) \[i\] Opening browser for Google Gemini authentication... \[i\] Complete the login in your browser. \[OK\] Authenticated with Google Gemini (14.8s) \[OK\] Authentication successful ##### Bước 2: Chọn Model (Tùy chọn) `ccs gemini --config` \[OK\] CLIProxy binary ready (0.0s) Cấu Hình Gemini Model Các model có đánh dấu \[Paid Tier\] yêu cầu tài khoản Google trả phí (không phải gói miễn phí). Chọn mô hình: \* 1. Gemini 3 Pro \[Paid Tier\] 2\. Gemini 2.5 Pro Nhập lựa chọn \[1-2\] (default: 1): \_ Sau khi chọn model: \[OK\] Model set to: Gemini 3 Pro Config saved: ~/.ccs/gemini.settings.json ##### Xác Minh Lựa Chọn Sau khi cấu hình, xác minh model đã chọn: `ccs gemini "Which model are you using?"` \> Which model are you using? ⏺ I am currently using the gemini-3-pro-preview model. ##### Đăng Xuất khỏi Gemini Xóa phiên Gemini của bạn: `ccs gemini --logout` ##### Quản Lý Nhiều Tài Khoản Quản lý nhiều tài khoản Google cho Gemini: \# Tài khoản đầu tiên (mặc định) `ccs gemini --auth` \# Thêm với nickname để dễ nhận dạng `ccs gemini --auth --add --nickname work` \# Liệt kê tất cả tài khoản `ccs gemini --accounts` \# Chuyển sang tài khoản khác `ccs gemini --use work` \# Cấu hình cho tài khoản đã chọn `ccs gemini --config` #### Cấu Hình Codex Xác thực bằng OpenAI OAuth. Provider này yêu cầu tài khoản OpenAI trả phí. Tài khoản miễn phí không được hỗ trợ - bạn cần đăng ký các model của OpenAI. ##### Bước 1: Xác Thực `ccs codex --auth` Một cửa sổ trình duyệt sẽ mở để xác thực OpenAI. Hoàn tất quá trình đăng nhập trong trình duyệt của bạn. Kết quả mong đợi: \[OK\] CLIProxy binary ready (0.0s) \[i\] Opening browser for OpenAI authentication... \[i\] Complete the login in your browser. \[OK\] Authenticated with OpenAI (12.5s) \[OK\] Authentication successful ##### Bước 2: Xác Minh Cài Đặt Sau khi xác thực, xác minh cài đặt: `ccs codex "Hello, which model are you using?"` \> Hello, which model are you using? ⏺ I'm running as GPT-5.1-Codex-Max-High (model ID: opus). ##### Đăng Xuất khỏi Codex Xóa phiên Codex của bạn: `ccs codex --logout` ##### Quản Lý Nhiều Tài Khoản Quản lý nhiều tài khoản OpenAI cho Codex: \# Tài khoản đầu tiên (mặc định) `ccs codex --auth` \# Thêm tài khoản khác `ccs codex --auth --add` \# Thêm với nickname để dễ nhận dạng `ccs codex --auth --add --nickname work` \# Liệt kê tất cả tài khoản `ccs codex --accounts` Z #### Cấu Hình GLM Z.AI 🚀 **Cập Nhật Mới**: Z.AI đã giới thiệu GLM-4.6V (8 tháng 12 năm 2025) - model mới nhất và tiên tiến nhất! Xem thông báo chính thức: [https://z.ai/blog/glm-4.6v](https://z.ai/blog/glm-4.6v) Cấu hình GLM-4.6 qua API cho các tác vụ phát triển tối ưu chi phí. ##### Bước 1: Tạo File Cài Đặt Mở hoặc tạo file cài đặt GLM: File: macOS Linux Windows `~/.ccs/glm.settings.json` Thêm nội dung sau: { "alwaysThinkingEnabled": true, "env": { "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic", "ANTHROPIC_AUTH_TOKEN": "", "ANTHROPIC_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.6", "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.6" } } ##### Bước 2: Thêm Profile vào Config Thêm profile GLM vào file cấu hình CCS của bạn: File: macOS Linux Windows `~/.ccs/config.json` { "profiles": { "glm": "~/.ccs/glm.settings.json", <-- thêm dòng này "default": "~/.claude/settings.json" } } `ccs glm "Which model are you using?"` \> Which model are you using? ⏺ I'm using the GLM-4.6 model. Nếu bạn thấy model GLM-4.6 trong phản hồi, cấu hình đã hoạt động. Nếu không, hãy kiểm tra lại file cài đặt và API key của bạn. K #### Cấu Hình Kimi Moonshot AI Cấu hình Kimi K2 cho phân tích ngữ cảnh dài và tác vụ suy luận sâu. ##### Bước 1: Tạo File Cài Đặt Mở hoặc tạo file cài đặt Kimi: File: macOS Linux Windows `~/.ccs/kimi.settings.json` Thêm nội dung sau: { "env": { "ANTHROPIC_BASE_URL": "https://api.kimi.com/coding/", "ANTHROPIC_AUTH_TOKEN": "", "ANTHROPIC_MODEL": "kimi-k2-thinking-turbo" }, "alwaysThinkingEnabled": true } ##### Bước 2: Thêm Profile vào Config Thêm profile Kimi vào file cấu hình CCS của bạn: File: macOS Linux Windows `~/.ccs/config.json` { "profiles": { "kimi": "~/.ccs/kimi.settings.json", <-- thêm dòng này "default": "~/.claude/settings.json" } } ##### Bước 3: Xác Minh Cấu Hình Kiểm tra Kimi đã được cấu hình đúng: `ccs kimi "Which model are you using?"` \> Which model are you using? ⏺ I'm using the Kimi K2 Thinking Turbo model. Nếu bạn thấy model K2 trong phản hồi, cấu hình đã hoạt động. Nếu không, hãy kiểm tra lại file cài đặt và API key. 6 ### Web Dashboard Mới CCS tích hợp dashboard React 19 hiện đại với cập nhật real-time để quản lý profiles và theo dõi tình trạng tài khoản. Giao diện đẹp Cập nhật Real-time Quản lý Profile Theo dõi sức khỏe Dark Mode Responsive #### Khởi chạy Dashboard `ccs config` \# Mở dashboard (tự mở trình duyệt) `ccs config --port 3000` \# Chỉ định port tùy chỉnh Dashboard sẽ tự động mở trong trình duyệt. Nếu không, truy cập thủ công tại http://localhost:PORT #### Xem trước Dashboard Chế độ sáng ![CCS Dashboard - Light Mode](https://vividkit.dev/guides/ccs_dashboard_light.png) Chế độ tối ![CCS Dashboard - Dark Mode](https://vividkit.dev/guides/ccs_dashboard_dark.png) ##### Quản lý tài khoản Các tài khoản được lưu trữ cục bộ và có thể quản lý qua web dashboard. Thêm, sửa hoặc xóa profiles trực tiếp từ giao diện. File: macOS Linux Windows `~/.ccs/cliproxy/accounts.json` ### Khắc Phục Sự Cố #### OAuth Timeout `ccs gemini --auth --headless` #### Xung Đột Port `ccs doctor` \# Tắt process đang dùng port 8317 `lsof -ti:8317 | xargs kill` #### Phiên Không Tiếp Tục `ccs glm:continue "next task"` #### Kiểm Tra Sức Khỏe `ccs doctor` ### Deal Hot Đang Có! Claude Pro giảm 50% ($10/tháng) và Z.AI deal Giáng sinh với nhiều ưu đãi chồng. Khuyến mãi có hạn để tối đa giới hạn AI coding. [Xem Các Deal](https://vividkit.dev/vi/guides/promotions) ### Tài Nguyên [GitHub](https://github.com/kaitranntt/ccs) [Tài Liệu](https://github.com/kaitranntt/ccs#readme) [Báo Lỗi](https://github.com/kaitranntt/ccs/issues) [Khắc Phục](https://github.com/kaitranntt/ccs/blob/main/docs/en/troubleshooting.md) --- # Chế Độ YOLO - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) Chế Độ YOLO ----------- Cấu hình Claude Code để chạy công cụ tự động mà không cần nhắc nhở liên tục. Tính Năng Cho Power User Các cài đặt này cho phép Claude thực thi lệnh trên máy của bạn mà không cần sự chấp thuận rõ ràng của bạn cho mỗi bước. **Sử dụng cẩn thận. Bạn đang đặt niềm tin lớn vào AI.** 1 #### Cách Nhanh Nhất (Full Bypass) Thêm dòng này vào cài đặt cục bộ của dự án để cho phép **TẤT CẢ** công cụ chạy tự động. File: macOS Linux Windows `/.claude/settings.local.json` (project-local) { "permissions": { "defaultMode": "bypassPermissions" } } CẢNH BÁO Điều này trao cho AI quyền tự chủ hoàn toàn. Trong trường hợp hiếm hoi, nó có thể chạy các lệnh phá hủy như `rm -rf ...` nếu nó bị ảo giác hoặc hiểu sai tác vụ. **Chỉ làm điều này trong các môi trường cô lập hoặc nếu bạn có bản sao lưu tốt (git).** 2 #### Cấu Hình Được Đề Xuất (Cách An Toàn Hơn) Cho phép tất cả lệnh theo mặc định, nhưng chặn các thao tác nguy hiểm có thể gây thiệt hại không thể khôi phục. File: macOS Linux Windows `/.claude/settings.local.json` (project-local) { "permissions": { "allow": [], "deny": [\ "Bash(rm ~/)",\ "Bash(rm /)",\ "Bash(prisma db push)",\ "Bash(npx prisma db push)",\ "Bash(npm run db:push)",\ "Bash(bun run db:push)",\ "Bash(pnpm run db:push)",\ "Bash(rm -rf /:*)",\ "Bash(rm -rf ~:*)",\ "Bash(sudo rm -rf :*::*)",\ "Bash(dd if=/dev/zero of=/dev/sd*:*)",\ "Bash(mkfs.:*::*)",\ "Bash(fdisk:*)",\ "Bash(parted:*)",\ "Bash(chown -R /:*)",\ "Bash(chmod -R 0 /:*)",\ "Bash(shutdown:*)",\ "Bash(reboot:*)",\ "Bash(systemctl poweroff:*)",\ "Bash(git reset --hard:*)",\ "Bash(git clean -fdx:*)",\ "Bash(git push --force:*)",\ "Bash(docker system prune -af:*)",\ "Bash(docker volume rm -f :*::*)",\ "Bash(prisma migrate reset:*)"\ ] } } Cấu hình này sử dụng wildcard để cho phép tất cả thao tác Bash, Read và Write, trong khi danh sách deny chặn các lệnh phá hủy như xóa database, force push và thay đổi hệ thống. Tham khảo: [Danh Sách Lệnh Bổ Sung](https://claude.ai/public/artifacts/0581ae4f-52f7-4c11-8944-de2b9b8a6d90) Để xem tài liệu đầy đủ về phạm vi quyền và cú pháp, hãy truy cập [Tài liệu Chính thức của Claude Code](https://docs.anthropic.com/en/docs/claude-code/settings#permissions) --- # Tiếp Tục Phiên - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://vividkit.dev/vi/guides/permissions) [Custom Hooks](https://vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://vividkit.dev/vi/guides/promotions) Khôi Phục Phiên Làm Việc Bên Ngoài ---------------------------------- Tiếp tục công việc của bạn từ Claude Web/Desktop trong [CCS](https://github.com/kaitranntt/ccs) sử dụng các mô hình rẻ hơn như GLM hoặc Antigravity. Tại Sao Cần Khôi Phục Phiên? Đôi khi bạn chạm giới hạn tin nhắn trên giao diện Claude chính thức, nhưng bạn đang ở giữa một tác vụ phức tạp. Với tính năng **Resume**, bạn có thể chuyển ngữ cảnh phiên làm việc của mình sang [CCS](https://github.com/kaitranntt/ccs) và hoàn thành công việc bằng các mô hình hiệu quả về chi phí. ### Cách Khôi Phục Một Phiên 1 #### Tìm ID Phiên (Session ID) Mở file lịch sử Claude cục bộ của bạn để tìm ID của phiên bạn muốn khôi phục. File: macOS Linux Windows `~/.claude/history.jsonl` $ cat ~/.claude/history.jsonl \# Cuộn xuống dưới cùng để tìm phiên gần đây nhất của bạn {"display":"/clear ","timestamp":1765163522956,"project":"...","sessionId":"74f292c0-49fa-41c0-a2d8-dd2c3ef9c4be"} 💡 **Mẹo:** Tìm trường `sessionId` trong đối tượng JSON chứa prompt cuối cùng của bạn. 2 #### Khôi Phục Trong CCS Chuyển sang một mô hình rẻ hơn (như GLM) trong [CCS](https://github.com/kaitranntt/ccs) và sử dụng lệnh `/resume`. $ ccs glm \# Khởi động CCS với mô hình GLM \> /resume 74f292c0-49fa-41c0-a2d8-dd2c3ef9c4be \# Tất cả ngữ cảnh tin nhắn từ phiên đó sẽ được khôi phục... 3 #### Tiếp Tục Làm Việc Đơn giản chỉ cần gõ "continue" để mô hình mới tiếp tục chính xác nơi Claude đã dừng lại. \> continue GLM Model Dựa trên code trước đó, đây là phần triển khai cho các component còn lại... #### Tiết Kiệm 80%+ Chi Phí Chuyển từ các mô hình Claude đắt đỏ sang GLM hoặc các nhà cung cấp khác cho các bước triển khai thông thường. #### Không Thời Gian Chết Đừng để giới hạn tin nhắn ngăn chặn dòng chảy của bạn. Khôi phục ngay lập tức trong môi trường mới. --- # What is ClaudeKit? - VividKit Documentation | VividKit [What is ClaudeKit?](https://www.vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://www.vividkit.dev/guides/cli) [Accounts Switcher](https://www.vividkit.dev/guides/ccs) [Workflows](https://www.vividkit.dev/guides/workflows) [Decision Tree](https://www.vividkit.dev/guides/flowchart) [Commands Reference](https://www.vividkit.dev/guides/commands) [UI/UX Guide](https://www.vividkit.dev/guides/uiux) [Resume Guide](https://www.vividkit.dev/guides/resume) [Fix Logs Guide](https://www.vividkit.dev/guides/fix-logs) [YOLO Mode](https://www.vividkit.dev/guides/permissions) [Custom Hooks](https://www.vividkit.dev/guides/hooks) [Promotions](https://www.vividkit.dev/guides/promotions) What is ClaudeKit? ------------------ A simple guide for everyone — non-technical users, beginners, and anyone curious about ClaudeKit! What is ClaudeKit? **ClaudeKit** is like giving Claude (the AI assistant) a **super-powered toolbox**. It transforms Claude from a basic chatbot into a **professional coding assistant** that can do many specialized tasks automatically. ### Think of it like this: Imagine you're building a house. Instead of hiring one general worker who knows a bit of everything, ClaudeKit gives you access to: An **architect** (for planning) An **interior designer** (for making things beautiful) A **builder** (for actual construction) A **quality inspector** (for checking everything works) A **maintenance expert** (for fixes) ### The Construction Team Metaphor ClaudeKit works like a **smart project manager** that coordinates a team of specialists: ![ClaudeKit Construction Team Metaphor](https://www.vividkit.dev/guides/claudekit-team-metaphor.png) **Key Idea:** _"You just say what you want to build. ClaudeKit brings the right experts automatically."_ ### The 5 Building Blocks of ClaudeKit ClaudeKit is built around **5 main pillars**: Agents Specialized Team Members Commands Easy Shortcuts Skills Pre-built Knowledge Workflows Step-by-Step Recipes Hooks Smart Automation ![ClaudeKit 5 Pillars](https://www.vividkit.dev/guides/claudekit-5-pillars.png) ### How ClaudeKit Processes Your Request Here's what happens when you use ClaudeKit: 1 You type a simple command 2 ClaudeKit understands your request 3 Multiple agents work together 4 You get your completed project! ![ClaudeKit Workflow](https://www.vividkit.dev/guides/claudekit-workflow.png) ### Before vs After: Life Without and With ClaudeKit WITHOUT ClaudeKit WITH ClaudeKit Write detailed instructions every time Just type /plan or /fix Remember all best practices yourself Built-in skills handle it automatically Do everything step by step manually Automated workflows do the work Start from scratch each project Reusable templates and patterns One general AI for everything Team of experts for each task ![ClaudeKit Before vs After Comparison](https://www.vividkit.dev/guides/claudekit-comparison.png) ### Quick Start: Common Commands You'll Love [View All Commands](https://www.vividkit.dev/guides/workflows) #### For Beginners `/ask` Get answers to any question `/brainstorm` Explore ideas together `/fix` Fix errors automatically #### For Building Things `/plan` Create step-by-step plans `/code` Implement your plans `/cook` All-in-one feature builder #### For Git & Documentation `/git:cm` Smart commit messages `/git:pr` Create pull requests `/docs:update` Update documentation ### Summary ClaudeKit = Claude + Superpowers It's a system that makes Claude smarter and more organized by giving it: Agents Commands Skills Workflows Hooks Important: ClaudeKit is a paid product that does NOT include AI models. You need to purchase ClaudeKit separately AND subscribe to Claude (from Anthropic) to power the AI capabilities. [Get ClaudeKit (20% OFF)](https://claudekit.cc/?ref=OMG49S8R) Ready to Get Started? After purchasing ClaudeKit, you can set up and install it via the CLI tool. Our detailed guide walks you through every step. [View CLI Installation Guide](https://www.vividkit.dev/guides/cli) --- # Hướng Dẫn CLI - VividKit - Visual Interface cho ClaudeKit | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) Hướng Dẫn ClaudeKit CLI ----------------------- Cài đặt ClaudeKit, chạy lệnh claude, và sử dụng các skill AI mạnh mẽ từ terminal của bạn! ClaudeKit CLI là gì? ClaudeKit CLI giúp bạn thiết lập ClaudeKit trong các dự án, sau đó bạn sử dụng Claude Code để nhận trợ giúp AI. Cài đặt ClaudeKit, chạy claude, và tận hưởng các skill mạnh mẽ như UI/UX Pro Max — tất cả từ terminal của bạn! Quy trình làm việc nhanh $ ck init \# Thiết lập ClaudeKit trong dự án của bạn $ claude \# Bắt đầu Claude Code CLI → Sau đó chat với AI để xây dựng UI đẹp mắt ngay lập tức! 🎨 Lưu ý: ClaudeKit CLI là công cụ miễn phí giúp cài đặt các kit. Engineer Kit và Marketing Kit là sản phẩm trả phí cần mua riêng. [Mua ClaudeKit (Giảm 20%)](https://claudekit.cc/?ref=OMG49S8R) Giao diện trong Terminal của bạn -------------------------------- Đây chính xác là những gì bạn sẽ thấy khi sử dụng ClaudeKit CLI Terminal — bash — 80×24 ➜ ~/projects claude Đang khởi động Claude Code CLI... Nhập tin nhắn của bạn (hoặc /help để xem lệnh) You: Using ui-ux-pro-max skill, tạo một landing page cho studio yoga ClaudeKit AI đang suy nghĩ... ✓ Đang tìm kiếm domain sản phẩm: làm đẹp/sức khỏe ✓ Style guide: tối giản + thanh lịch ✓ Typography: Playfair Display + Inter ✓ Bảng màu: pastel nhẹ nhàng (#E8E5F2) ✓ Thiết Kế Hoàn Tất! Đã tạo: yoga-studio-landing.html \- Bảng màu hoa oải hương êm dịu \- Typography Playfair Display thanh lịch \- Thiết kế ưu tiên mobile responsive \- Tuân thủ WCAG AA Các file được tạo trong thư mục hiện tại ➜ ~/projects ls -la drwxr-xr-x 5 user staff 160 Dec 3 15:20 . drwxr-xr-x 12 user staff 384 Dec 3 15:15 .. \-rw-r--r-- 1 user staff 8420 Dec 3 15:20 yoga-studio-landing.html ➜ ~/projects open yoga-studio-landing.html Đang mở trong trình duyệt mặc định... → Bạn đang ở trong Claude Code CLI. Cứ tiếp tục chat! You: Using ui-ux-pro-max skill, làm cho các nút nổi bật hơn với hiệu ứng hover AI: Tôi sẽ cải thiện kiểu dáng nút với: • Hiệu ứng chuyển đổi mượt mà (200ms) • Hiệu ứng phóng to (hover:scale-105) • Đổ bóng khi hover • Chỉ báo con trỏ rõ ràng ✓ Đã cập nhật yoga-studio-landing.html ➜ ~/projects ▊ 1 ### Thiết Lập Dự Án `ck init` Khởi tạo ClaudeKit trong dự án của bạn (thiết lập một lần) 2 ### Bắt Đầu Claude Code `claude` Mở trợ lý AI tương tác - chat và lặp lại 3 ### Sử Dụng Skill `Using ui-ux-pro-max skill...` Bên trong Claude, kích hoạt trí tuệ thiết kế mạnh mẽ Hướng Dẫn Bắt Đầu Nhanh ----------------------- Khởi động ClaudeKit CLI trong 3 bước đơn giản 1 ### Cài Đặt ClaudeKit CLI Cài đặt công cụ ClaudeKit CLI toàn cục: $ npm install -g claudekit-cli \# hoặc với bun bun add -g claudekit-cli \# Kiểm tra cài đặt ck --version 2 ### Khởi Tạo ClaudeKit trong Dự Án của Bạn Điều hướng đến dự án của bạn và thiết lập ClaudeKit: $ cd ~/projects/my-project ck init \# Chế độ tương tác - làm theo hướng dẫn \# Tạo thư mục .claude/ chứa các file ClaudeKit 💡 Chọn Cách Thiết Lập: Khi chạy `ck init`, bạn sẽ thấy hai tùy chọn: * **Global (Khuyên dùng):** Cài đặt cho tài khoản người dùng của bạn. Hoạt động mọi nơi. * **Local:** Chỉ cài đặt cho thư mục dự án cụ thể này. Chọn "Global" thường là dễ nhất! ⚙️ Yêu Cầu Xác Thực: ClaudeKit yêu cầu xác thực GitHub CLI để tải xuống bộ kit ClaudeKit Engineer. `gh auth login` \# Xác thực trước khi ck init 📝 Lưu ý: Personal Access Tokens (PAT) không còn được hỗ trợ 3 ### Bắt Đầu Claude Code & Tạo Dự Án! Khởi động Claude Code CLI và trò chuyện với AI: $ claude \# Khởi động Claude Code CLI tương tác Đang khởi động Claude Code CLI... You: Using ui-ux-pro-max skill, tạo một landing page cho quán cà phê của tôi Vậy đó! AI sẽ tìm kiếm cơ sở dữ liệu thiết kế và tạo code đẹp mắt cho bạn. Thói Quen Hàng Ngày ------------------- 💡 Mẹo chuyên nghiệp: Chạy các lệnh này trước khi bắt đầu công việc để đảm bảo bạn luôn có các khả năng thông minh mới nhất. ### 1 Cập Nhật Công Cụ CLI $ ck update Đảm bảo `claudekit-cli` của bạn có các tính năng và bản sửa lỗi mới nhất. ### 2 Cập Nhật Engineer Kit $ ck init --kit engineer Hoặc qua cờ global: $ ck init -g --kit engineer Cập nhật bộ kit `engineer` để lấy các prompt và khả năng AI mới nhất. CÔNG CỤ MẠNH MẼ CCS - Claude Code Switch ------------------------ Cần chuyển đổi giữa tài khoản công việc/cá nhân hoặc sử dụng các mô hình rẻ hơn như Gemini/GLM? CCS là một công cụ wrapper mạnh mẽ cho Claude Code giúp bạn tiết kiệm tiền và hợp lý hóa quy trình làm việc. Tiết kiệm ~80% chi phí Đa tài khoản Ủy quyền nhanh [Xem Hướng Dẫn CCS](https://www.vividkit.dev/vi/guides/ccs) ### Mẹo Chuyên Nghiệp cho Người Dùng CLI Nâng Cao Sử Dụng Dấu Ngoặc Kép cho Yêu Cầu Nhiều Từ Luôn bọc yêu cầu của bạn trong dấu ngoặc kép: "yêu cầu của bạn ở đây" Chế Độ Tương Tác = Tốt Hơn cho Việc Lặp Lại Sử dụng `ccs` không có đối số để tinh chỉnh qua lại Tham Chiếu File với @ Sử dụng `@tên_file` để cho AI biết những file nào cần sửa đổi Luôn Sử Dụng "Using ui-ux-pro-max skill" Điều này kích hoạt hệ thống thiết kế thông minh để có kết quả chuyên nghiệp --- # ClaudeKit CLI Guide - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) ClaudeKit CLI Guide ------------------- Install ClaudeKit, run `claude`, and leverage powerful AI skills from your terminal! What is ClaudeKit CLI? **ClaudeKit CLI** helps you set up ClaudeKit in your projects, then you use **Claude Code** to get AI assistance. Install ClaudeKit, run `claude`, and leverage powerful skills like UI/UX Pro Max — all from your terminal! Quick Workflow $ ck init \# Set up ClaudeKit in your project $ claude \# Start Claude Code CLI → Then chat with AI to build beautiful UIs instantly! 🎨 Note: ClaudeKit CLI is a free tool that helps install kits. The Engineer Kit and Marketing Kit are paid products that you need to purchase separately. [Get ClaudeKit (20% OFF)](https://claudekit.cc/?ref=OMG49S8R) What It Looks Like in Your Terminal ----------------------------------- Here's exactly what you'll see when using ClaudeKit CLI Terminal — bash — 80×24 ➜ ~/projects claude Starting Claude Code CLI... Type your message (or /help for commands) You: Using ui-ux-pro-max skill, create a yoga studio landing page ClaudeKit AI is thinking... ✓ Searching product domain: beauty/wellness ✓ Style guide: minimalist + elegant ✓ Typography: Playfair Display + Inter ✓ Color palette: soft pastels (#E8E5F2) ✓ Design Complete! Created: yoga-studio-landing.html \- Calming lavender color palette \- Elegant Playfair Display typography \- Responsive mobile-first design \- WCAG AA accessible Files created in current directory ➜ ~/projects ls -la drwxr-xr-x 5 user staff 160 Dec 3 15:20 . drwxr-xr-x 12 user staff 384 Dec 3 15:15 .. \-rw-r--r-- 1 user staff 8420 Dec 3 15:20 yoga-studio-landing.html ➜ ~/projects open yoga-studio-landing.html Opening in default browser... → You're already in Claude Code CLI. Just keep chatting! You: Using ui-ux-pro-max skill, make the buttons more prominent with hover effects AI: I'll enhance the button styles with: • Smooth hover transitions (200ms) • Scale effect (hover:scale-105) • Shadow elevation on hover • Clear cursor-pointer indication ✓ Updated yoga-studio-landing.html ➜ ~/projects ▊ 1 ### Setup Project `ck init` Initialize ClaudeKit in your project (one-time setup) 2 ### Start Claude Code `claude` Open interactive AI assistant - chat and iterate 3 ### Use Skills `Using ui-ux-pro-max skill...` Inside Claude, activate powerful design intelligence Quick Start Guide ----------------- Get ClaudeKit CLI running in 3 easy steps 1 ### Install ClaudeKit CLI Install the ClaudeKit CLI tool globally: $ npm install -g claudekit-cli \# or with bun bun add -g claudekit-cli \# Verify installation ck --version 2 ### Initialize ClaudeKit in Your Project Navigate to your project and set up ClaudeKit: $ cd ~/projects/my-project ck init \# Interactive mode - follow the prompts \# This creates .claude/ directory with ClaudeKit files 💡 Choose Your Setup: When running `ck init`, you'll see two options: * **Global (Recommended):** Installs for your user account. Works everywhere. * **Local:** Installs just for this specific project folder. Choosing "Global" is usually easiest! ⚙️ Authentication Required: ClaudeKit requires GitHub CLI authentication to download ClaudeKit Engineer kit. `gh auth login` \# Authenticate before ck init 📝 Note: Personal Access Tokens (PAT) are no longer supported 3 ### Start Claude Code & Create! Launch Claude Code CLI and chat with AI: $ claude \# Starts interactive Claude Code CLI Starting Claude Code CLI... You: Using ui-ux-pro-max skill, create a landing page for my coffee shop That's it! AI will search design databases and create beautiful code for you. Best Practice: Daily Routine ---------------------------- 💡 Pro Tip: Run these commands before starting your work to ensure you always have the latest intelligent capabilities. ### 1 Update CLI Tool $ ck update Ensures your `claudekit-cli` has the latest features and bug fixes. ### 2 Update Engineer Kit $ ck init --kit engineer Or via global flag: $ ck init -g --kit engineer Updates the `engineer` kit to fetch the latest AI prompts and capabilities. POWER TOOL CCS - Claude Code Switch ------------------------ Need to switch between work/personal accounts or use cheaper models like Gemini/GLM? CCS is a powerful wrapper for Claude Code that saves you money and streamlines your workflow. Save ~80% costs Multi-account Fast delegation [View CCS Guide](https://vividkit.dev/guides/ccs) ### Pro Tips for CLI Power Users Use Quotes for Multi-word Requests Always wrap your requests in double quotes: "your request here" Interactive Mode = Better Iteration Use `ccs` without arguments for back-and-forth refinement Reference Files with @ Use `@filename` to tell AI which files to modify Always Use "Using ui-ux-pro-max skill" This activates the design intelligence system for professional results --- # Khuyến Mãi & Ưu Đãi AI - VividKit Documentation | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) Khuyến Mãi & Ưu Đãi AI ---------------------- Tiết kiệm chi phí, tối đa giới hạn AI Chúng tôi tổng hợp các deal và khuyến mãi tốt nhất từ các nhà cung cấp AI. Đăng ký thông minh, code nhiều hơn, trả ít hơn. Lưu Ý Về Ngân Sách Hướng dẫn này được tối ưu cho các developer có ngân sách hạn chế nhưng muốn tối đa hóa giới hạn coding AI. Nếu ngân sách không phải là vấn đề, chúng tôi khuyên bạn nên nâng cấp lên Claude Max Plan (5x, 20x), Team Plan, hoặc Enterprise Plan để có giới hạn cao hơn. ### Tại Sao Nên Xem Các Deal Này? Giới Hạn Gây Khó Chịu Chỉ với một tài khoản Pro, bạn sẽ gặp rate limit giữa chừng và mất mạch làm việc (flow). Không gì giết chết năng suất bằng việc phải chờ reset limit trong khi context trong đầu dần biến mất. Đăng Ký Thông Minh Chớp các deal giới hạn thời gian để có quyền truy cập AI cao cấp với giá ưu đãi. Kết hợp CCS để chuyển provider khi một cái hết limit. ### Pro Tip: Dùng CCS Để Chuyển Provider Với CCS (Claude Code Switch), bạn có thể chuyển tức thì giữa Claude, GLM, Kimi, Gemini và hơn thế. Khi một dịch vụ hết limit, chỉ cần chuyển sang dịch vụ khác! [Tìm hiểu về CCS](https://www.vividkit.dev/vi/guides/ccs) ### Khuyến Mãi Hiện Có Claude Pro HOT Giảm 50% cho 3 tháng đầu ($10/tháng thay vì $20) • [claude.ai/purpose](http://claude.ai/purpose) • [claude.ai/alex](https://claude.ai/alex) • [claude.ai/will](http://claude.ai/will) • [claude.ai/mac](http://claude.ai/mac) • [claude.ai/jade](http://claude.ai/jade) • [claude.ai/acquired](https://claude.ai/acquired) Z Z.AI GLM Giáng sinh 2025: 50% lần đầu mua + giảm thêm 10-20% + 10% thưởng giới thiệu • [z.ai/subscribe (referral)](https://z.ai/subscribe?ic=NEYH1LGAKE) \* Giá khuyến mãi chỉ áp dụng cho tài khoản mới ### Tối Đa Hóa Tiết Kiệm #### Dùng CCS để chuyển đổi nhà cung cấp Tối đa hóa giới hạn sử dụng bằng cách chuyển đổi giữa Claude, GLM, Kimi, và các nhà cung cấp khác sử dụng CCS. [Tìm hiểu thêm](https://www.vividkit.dev/vi/guides/ccs) #### Cộng dồn nhiều ưu đãi Deal Giáng sinh Z.AI cộng dồn: 50% lần đầu + thêm 10-20% + 10% giới thiệu = tiết kiệm cực lớn! #### Sử dụng link đăng ký khuyến mãi Claude Pro có các link đăng ký đặc biệt giúp bạn chỉ phải trả $10/tháng trong 3 tháng đầu. #### Tận dụng các gói miễn phí trước Bắt đầu với các gói miễn phí trên từng nền tảng trước khi đăng ký trả phí. Nhiều nơi cung cấp lượng dùng miễn phí hào phóng. --- # AI Promotions & Deals - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) AI Promotions & Deals --------------------- Save money, maximize your AI coding limits We curate the best deals and promotions from AI providers. Subscribe smart, code more, pay less. Budget Note This guide is optimized for developers with a limited budget who want to maximize their AI coding limits. If budget isn't an issue, we recommend upgrading to Claude Max Plan (5x, 20x), Team Plan, or Enterprise Plan for higher limits. ### Why Check These Deals? Usage Limits Hurt With just one Pro account, you'll hit rate limits mid-task and lose your flow. Nothing kills productivity like waiting for limits to reset while your mental context fades. Subscribe Smart Grab these limited-time deals to get premium AI access at discount prices. Stack with CCS to switch providers when one hits limits. ### Pro Tip: Use CCS to Switch Providers With CCS (Claude Code Switch), you can instantly switch between Claude, GLM, Kimi, Gemini, and more. When one service hits limits, just switch to another! [Learn about CCS](https://vividkit.dev/guides/ccs) ### Current Promotions Claude Pro HOT 50% off for the first 3 months ($10/month instead of $20) • [claude.ai/purpose](http://claude.ai/purpose) • [claude.ai/alex](https://claude.ai/alex) • [claude.ai/will](http://claude.ai/will) • [claude.ai/mac](http://claude.ai/mac) • [claude.ai/jade](http://claude.ai/jade) • [claude.ai/acquired](https://claude.ai/acquired) Z Z.AI GLM Christmas 2025: 50% first-purchase + extra 10-20% off + 10% referral bonus • [z.ai/subscribe (referral)](https://z.ai/subscribe?ic=NEYH1LGAKE) \* Promotional prices only available for new accounts ### Maximize Your Savings #### Use CCS to switch between providers Maximize your usage limits by switching between Claude, GLM, Kimi, and other providers using CCS. [Learn more](https://vividkit.dev/guides/ccs) #### Stack multiple discounts Z.AI Christmas deal stacks: 50% first purchase + extra 10-20% + 10% referral = massive savings! #### Use promotion signup links Claude Pro has special signup links that give you $10/month for the first 3 months. #### Maximize free tiers first Start with free tiers on each platform before subscribing. Many offer generous free usage. --- # Custom Hooks - VividKit Documentation | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) Custom Hooks ------------ Tùy chỉnh workflow vibe coding với hooks cho Claude Code. Tự động notifications, actions, và integrations. Custom Hooks là gì? Claude Code hooks là shell commands chạy khi có events như tool calls, session start, hoặc agent completion. Hooks nằm trong `~/.claude/settings.json` và có thể tự động hóa workflow của bạn. ### Các Custom Hooks [#### Discord Notification\ \ Nhận thông báo trên Discord khi Claude cần bạn trong các session multi-phase.\ \ productivity notifications](https://www.vividkit.dev/vi/guides/hooks/discord-notification) Thêm hooks sắp ra mắt... Slack notifications, Telegram alerts, auto-commit, và nhiều hơn! Tìm hiểu thêm các built-in hooks của ClaudeKit tại [ClaudeKit Documentation](https://docs.claudekit.cc/docs/configuration/hooks#built-in-hooks) --- # Custom Hooks - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Custom Hooks ------------ Customize your vibe coding workflow with powerful hooks for Claude Code. Automate notifications, actions, and integrations. What are Custom Hooks? Claude Code hooks are shell commands that execute in response to events like tool calls, session start, or agent completion. These hooks live in `~/.claude/settings.json` and can automate your workflow. ### Available Custom Hooks [#### Discord Notification\ \ Get notified on Discord when Claude needs your attention during multi-phase sessions.\ \ productivity notifications](https://vividkit.dev/guides/hooks/discord-notification) More hooks coming soon... Slack notifications, Telegram alerts, auto-commit, and more! Learn more about ClaudeKit built-in hooks at [ClaudeKit Documentation](https://docs.claudekit.cc/docs/configuration/hooks#built-in-hooks) --- # Decision Tree - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) ClaudeKit Command Workflow Guide -------------------------------- A comprehensive decision tree for ClaudeKit newcomers. If you're ever unsure, just type `/ck-help` for interactive assistance! ### Interactive Decision Tree Click on any node or path to highlight the route to that command. Or click the command buttons above to see their corresponding paths. `/bootstrap` `/docs:init` `/scout` `/cook` `/plan` `/code @plan.md` `/brainstorm` `/debug` `/fix` `/git:cm` `/git:cp` `/git:pr` `/docs:*` `/design:*` `/ck-help` `/ask` `/coding-level` 50% Hide List No Yes No Ready Yes Speed Safety Approve No Yes Found CK Tech Learn 🎯 What do you want? New project? Join existing? Build feature? Fix something? Git ops? Docs/Design? Need help? Has docs? Know what? Know issue? What type? Speed/Safety? /bootstrap /docs:init /scout /brainstorm /cook /plan /code @plan.md /debug /fix /git:cm /git:cp /git:pr /docs:\* /design:\* /ck-help /ask /coding-level ### Command Reference Select to trace path `/bootstrap` Start New Project Full project initialization: git, tech stack, planning, design, implementation `/docs:init` Join Undocumented Project Analyze existing codebase and create documentation `/scout` Explore Documented Project Fast parallel codebase search to find relevant files `/cook` Fast Implementation All-in-one: research → plan → implement → test → review (speed focus) `/plan` Safe Planning Plan → Refine & Approve → /clear → /code: detailed review & refine before coding (safety focus) `/code @plan.md` Execute Plan Execute an approved plan step by step `/brainstorm` Brainstorm Ideas Ideation when you don't know what to build (then → /plan → /code) `/debug` Debug Issue Analyze → Find root cause (when you don't know what's wrong) `/fix` Fix Known Issue Intelligent router to specialized fix commands (when you know the issue) `/git:cm` Commit Only Stage all and commit (no push) - safe for experimentation `/git:cp` Commit & Push Stage, commit, and push - ready to share changes `/git:pr` Pull Request Create pull request for code review `/docs:*` Documentation Documentation commands: init, summarize, update `/design:*` Design Commands Design commands: describe, screenshot, video, fast, good `/ck-help` ClaudeKit Help General ClaudeKit documentation and command help `/ask` Architectural Advice Technical and architectural consultation from expert `/coding-level` Learning Mode Slow down explanations for learning and understanding Click on any node or edge to highlight a path. Click commands above to see their paths. ### New Project Setup | Command | Description | When to Use | | --- | --- | --- | | `/bootstrap` | Full project initialization with research, tech stack, planning, design, implementation | Starting a brand new project from scratch | | `/docs:init` | Analyze existing codebase and create documentation | Joining an existing project or setting up docs | **Tip:** New Project Flow: /bootstrap → automatically handles everything including Git initialization, tech stack research, wireframes, and initial implementation. ### Feature Building #### Don't Know What You Want Yet | Command | Description | When to Use | | --- | --- | --- | | `/brainstorm` | Collaborative ideation with expert advice | Exploring ideas, validating approaches, getting pros/cons | **Important:** /brainstorm DOES NOT implement - it only advises. After brainstorming, use /plan or /cook to implement. #### Know What You Want | Command | Description | When to Use | | --- | --- | --- | | `/cook` | ⚡⚡⚡ All-in-one: research → plan → implement → test → review | **FAST mode** - Quick iterations, simpler features | | `/plan` | Create detailed implementation plan without coding | **SAFE mode** - Complex features, need approval first | | `/code @plan.md` | Execute an existing plan step by step | After /plan is approved | **Key Difference:** • `/cook` = Speed-focused, plans internally, goes straight to implementation • `/plan` → `/code` = Safety-focused, creates reviewable plan first ### Fixing Issues #### Diagnostic First | Command | Description | When to Use | | --- | --- | --- | | `/debug` | Analyze and find root cause | Don't know what's wrong | | `/fix` | Intelligent router to specialized fix commands | Know the issue, want quick fix | #### Specialized Fix Commands | Command | Description | When to Use | | --- | --- | --- | | `/fix:types` | Fix TypeScript/type errors | tsc errors, type mismatches | | `/fix:ui` | Fix UI/UX issues | Layout, styling, component bugs | | `/fix:ci` | Fix CI/CD pipeline issues | GitHub Actions, deployment failures | | `/fix:test` | Fix failing tests | Jest, Vitest test failures | | `/fix:logs` | Analyze error logs | Stack traces, runtime errors | | `/fix:fast` | Quick fix for simple issues | Single file, straightforward bugs | | `/fix:hard` | Complex multi-component fixes | Architecture, refactoring issues | | `/fix:parallel` | Fix multiple independent issues | 2+ unrelated bugs at once | **Smart Routing:** Just use /fix and it will automatically route to the right specialized command! ### Git Operations | Command | Description | When to Use | | --- | --- | --- | | `/git:cm` | Stage all + commit (no push) | Save work locally | | `/git:cp` | Stage + commit + push | Ready to share changes | | `/git:merge` | Merge branches | Combine feature branch to main | | `/git:pr` | Create pull request | Request code review | ### Documentation | Command | Description | When to Use | | --- | --- | --- | | `/docs:init` | Create initial project documentation | New/undocumented project | | `/docs:summarize` | Summarize codebase changes | After major changes | | `/docs:update` | Update existing documentation | Keep docs in sync | ### Exploration & Research | Command | Description | When to Use | | --- | --- | --- | | `/scout` | Fast parallel codebase search | Find relevant files for a task | | `/scout:ext` | Extended search with Gemini 2M context | Deep codebase exploration | | `/watzup` | Review recent changes in current branch | Wrap up work, understand recent commits | ### Questions & Learning | Command | Description | When to Use | | --- | --- | --- | | `/ask` | Technical & architectural consultation | Need expert advice on architecture, trade-offs | | `/coding-level [0-5]` | Set explanation depth | Tailor Claude's responses to your experience | **Coding Levels:** • `0` = ELI5 (zero coding experience) • `1` = Junior (0-2 years) • `2` = Mid-Level (3-5 years) • `3` = Senior (5-8 years) • `4` = Tech Lead (8-10 years) • `5` = God Mode (default, maximum efficiency) ### Project Management | Command | Description | When to Use | | --- | --- | --- | | `/kanban` | Visual dashboard for plans | View plan progress, timeline visualization | | `/preview` | Universal markdown/directory viewer | View plans, docs in readable format | | `/test` | Run tests and analyze results | Verify code changes work | ### Design Commands | Command | Description | When to Use | | --- | --- | --- | | `/design:describe` | Describe design from image | Understand existing UI designs | | `/design:screenshot` | Take screenshot of UI | Capture current state | | `/design:video` | Record video of UI flow | Document interactions | | `/design:3d` | Generate 3D assets | Create 3D visuals | | `/design:fast` | Quick design iteration | Fast UI prototyping | | `/design:good` | High-quality design | Premium UI work | ### Code Review | Command | Description | When to Use | | --- | --- | --- | | `/review:codebase` | Comprehensive codebase review | Quality assessment, find issues | ### Planning Variations | Command | Description | When to Use | | --- | --- | --- | | `/plan` | Auto-detect complexity | General planning | | `/plan:fast` | Quick planning for simple tasks | Small features, quick fixes | | `/plan:hard` | Deep planning with extensive research | Complex, multi-phase features | | `/plan:parallel` | Plan multiple independent tasks | Several unrelated features | | `/plan:validate` | Validate and review existing plan | Before execution | | `/plan:archive` | Archive completed plan | Clean up finished work | ### Common Workflows #### Workflow 1: Building a New Feature (Safe) 1\. `/brainstorm` → Explore options 2\. `/plan` → Review plan 3\. `/clear` or `/compact` 4\. `/code @plan.md` → Implementation 5\. `/git:cp` → Push 6\. `/git:pr` → PR #### Workflow 2: Building a Feature (Fast) 1\. `/cook` → Research → Plan → Implement → Test → Review 2\. `/git:cp` → Commit and push when approved #### Workflow 3: Debugging & Fixing 1\. `/debug` → Find root cause 2\. `/fix` → Smart routing 3\. `/git:cm` → Commit fix locally #### Workflow 4: New Project Setup 1\. `/bootstrap` → Full setup 2\. Follow onboarding instructions #### Workflow 5: Joining Existing Project 1\. `/docs:init` → Analyze codebase, create docs 2\. `/scout` → Explore codebase structure ### Pro Tips **Speed vs Safety Trade-off:** • Use /cook when you're confident and want speed • Use /plan → /code when precision and review matter **Never mix these workflows:** • ❌ `/plan` → `/cook` (cook has its own planning) • ✅ `/plan` → `/code` (correct flow) • ✅ `/cook` standalone (has internal planning) **Git safety:** • `/git:cm` = commit only (safe for experimentation) • `/git:cp` = commits AND pushes (can't undo easily) ### Command Complexity Ratings | Rating | Meaning | Example Commands | | --- | --- | --- | | ⚡ | Simple, quick | `/debug`, `/test` | | ⚡⚡ | Moderate | `/brainstorm`, `/fix`, `/scout` | | ⚡⚡⚡ | Complex, thorough | `/cook`, `/code`, `/plan` | | ⚡⚡⚡⚡ | Extended workflow | `/docs:init` | | ⚡⚡⚡⚡⚡ | Full project scope | `/bootstrap` | ### Summary Cheat Sheet | Scenario | Command | | --- | --- | | "I need to build something new from scratch" | `/bootstrap` | | "I have an idea but not sure how to approach it" | `/brainstorm` | | "I know exactly what I want, do it fast" | `/cook` | | "I want to plan carefully before coding" | `/plan → /code` | | "Something's broken, I don't know why" | `/debug → /fix` | | "Something's broken, I know what it is" | `/fix` | | "I need to save my work" | `/git:cm` or `/git:cp` | | "I need to understand this codebase" | `/docs:init` | | "I need architectural advice" | `/ask` | | "What changed recently?" | `/watzup` | | "View my plans visually" | `/kanban` or `/preview` | | "I'm new, slow down explanations" | `/coding-level 1` | | "I need help with ClaudeKit" | `/ck-help` | Not Sure? Use /ck-help `/ck-help` → Full documentation `/ck-help fix` → Category guide for fix commands `/ck-help plan:hard` → Details on specific command `/ck-help how to debug` → Task-based recommendations --- # Flowchart Quyết Định - VividKit Documentation | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) ClaudeKit Command Workflow Guide -------------------------------- Hướng dẫn toàn diện để chọn command phù hợp dựa trên use case của bạn. Nếu không chắc chắn, gõ `/ck-help` để được hỗ trợ! ### Sơ Đồ Quyết Định Tương Tác Click vào bất kỳ node hoặc đường path nào để highlight lộ trình đến command. Hoặc click vào các command button ở trên để xem đường đi tương ứng. `/bootstrap` `/docs:init` `/scout` `/cook` `/plan` `/code @plan.md` `/brainstorm` `/debug` `/fix` `/git:cm` `/git:cp` `/git:pr` `/docs:*` `/design:*` `/ck-help` `/ask` `/coding-level` 50% Hide List No Yes No Ready Yes Speed Safety Approve No Yes Found CK Tech Learn 🎯 What do you want? New project? Join existing? Build feature? Fix something? Git ops? Docs/Design? Need help? Has docs? Know what? Know issue? What type? Speed/Safety? /bootstrap /docs:init /scout /brainstorm /cook /plan /code @plan.md /debug /fix /git:cm /git:cp /git:pr /docs:\* /design:\* /ck-help /ask /coding-level ### Danh sách Commands Chọn để xem đường dẫn `/bootstrap` Start New Project Full project initialization: git, tech stack, planning, design, implementation `/docs:init` Join Undocumented Project Analyze existing codebase and create documentation `/scout` Explore Documented Project Fast parallel codebase search to find relevant files `/cook` Fast Implementation All-in-one: research → plan → implement → test → review (speed focus) `/plan` Safe Planning Plan → Refine & Approve → /clear → /code: detailed review & refine before coding (safety focus) `/code @plan.md` Execute Plan Execute an approved plan step by step `/brainstorm` Brainstorm Ideas Ideation when you don't know what to build (then → /plan → /code) `/debug` Debug Issue Analyze → Find root cause (when you don't know what's wrong) `/fix` Fix Known Issue Intelligent router to specialized fix commands (when you know the issue) `/git:cm` Commit Only Stage all and commit (no push) - safe for experimentation `/git:cp` Commit & Push Stage, commit, and push - ready to share changes `/git:pr` Pull Request Create pull request for code review `/docs:*` Documentation Documentation commands: init, summarize, update `/design:*` Design Commands Design commands: describe, screenshot, video, fast, good `/ck-help` ClaudeKit Help General ClaudeKit documentation and command help `/ask` Architectural Advice Technical and architectural consultation from expert `/coding-level` Learning Mode Slow down explanations for learning and understanding Click vào nút hoặc đường path để highlight lộ trình. Click vào command ở trên để xem path. ### Khởi Tạo Dự Án Mới | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/bootstrap` | Khởi tạo dự án đầy đủ với research, tech stack, planning, design, implementation | Bắt đầu dự án hoàn toàn mới | | `/docs:init` | Phân tích codebase và tạo documentation | Tham gia dự án có sẵn hoặc setup docs | **Mẹo:** New Project Flow: /bootstrap → tự động xử lý mọi thứ bao gồm Git init, tech stack research, wireframes và initial implementation. ### Xây Dựng Feature #### Chưa biết muốn gì | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/brainstorm` | Ideation với lời khuyên chuyên gia | Khám phá ý tưởng, validate approaches, xem pros/cons | **Quan trọng:** /brainstorm KHÔNG implement - chỉ tư vấn. Sau khi brainstorm, dùng /plan hoặc /cook để implement. #### Biết muốn gì | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/cook` | ⚡⚡⚡ All-in-one: research → plan → implement → test → review | **FAST mode** - Quick iterations, features đơn giản | | `/plan` | Tạo plan chi tiết không code | **SAFE mode** - Features phức tạp, cần approval trước | | `/code @plan.md` | Execute plan có sẵn từng bước | Sau khi /plan được approved | **Sự khác biệt chính:** • `/cook` = Tốc độ, plan nội bộ, straight to implementation • `/plan` → `/code` = An toàn, tạo plan có thể review trước ### Sửa Lỗi #### Chẩn đoán trước | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/debug` | Phân tích và tìm root cause | Không biết lỗi gì | | `/fix` | Router thông minh tới các fix commands chuyên biệt | Biết issue, muốn fix nhanh | #### Fix Commands chuyên biệt | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/fix:types` | Fix TypeScript/type errors | tsc errors, type mismatches | | `/fix:ui` | Fix UI/UX issues | Layout, styling, component bugs | | `/fix:ci` | Fix CI/CD pipeline issues | GitHub Actions, deployment failures | | `/fix:test` | Fix failing tests | Jest, Vitest test failures | | `/fix:logs` | Phân tích error logs | Stack traces, runtime errors | | `/fix:fast` | Quick fix cho issues đơn giản | Single file, straightforward bugs | | `/fix:hard` | Complex multi-component fixes | Architecture, refactoring issues | | `/fix:parallel` | Fix nhiều issues độc lập | 2+ unrelated bugs at once | **Smart Routing:** Chỉ cần dùng /fix và nó sẽ tự động route tới command chuyên biệt phù hợp! ### Git Operations | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/git:cm` | Stage all + commit (không push) | Lưu work locally | | `/git:cp` | Stage + commit + push | Sẵn sàng share changes | | `/git:merge` | Merge branches | Combine feature branch to main | | `/git:pr` | Tạo pull request | Request code review | ### Documentation | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/docs:init` | Tạo documentation ban đầu cho dự án | Dự án mới/chưa có docs | | `/docs:summarize` | Tóm tắt các thay đổi codebase | Sau major changes | | `/docs:update` | Cập nhật documentation hiện có | Giữ docs đồng bộ | ### Khám phá & Nghiên cứu | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/scout` | Tìm kiếm codebase song song nhanh | Tìm files liên quan cho task | | `/scout:ext` | Tìm kiếm mở rộng với Gemini 2M context | Khám phá codebase sâu | | `/watzup` | Review các thay đổi gần đây trong branch hiện tại | Wrap up work, hiểu recent commits | ### Hỏi đáp & Học tập | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/ask` | Tư vấn kỹ thuật & kiến trúc | Cần advice về architecture, trade-offs | | `/coding-level [0-5]` | Đặt độ sâu giải thích | Tùy chỉnh responses theo experience | **Coding Levels:** • `0` = ELI5 (không biết code) • `1` = Junior (0-2 năm) • `2` = Mid-Level (3-5 năm) • `3` = Senior (5-8 năm) • `4` = Tech Lead (8-10 năm) • `5` = God Mode (mặc định, hiệu quả tối đa) ### Quản lý dự án | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/kanban` | Dashboard trực quan cho plans | Xem tiến độ plan, timeline visualization | | `/preview` | Universal markdown/directory viewer | Xem plans, docs dễ đọc | | `/test` | Chạy tests và phân tích kết quả | Verify code changes work | ### Design Commands | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/design:describe` | Mô tả design từ image | Hiểu UI designs có sẵn | | `/design:screenshot` | Chụp screenshot của UI | Capture trạng thái hiện tại | | `/design:video` | Quay video UI flow | Document interactions | | `/design:3d` | Tạo 3D assets | Tạo visuals 3D | | `/design:fast` | Quick design iteration | Fast UI prototyping | | `/design:good` | High-quality design | Premium UI work | ### Code Review | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/review:codebase` | Comprehensive codebase review | Quality assessment, tìm issues | ### Các biến thể Planning | Command | Mô tả | Khi nào dùng | | --- | --- | --- | | `/plan` | Auto-detect complexity | Planning chung | | `/plan:fast` | Quick planning cho tasks đơn giản | Small features, quick fixes | | `/plan:hard` | Deep planning với extensive research | Complex, multi-phase features | | `/plan:parallel` | Plan nhiều tasks độc lập | Nhiều features không liên quan | | `/plan:validate` | Validate và review plan có sẵn | Trước khi execution | | `/plan:archive` | Archive plan đã hoàn thành | Clean up finished work | ### Common Workflows #### Workflow 1: Build Feature (Safe) 1\. `/brainstorm` → Khám phá options 2\. `/plan` → Review plan 3\. `/clear` hoặc `/compact` 4\. `/code @plan.md` → Implement 5\. `/git:cp` → Push 6\. `/git:pr` → PR #### Workflow 2: Build Feature (Fast) 1\. `/cook` → Research → Plan → Implement → Test → Review 2\. `/git:cp` → Commit và push khi approved #### Workflow 3: Debugging & Fixing 1\. `/debug` → Tìm root cause 2\. `/fix` → Smart routing 3\. `/git:cm` → Commit fix locally #### Workflow 4: New Project Setup 1\. `/bootstrap` → Full setup 2\. Follow onboarding #### Workflow 5: Tham gia dự án 1\. `/docs:init` → Analyze codebase 2\. `/scout` → Explore structure ### Pro Tips **Speed vs Safety Trade-off:** • Dùng /cook khi confident và muốn speed • Dùng /plan → /code khi precision và review quan trọng **Không mix workflows:** • ❌ `/plan` → `/cook` (cook có planning riêng) • ✅ `/plan` → `/code` (flow đúng) • ✅ `/cook` standalone (có internal planning) **Git safety:** • `/git:cm` = commit only (safe cho experimentation) • `/git:cp` = commits VÀ pushes (không thể undo dễ dàng) ### Độ phức tạp Commands | Rating | Ý nghĩa | Ví dụ Commands | | --- | --- | --- | | ⚡ | Simple, quick | `/debug`, `/test` | | ⚡⚡ | Moderate | `/brainstorm`, `/fix`, `/scout` | | ⚡⚡⚡ | Complex, thorough | `/cook`, `/code`, `/plan` | | ⚡⚡⚡⚡ | Extended workflow | `/docs:init` | | ⚡⚡⚡⚡⚡ | Full project scope | `/bootstrap` | ### Cheat Sheet Tóm tắt | Tình huống | Command | | --- | --- | | Build something mới hoàn toàn | `/bootstrap` | | Có ý tưởng nhưng chưa biết approach | `/brainstorm` | | Biết chính xác muốn gì, làm nhanh | `/cook` | | Muốn plan kỹ trước khi code | `/plan → /code` | | Có lỗi, không biết tại sao | `/debug → /fix` | | Có lỗi, biết nguyên nhân | `/fix` | | Cần lưu work | `/git:cm` hoặc `/git:cp` | | Cần hiểu codebase | `/docs:init` | | Cần advice kiến trúc | `/ask` | | Có gì thay đổi gần đây? | `/watzup` | | Xem plans trực quan | `/kanban` hoặc `/preview` | | Mình mới học, giải thích dùng từ ngữ dễ hiểu chút nhé | `/coding-level 1` | | Cần help với ClaudeKit | `/ck-help` | Không chắc? Dùng /ck-help `/ck-help` → Full documentation `/ck-help fix` → Category guide cho fix commands `/ck-help plan:hard` → Chi tiết specific command `/ck-help how to debug` → Task-based recommendations --- # Thông Báo Discord cho Claude Code - VividKit Documentation | VividKit [Giới Thiệu ClaudeKit](https://www.vividkit.dev/vi/guides/what-is-claudekit) [Hướng Dẫn CLI](https://www.vividkit.dev/vi/guides/cli) [Chuyển Đổi Tài Khoản](https://www.vividkit.dev/vi/guides/ccs) [Quy Trình Làm Việc](https://www.vividkit.dev/vi/guides/workflows) [Sơ Đồ Quyết Định](https://www.vividkit.dev/vi/guides/flowchart) [Tham Khảo Lệnh](https://www.vividkit.dev/vi/guides/commands) [Thiết Kế UI/UX](https://www.vividkit.dev/vi/guides/uiux) [Tiếp Tục Phiên](https://www.vividkit.dev/vi/guides/resume) [Sửa Lỗi Từ Log](https://www.vividkit.dev/vi/guides/fix-logs) [Chế Độ YOLO](https://www.vividkit.dev/vi/guides/permissions) [Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) [Khuyến Mãi](https://www.vividkit.dev/vi/guides/promotions) Thông Báo Discord Khi Phase Hoàn Thành -------------------------------------- Nhận thông báo trên Discord khi hoàn thành phase hoặc cần bạn approve > Bạn bắt đầu một session Claude Code nhiều phase. Phase 1 chạy. Bạn đi pha cà phê. Check Slack. Bị kéo vào họp. Hai tiếng sau quay lại. Claude đã xong Phase 1 từ 8 phút đầu và ngồi chờ bạn approve từ đó tới giờ. ### Vấn Đề * • Session Claude Code dài với plan nhiều phase cần user approve giữa các phase * • Không có notification tích hợp nên Claude chờ trong im lặng * • Chuyển đổi ngữ cảnh làm giảm năng suất - hoặc bạn phải ngồi canh Claude code xong phase rồi approve, hoặc bạn đi làm việc khác rồi quên quay lại bắt nó chờ bạn approve hoài * → **Giải pháp:** custom hook ping bạn trên Discord khi Claude cần attention ### Giải Pháp Tạo một custom hook để: * Detect phase complete, approval request, và finalization bằng pattern matching * Gửi Discord notification để bạn yên tâm làm việc khác * Cross-platform (macOS, Linux, Windows) dùng Node.js `https` module * Đặt trong `~/.claude/custom/hooks/` nên không bị mất khi update ClaudeKit * Chỉ kích hoạt khi có từ khóa quan trọng (không spam mỗi lần stop) ### Detection Patterns | Loại | Emoji | Màu | Trigger Phrases | | --- | --- | --- | --- | | /plan Complete | 📋 | `#3498db` | "ExitPlanMode", "exiting plan mode" | | /code Step 5 | ⏸ | `#f1c40f` | "⏸ Step 5", "WAITING for user approval" | | /code Phase Complete | ✅ | `#2ecc71` | "✓ Step 6: Finalize", "Git committed", "Phase workflow finished" | ### Các Bước Setup 1 #### Tạo Discord Webhook 1. Mở Discord và vào server của bạn 2. Right-click a channel → Edit Channel → Integrations → Webhooks → New Webhook 3. Đặt tên webhook tuỳ ý (ví dụ: "Claude Code") 4. Copy webhook URL (giữ bí mật, đừng cho người khác biết!) 2 #### Tạo Thư Mục Custom Hooks macOS / Linux: mkdir -p ~/.claude/custom/hooks Windows (PowerShell) New-Item -ItemType Directory -Force -Path $env:USERPROFILE\.claude\custom\hooks Thư mục `custom/` không bị ClaudeKit update đè, hooks của bạn sẽ được giữ mỗi khi CK update. 3 #### Tạo Notification Script Tạo file: `~/.claude/custom/hooks/discord-phase-notify.cjs` #!/usr/bin/env node /** * Discord Phase Notification Hook (Minimal Version) * * Only notifies on high-signal events: * 1. /plan command - ExitPlanMode when planning phase completes * 2. /code command - Step 5 blocking gate waiting for user approval * 3. /code command - Step 6 finalize when phase workflow finishes * * Location: ~/.claude/custom/hooks/ (survives CK updates) * Events: Stop (main session only, not SubagentStop to reduce noise) */ const fs = require('fs'); const path = require('path'); const https = require('https'); const os = require('os'); // Strict detection patterns - only high-signal events const PATTERNS = { // /plan command: Plan ready for approval (ExitPlanMode tool called) planReady: [\ /ExitPlanMode/,\ /exiting\s+plan\s+mode/i,\ ], // /code command: Step 5 blocking gate - waiting for user approval codeApproval: [\ /⏸\s*Step\s*5/,\ /Step\s*5.*WAITING.*user\s*approval/i,\ /WAITING\s+for\s+user\s+approval/i,\ ], // /code command: Step 6 finalize - phase workflow finished codeFinalize: [\ /✓\s*Step\s*6.*Finalize/,\ /Step\s*6.*Git\s*committed/i,\ /Phase\s+workflow\s+finished/i,\ ], }; // Load environment variables (project scope first, then global) function loadEnv() { const cwd = process.cwd(); const envPaths = [\ // Project scope first\ path.join(cwd, '.claude', '.env'),\ path.join(cwd, '.claude', 'hooks', '.env'),\ // Global scope fallback\ path.join(os.homedir(), '.claude', 'custom', 'hooks', '.env'),\ path.join(os.homedir(), '.claude', 'hooks', '.env'),\ path.join(os.homedir(), '.claude', '.env'),\ ]; for (const envPath of envPaths) { if (fs.existsSync(envPath)) { const content = fs.readFileSync(envPath, 'utf-8'); content.split('\n').forEach(line => { const match = line.match(/^([^=]+)=(.*)$/); if (match && !process.env[match[1]]) { process.env[match[1]] = match[2].replace(/^["']|["']$/g, ''); } }); } } } // Send Discord notification (cross-platform using native https) function sendDiscord(title, message, color = 5763719) { return new Promise((resolve) => { const webhookUrl = process.env.DISCORD_WEBHOOK_URL; if (!webhookUrl) { console.error('DISCORD_WEBHOOK_URL not set - skipping notification'); resolve(false); return; } const cwd = process.cwd(); const project = path.basename(cwd); const timestamp = new Date().toISOString(); const localTime = new Date().toLocaleTimeString('en-US', { hour12: false }); const payload = JSON.stringify({ embeds: [{\ title,\ description: message,\ color,\ timestamp,\ footer: { text: `${project} • ${cwd}` },\ fields: [\ { name: '⏰ Time', value: localTime, inline: true },\ { name: '📂 Project', value: project, inline: true },\ ],\ }], }); try { const url = new URL(webhookUrl); const options = { hostname: url.hostname, port: 443, path: url.pathname, method: 'POST', headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(payload), }, timeout: 10000, }; const req = https.request(options, (res) => { resolve(res.statusCode >= 200 && res.statusCode < 300); }); req.on('error', (e) => { console.error(`Discord notification failed: ${e.message}`); resolve(false); }); req.on('timeout', () => { req.destroy(); console.error('Discord notification timed out'); resolve(false); }); req.write(payload); req.end(); } catch (e) { console.error(`Discord notification failed: ${e.message}`); resolve(false); } }); } // Detect notification type from text - strict matching function detectType(text) { if (!text) return null; // /plan command: ExitPlanMode (plan ready for review) for (const pattern of PATTERNS.planReady) { if (pattern.test(text)) { return { type: 'planReady', title: '📋 /plan Complete', color: 3447003 }; // Blue } } // /code command: Step 6 finalize (phase workflow finished) - check before Step 5 for (const pattern of PATTERNS.codeFinalize) { if (pattern.test(text)) { return { type: 'codeFinalize', title: '✅ /code Phase Complete', color: 5763719 }; // Green } } // /code command: Step 5 blocking gate for (const pattern of PATTERNS.codeApproval) { if (pattern.test(text)) { return { type: 'codeApproval', title: '⏸ /code Step 5: Approval Needed', color: 15844367 }; // Yellow } } return null; } // Extract relevant context from payload function extractContext(payload) { const parts = []; if (payload.stop_reason) { parts.push(payload.stop_reason.slice(0, 300)); } return parts.join('\n') || 'Claude needs your attention'; } // Main execution async function main() { try { loadEnv(); const stdin = fs.readFileSync(0, 'utf-8').trim(); if (!stdin) process.exit(0); const payload = JSON.parse(stdin); const textParts = [\ payload.stop_reason,\ payload.result,\ payload.output,\ payload.message,\ ].filter(Boolean); if (payload.transcript_path && fs.existsSync(payload.transcript_path)) { try { const transcript = fs.readFileSync(payload.transcript_path, 'utf-8'); textParts.push(transcript.slice(-3000)); } catch (e) { // Ignore } } const fullText = textParts.join(' '); const detection = detectType(fullText); if (detection) { const context = extractContext(payload); const sent = await sendDiscord(detection.title, context, detection.color); if (sent) { console.log(`Discord: ${detection.title}`); } } process.exit(0); } catch (error) { console.error(`Hook error: ${error.message}`); process.exit(0); } } main(); Chmod (macOS/Linux): chmod +x ~/.claude/custom/hooks/discord-phase-notify.cjs Windows Save the script to `%USERPROFILE%\.claude\custom\hooks\discord-phase-notify.cjs` **Note:** Windows không cần chmod - Node.js script chạy trực tiếp. 4 #### Config Claude Code Hooks Thêm vào `~/.claude/settings.json`: { "hooks": { "Stop": [\ {\ "hooks": [\ {\ "type": "command",\ "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs"\ }\ ]\ }\ ] } } **Windows:** Thay `$HOME` bằng full path như `C:\Users\YourName\.claude\custom\hooks\discord-phase-notify.cjs` 5 #### Set Webhook URL Thêm vào `~/.claude/.env`: DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/YOUR_ID/YOUR_TOKEN 6 #### Test 📋 ##### /plan Complete Trigger khi /plan command hoàn thành (ExitPlanMode): macOS / Linux: echo '{"stop_reason": "ExitPlanMode - plan is ready for your review"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "ExitPlanMode - plan is ready for your review"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs ⏸ ##### /code Step 5 Trigger khi /code command đến Step 5 blocking gate: macOS / Linux: echo '{"stop_reason": "⏸ Step 5: WAITING for user approval"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "⏸ Step 5: WAITING for user approval"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs ✅ ##### /code Step 6 Trigger khi /code command hoàn thành Step 6 finalization: macOS / Linux: echo '{"stop_reason": "✓ Step 6: Finalize - Status updated - Git committed"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "✓ Step 6: Finalize - Status updated - Git committed"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs Mỗi test sẽ trigger notification khác nhau với emoji và màu tương ứng. ### Hoặc: Để LLM Setup Hết Copy prompt này và để Claude Code setup cho bạn: Set up Discord notifications for Claude Code /plan and /code commands. Platform: Detect my OS and use appropriate paths/commands. Requirements: 1. Create the hooks directory: - macOS/Linux: ~/.claude/custom/hooks/ - Windows: %USERPROFILE%\\.claude\\custom\\hooks\\ 2. Create \`discord-phase-notify.cjs\` - a Node.js script that: - Uses native \`https\` module (no external dependencies) - Uses \`os.homedir()\` and \`process.cwd()\` for cross-platform paths - Reads hook payload from stdin (JSON with stop\_reason, result, output, message fields) - Only detects these specific patterns (no generic patterns): \* /plan command: "ExitPlanMode", "exiting plan mode" → Blue notification \* /code command: "⏸ Step 5", "WAITING for user approval" → Yellow notification \* /code command: "✓ Step 6: Finalize", "Git committed", "Phase workflow finished" → Green notification - Sends Discord embed with title, project name, directory, timestamp - Loads DISCORD\_WEBHOOK\_URL from project scope first, then global: \* Project: ./.claude/.env, ./.claude/hooks/.env \* Global: ~/.claude/custom/hooks/.env, ~/.claude/hooks/.env, ~/.claude/.env - Always exits 0 (non-blocking) 3. Update settings.json (only Stop event, not SubagentStop): - macOS/Linux: ~/.claude/settings.json with \`node $HOME/.claude/custom/hooks/discord-phase-notify.cjs\` - Windows: %USERPROFILE%\\.claude\\settings.json with full path 4. Create .env file with DISCORD\_WEBHOOK\_URL= 5. Test with these payloads: - /plan: {"stop\_reason": "ExitPlanMode - plan is ready"} - /code Step 5: {"stop\_reason": "⏸ Step 5: WAITING for user approval"} - /code Step 6: {"stop\_reason": "✓ Step 6: Finalize - Git committed"} The custom/ directory ensures the hook survives ClaudeKit updates. ### Tuỳ Chỉnh Cho Các Event Khác Hook này lắng nghe event `Stop`. Bạn có thể mở rộng hoặc thêm các hook event khác: #### Các Hook Event Có Sẵn | Event | Description | | --- | --- | | PreToolUse | Trước khi tool được thực thi | | PostToolUse | Sau khi tool hoàn thành | | Stop | Khi Claude dừng (session chính) | | SubagentStop | Khi subagent hoàn thành (hay bị trigger liên tục) | | Notification | Khi Claude gửi notification | #### Thêm Pattern Tuỳ Chỉnh Chỉnh sửa object `PATTERNS` trong script: // Thêm pattern tuỳ chỉnh const PATTERNS = { // Pattern có sẵn... planReady: [/ExitPlanMode/, /exiting\s+plan\s+mode/i], codeApproval: [/⏸\s*Step\s*5/, /WAITING\s+for\s+user\s+approval/i], codeFinalize: [/✓\s*Step\s*6.*Finalize/, /Phase\s+workflow\s+finished/i], // Tuỳ chỉnh: Thông báo khi test hoàn thành testsComplete: [\ /All tests passed/i,\ /\d+ passed, 0 failed/,\ ], // Tuỳ chỉnh: Thông báo khi có lỗi errorOccurred: [\ /Error:/i,\ /Failed to/i,\ /Exception/i,\ ], }; // Cập nhật detectType() để xử lý pattern mới function detectType(text) { // ... các check có sẵn ... for (const pattern of PATTERNS.testsComplete) { if (pattern.test(text)) { return { type: 'testsComplete', title: '✅ Tests Passed', color: 5763719 }; // Green } } for (const pattern of PATTERNS.errorOccurred) { if (pattern.test(text)) { return { type: 'error', title: '❌ Error Detected', color: 15548997 }; // Red } } return null; } #### Lắng Nghe Nhiều Event Thêm nhiều event trong `settings.json`: { "hooks": { "Stop": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }], "SubagentStop": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }], "Notification": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }] } } SubagentStop trigger thường xuyên - dùng pattern cụ thể để lọc bớt noise. Màu embed Discord là giá trị decimal. Phổ biến: Green=5763719, Red=15548997, Blue=3447003, Yellow=15844367, Purple=10181046. [Quay lại Custom Hooks](https://www.vividkit.dev/vi/guides/hooks) --- # Discord Notifications for Claude Code - VividKit Documentation | VividKit [What is ClaudeKit?](https://vividkit.dev/guides/what-is-claudekit) [CLI Guide](https://vividkit.dev/guides/cli) [Accounts Switcher](https://vividkit.dev/guides/ccs) [Workflows](https://vividkit.dev/guides/workflows) [Decision Tree](https://vividkit.dev/guides/flowchart) [Commands Reference](https://vividkit.dev/guides/commands) [UI/UX Guide](https://vividkit.dev/guides/uiux) [Resume Guide](https://vividkit.dev/guides/resume) [Fix Logs Guide](https://vividkit.dev/guides/fix-logs) [YOLO Mode](https://vividkit.dev/guides/permissions) [Custom Hooks](https://vividkit.dev/guides/hooks) [Promotions](https://vividkit.dev/guides/promotions) Never Miss a Phase: Discord Notifications ----------------------------------------- Get notified on Discord when Claude Code completes a phase or needs your attention > You kick off a multi-phase Claude Code session. Phase 1 starts running. You grab coffee. Check Slack. Get pulled into a meeting. Come back two hours later. Claude finished Phase 1 in 8 minutes and has been politely waiting for your approval ever since. ### The Problem * • Long-running Claude Code sessions with multi-phase plans require human approval between phases * • No built-in notification system means Claude waits silently * • Context switching kills productivity - you either watch Claude work or risk leaving it hanging * → **The solution:** a custom hook that pings you on Discord when Claude needs attention ### The Solution A lightweight hook that: * Detects phase completion, approval requests, and finalization using pattern matching * Sends a Discord notification so you can step away confidently * Works cross-platform (macOS, Linux, Windows) using native Node.js `https` module * Lives in `~/.claude/custom/hooks/` so it survives ClaudeKit updates * Only fires on meaningful keywords (not noisy like notifying on every stop) ### Detection Patterns | Type | Emoji | Color | Trigger Phrases | | --- | --- | --- | --- | | /plan Complete | 📋 | `#3498db` | "ExitPlanMode", "exiting plan mode" | | /code Step 5 | ⏸ | `#f1c40f` | "⏸ Step 5", "WAITING for user approval" | | /code Phase Complete | ✅ | `#2ecc71` | "✓ Step 6: Finalize", "Git committed", "Phase workflow finished" | ### Setup Steps 1 #### Create a Discord Webhook 1. Open Discord, go to your server 2. Right-click a channel → Edit Channel → Integrations → Webhooks → New Webhook 3. Name it "Claude Code" or anything you like 4. Copy the webhook URL (keep it secret!) 2 #### Create the Custom Hooks Directory macOS / Linux: mkdir -p ~/.claude/custom/hooks Windows (PowerShell) New-Item -ItemType Directory -Force -Path $env:USERPROFILE\.claude\custom\hooks The `custom/` directory is ignored by ClaudeKit updates, so your hooks persist. 3 #### Create the Notification Script Create file: `~/.claude/custom/hooks/discord-phase-notify.cjs` #!/usr/bin/env node /** * Discord Phase Notification Hook (Minimal Version) * * Only notifies on high-signal events: * 1. /plan command - ExitPlanMode when planning phase completes * 2. /code command - Step 5 blocking gate waiting for user approval * 3. /code command - Step 6 finalize when phase workflow finishes * * Location: ~/.claude/custom/hooks/ (survives CK updates) * Events: Stop (main session only, not SubagentStop to reduce noise) */ const fs = require('fs'); const path = require('path'); const https = require('https'); const os = require('os'); // Strict detection patterns - only high-signal events const PATTERNS = { // /plan command: Plan ready for approval (ExitPlanMode tool called) planReady: [\ /ExitPlanMode/,\ /exiting\s+plan\s+mode/i,\ ], // /code command: Step 5 blocking gate - waiting for user approval codeApproval: [\ /⏸\s*Step\s*5/,\ /Step\s*5.*WAITING.*user\s*approval/i,\ /WAITING\s+for\s+user\s+approval/i,\ ], // /code command: Step 6 finalize - phase workflow finished codeFinalize: [\ /✓\s*Step\s*6.*Finalize/,\ /Step\s*6.*Git\s*committed/i,\ /Phase\s+workflow\s+finished/i,\ ], }; // Load environment variables (project scope first, then global) function loadEnv() { const cwd = process.cwd(); const envPaths = [\ // Project scope first\ path.join(cwd, '.claude', '.env'),\ path.join(cwd, '.claude', 'hooks', '.env'),\ // Global scope fallback\ path.join(os.homedir(), '.claude', 'custom', 'hooks', '.env'),\ path.join(os.homedir(), '.claude', 'hooks', '.env'),\ path.join(os.homedir(), '.claude', '.env'),\ ]; for (const envPath of envPaths) { if (fs.existsSync(envPath)) { const content = fs.readFileSync(envPath, 'utf-8'); content.split('\n').forEach(line => { const match = line.match(/^([^=]+)=(.*)$/); if (match && !process.env[match[1]]) { process.env[match[1]] = match[2].replace(/^["']|["']$/g, ''); } }); } } } // Send Discord notification (cross-platform using native https) function sendDiscord(title, message, color = 5763719) { return new Promise((resolve) => { const webhookUrl = process.env.DISCORD_WEBHOOK_URL; if (!webhookUrl) { console.error('DISCORD_WEBHOOK_URL not set - skipping notification'); resolve(false); return; } const cwd = process.cwd(); const project = path.basename(cwd); const timestamp = new Date().toISOString(); const localTime = new Date().toLocaleTimeString('en-US', { hour12: false }); const payload = JSON.stringify({ embeds: [{\ title,\ description: message,\ color,\ timestamp,\ footer: { text: `${project} • ${cwd}` },\ fields: [\ { name: '⏰ Time', value: localTime, inline: true },\ { name: '📂 Project', value: project, inline: true },\ ],\ }], }); try { const url = new URL(webhookUrl); const options = { hostname: url.hostname, port: 443, path: url.pathname, method: 'POST', headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(payload), }, timeout: 10000, }; const req = https.request(options, (res) => { resolve(res.statusCode >= 200 && res.statusCode < 300); }); req.on('error', (e) => { console.error(`Discord notification failed: ${e.message}`); resolve(false); }); req.on('timeout', () => { req.destroy(); console.error('Discord notification timed out'); resolve(false); }); req.write(payload); req.end(); } catch (e) { console.error(`Discord notification failed: ${e.message}`); resolve(false); } }); } // Detect notification type from text - strict matching function detectType(text) { if (!text) return null; // /plan command: ExitPlanMode (plan ready for review) for (const pattern of PATTERNS.planReady) { if (pattern.test(text)) { return { type: 'planReady', title: '📋 /plan Complete', color: 3447003 }; // Blue } } // /code command: Step 6 finalize (phase workflow finished) - check before Step 5 for (const pattern of PATTERNS.codeFinalize) { if (pattern.test(text)) { return { type: 'codeFinalize', title: '✅ /code Phase Complete', color: 5763719 }; // Green } } // /code command: Step 5 blocking gate for (const pattern of PATTERNS.codeApproval) { if (pattern.test(text)) { return { type: 'codeApproval', title: '⏸ /code Step 5: Approval Needed', color: 15844367 }; // Yellow } } return null; } // Extract relevant context from payload function extractContext(payload) { const parts = []; if (payload.stop_reason) { parts.push(payload.stop_reason.slice(0, 300)); } return parts.join('\n') || 'Claude needs your attention'; } // Main execution async function main() { try { loadEnv(); const stdin = fs.readFileSync(0, 'utf-8').trim(); if (!stdin) process.exit(0); const payload = JSON.parse(stdin); const textParts = [\ payload.stop_reason,\ payload.result,\ payload.output,\ payload.message,\ ].filter(Boolean); if (payload.transcript_path && fs.existsSync(payload.transcript_path)) { try { const transcript = fs.readFileSync(payload.transcript_path, 'utf-8'); textParts.push(transcript.slice(-3000)); } catch (e) { // Ignore } } const fullText = textParts.join(' '); const detection = detectType(fullText); if (detection) { const context = extractContext(payload); const sent = await sendDiscord(detection.title, context, detection.color); if (sent) { console.log(`Discord: ${detection.title}`); } } process.exit(0); } catch (error) { console.error(`Hook error: ${error.message}`); process.exit(0); } } main(); Make executable (macOS/Linux): chmod +x ~/.claude/custom/hooks/discord-phase-notify.cjs Windows Save the script to `%USERPROFILE%\.claude\custom\hooks\discord-phase-notify.cjs` **Note:** No chmod needed on Windows - Node.js scripts run directly. 4 #### Configure Claude Code Hooks Add to `~/.claude/settings.json`: { "hooks": { "Stop": [\ {\ "hooks": [\ {\ "type": "command",\ "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs"\ }\ ]\ }\ ] } } **Windows users:** Replace `$HOME` with full path like `C:\Users\YourName\.claude\custom\hooks\discord-phase-notify.cjs` 5 #### Set Your Webhook URL Add to `~/.claude/.env`: DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/YOUR_ID/YOUR_TOKEN 6 #### Test 📋 ##### /plan Complete Triggers when /plan command completes (ExitPlanMode): macOS / Linux: echo '{"stop_reason": "ExitPlanMode - plan is ready for your review"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "ExitPlanMode - plan is ready for your review"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs ⏸ ##### /code Step 5 Triggers when /code command reaches Step 5 blocking gate: macOS / Linux: echo '{"stop_reason": "⏸ Step 5: WAITING for user approval"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "⏸ Step 5: WAITING for user approval"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs ✅ ##### /code Step 6 Triggers when /code command completes Step 6 finalization: macOS / Linux: echo '{"stop_reason": "✓ Step 6: Finalize - Status updated - Git committed"}' | node ~/.claude/custom/hooks/discord-phase-notify.cjs Windows (PowerShell) '{"stop_reason": "✓ Step 6: Finalize - Status updated - Git committed"}' | node $env:USERPROFILE\.claude\custom\hooks\discord-phase-notify.cjs Each test should trigger a different Discord notification with the corresponding emoji and color. ### Alternative: Let LLMs Do Everything Copy this prompt and let Claude Code set everything up for you: Set up Discord notifications for Claude Code /plan and /code commands. Platform: Detect my OS and use appropriate paths/commands. Requirements: 1. Create the hooks directory: - macOS/Linux: ~/.claude/custom/hooks/ - Windows: %USERPROFILE%\\.claude\\custom\\hooks\\ 2. Create \`discord-phase-notify.cjs\` - a Node.js script that: - Uses native \`https\` module (no external dependencies) - Uses \`os.homedir()\` and \`process.cwd()\` for cross-platform paths - Reads hook payload from stdin (JSON with stop\_reason, result, output, message fields) - Only detects these specific patterns (no generic patterns): \* /plan command: "ExitPlanMode", "exiting plan mode" → Blue notification \* /code command: "⏸ Step 5", "WAITING for user approval" → Yellow notification \* /code command: "✓ Step 6: Finalize", "Git committed", "Phase workflow finished" → Green notification - Sends Discord embed with title, project name, directory, timestamp - Loads DISCORD\_WEBHOOK\_URL from project scope first, then global: \* Project: ./.claude/.env, ./.claude/hooks/.env \* Global: ~/.claude/custom/hooks/.env, ~/.claude/hooks/.env, ~/.claude/.env - Always exits 0 (non-blocking) 3. Update settings.json (only Stop event, not SubagentStop): - macOS/Linux: ~/.claude/settings.json with \`node $HOME/.claude/custom/hooks/discord-phase-notify.cjs\` - Windows: %USERPROFILE%\\.claude\\settings.json with full path 4. Create .env file with DISCORD\_WEBHOOK\_URL= 5. Test with these payloads: - /plan: {"stop\_reason": "ExitPlanMode - plan is ready"} - /code Step 5: {"stop\_reason": "⏸ Step 5: WAITING for user approval"} - /code Step 6: {"stop\_reason": "✓ Step 6: Finalize - Git committed"} The custom/ directory ensures the hook survives ClaudeKit updates. ### Customize for Other Events The hook listens to the `Stop` event. You can extend it or add more hook events: #### Available Hook Events | Event | Description | | --- | --- | | PreToolUse | Before a tool is executed | | PostToolUse | After a tool completes | | Stop | When Claude stops (main session) | | SubagentStop | When a subagent completes (can be noisy) | | Notification | When Claude sends a notification | #### Adding Custom Patterns Edit the `PATTERNS` object in the script: // Add your custom patterns const PATTERNS = { // Existing patterns... planReady: [/ExitPlanMode/, /exiting\s+plan\s+mode/i], codeApproval: [/⏸\s*Step\s*5/, /WAITING\s+for\s+user\s+approval/i], codeFinalize: [/✓\s*Step\s*6.*Finalize/, /Phase\s+workflow\s+finished/i], // Custom: Notify when tests complete testsComplete: [\ /All tests passed/i,\ /\d+ passed, 0 failed/,\ ], // Custom: Notify on errors errorOccurred: [\ /Error:/i,\ /Failed to/i,\ /Exception/i,\ ], }; // Update detectType() to handle new patterns function detectType(text) { // ... existing checks ... for (const pattern of PATTERNS.testsComplete) { if (pattern.test(text)) { return { type: 'testsComplete', title: '✅ Tests Passed', color: 5763719 }; // Green } } for (const pattern of PATTERNS.errorOccurred) { if (pattern.test(text)) { return { type: 'error', title: '❌ Error Detected', color: 15548997 }; // Red } } return null; } #### Listen to Multiple Events Add more events in `settings.json`: { "hooks": { "Stop": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }], "SubagentStop": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }], "Notification": [{ "hooks": [{ "type": "command", "command": "node $HOME/.claude/custom/hooks/discord-phase-notify.cjs" }] }] } } SubagentStop fires frequently - use specific patterns to filter noise. Discord embed colors are decimal values. Common: Green=5763719, Red=15548997, Blue=3447003, Yellow=15844367, Purple=10181046. [Back to Custom Hooks](https://vividkit.dev/guides/hooks) ---