Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:web-frameworks

App React hiện đại

Xây app React hiện đại với Next.js App Router, RSC, SSR/SSG/ISR, monorepo Turborepo, package dùng chung, cache và polish UI bằng RemixIcon.

Chọn mô hình

Khởi tạo stack

Dựng route

Tách package

Nguyên tắc 01

Dùng Next.js cho SSR, SSG, RSC, routing, metadata và tối ưu tích hợp sẵn.

Nguyên tắc 02

Dùng Turborepo khi nhiều app hoặc package cần chia sẻ code và pipeline có cache.

Nguyên tắc 03

Mặc định dùng Server Components; chỉ đưa Client Components vào khi cần hành vi phía client.

Nguyên tắc 04

Tách bản stable cho production khỏi biến động canary của framework.

Nguyên tắc 05

Dùng RemixIcon có accessibility: aria label, currentColor và căn chuẩn 24x24.

Bản đồ thực thi

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

Khởi động

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

1 Chọn mô hình Chọn app Next.js đơn lẻ hay monorepo Turborepo dựa trên nhu cầu nhiều app, package dùng chung và đội nhóm.
2 Khởi tạo stack Tạo dự án bằng create-next-app hoặc create-turbo, rồi thêm RemixIcon nơi UI cần bộ icon chuyên nghiệp.

Xử lý

Agent / skill thực thi

3 Dựng route Dùng layout, page, loading state, error state và metadata của App Router để dựng cấu trúc ứng dụng.
4 Tách package Với monorepo, tách apps khỏi các package ui, config, types và API client bằng dependency workspace rõ ràng.

Kiểm chứng

Gate, review, xác thực

5 Thiết kế dữ liệu Mặc định chọn Server Components, chỉ dùng Client Components khi cần, và định nghĩa hành vi cache/revalidate cho fetch.
6 Tối ưu asset Áp các pattern tối ưu image, font, script, bundle, SEO và hiệu năng của Next.js.

Đóng

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

7 Cấu hình pipeline Với Turborepo, định nghĩa dependency task, outputs, task dev chạy lâu, filter và remote cache.
8 Ship an toàn Giữ app production trên bản Next.js stable đã vá lỗi và nối CI/CD cho build, test, lint và deploy.

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

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

Cú pháp

/ak:web-frameworks [framework] [feature]

Đối số

[framework]

Framework hoặc stack cần tập trung

Trọng tâm tùy chọn như Next.js, Turborepo, RemixIcon, App Router, RSC, SSR, ISR hoặc caching. Trường này không đặt framework, version, package manager, nhà cung cấp hosting hay chế độ deploy mặc định.

/ak:web-frameworks nextjs "Thêm trang sản phẩm App Router trong phiên bản Next.js đã ghim hiện có"

[feature]

Yêu cầu tính năng hoặc kiến trúc

Yêu cầu bằng ngôn ngữ tự nhiên về route, layout, ranh giới Server hoặc Client Component, chính sách data fetching, độ mới cache, package monorepo, task Turborepo hoặc tích hợp RemixIcon.

/ak:web-frameworks Turborepo monorepo cho web, admin, docs, và các package UI dùng chung

Tính năng đặc biệt

Ứng dụng đơn

Phù hợp e-commerce, marketing, SaaS, docs, blog và nền tảng nội dung chưa cần package dùng chung.

Monorepo

Phù hợp microfrontend, sản phẩm multi-tenant, internal tool và design system có thư viện dùng chung.

Chiến lược cache

Chọn force-cache, revalidate hoặc no-store có chủ ý theo nhu cầu độ mới dữ liệu và hiệu năng.

Prompt mẫu

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

Khởi động app Next Khuyến nghị

/ak:web-frameworks Dashboard SaaS Next.js với App Router, Server Components và RemixIcon

Dùng khi:: Đang xây một ứng dụng React hiện đại dạng standalone.
Kết quả:: Hướng dẫn setup app đơn bằng create-next-app, layout/page App Router, mặc định Server Component, loading/error state, metadata, tối ưu và cách dùng RemixIcon.

Thiết kế monorepo

/ak:web-frameworks Monorepo Turborepo cho web, admin, docs và các package UI dùng chung

Dùng khi:: Nhiều app cần chia sẻ UI, config, types hoặc package API client.
Kết quả:: Vạch cấu trúc apps/packages, thư viện component dùng chung, dependency workspace, dependency task turbo, outputs, task dev persistent, filter, remote cache và pipeline CI/CD.

Tinh chỉnh cache dữ liệu

/ak:web-frameworks Chiến lược lấy dữ liệu Next.js với ISR, force-cache, revalidate và no-store

Dùng khi:: App Next.js cần kiểm soát rõ độ mới dữ liệu và hiệu năng.
Kết quả:: Giải thích lựa chọn cache cho fetch, pattern ISR/revalidation, static params, xử lý notFound, loading/error state và khi nào tránh cache bằng no-store.

Tích hợp icon

/ak:web-frameworks Tích hợp RemixIcon cho điều hướng, nút bấm và các thành phần UI dùng chung

Dùng khi:: UI cần hệ icon line/fill nhất quán xuyên suốt component.
Kết quả:: Chỉ ra cách tích hợp webfont và React component, vị trí package cho UI dùng chung, cách chọn line/fill, căn 24x24, theme bằng currentColor và accessibility bằng aria-label.

Phạm vi xử lý

Chọn mô hình
Khởi tạo stack
Dựng route
Tách package
Thiết kế dữ liệu
Tối ưu asset