Biến câu trả lời AI thành trang dễ đọc với Answer me with HTML

Answer me with HTML làm gì

Answer me with HTML là một kỹ năng dành cho agent, biến các câu trả lời phức tạp thành những trang HTML dễ đọc và tự chứa. Thay vì yêu cầu mô hình viết từng phần tử HTML, quy tắc CSS và tọa độ SVG, kỹ năng này để mô hình tạo một bản nháp Markdown ngắn. CLI đi kèm sau đó sẽ xử lý bố cục, kiểu dáng và việc kết xuất sơ đồ.

Việc phân chia công việc này giúp giảm lượng đầu ra được tạo và thời gian chờ. Trong bài benchmark của dự án, kỹ năng này sử dụng trung vị 923 token đầu ra thay vì 6.873 token và hoàn thành câu trả lời trong 13 giây thay vì 46 giây. Chi phí đo được vẫn gần như tương đương vì các lượt hoạt động bổ sung của agent phải đọc lại ngữ cảnh cuộc trò chuyện.

Công cụ này hữu ích cho những thông tin cần cấu trúc, chẳng hạn như giải thích kiến trúc, quy trình nhiều bước, nội dung so sánh, dòng thời gian, cây mô-đun và bài đánh giá văn bản có chú thích. Một câu hỏi đơn giản vẫn có thể nhận được câu trả lời văn bản đơn giản; agent sẽ quyết định khi nào nên tạo trang, trừ khi bạn yêu cầu rõ ràng.

Tính năng chính

• Đầu ra mô hình gọn nhẹ: Mô hình viết nội dung thay vì hàng trăm dòng HTML, CSS và SVG lặp lại.
• Bố cục do mã điều khiển: CLI tính toán vị trí các bảng và tọa độ sơ đồ, giúp giảm tình trạng nhãn bị cắt và khoảng cách không đều.
• Kiểm tra hữu ích: Nếu bản nháp có lỗi, CLI báo cáo dòng, thành phần và ví dụ đúng để agent có thể sửa.
• Thành phần trực quan: Bản nháp có thể chứa lưu đồ, sơ đồ tuần tự, cây, dòng thời gian, giới hạn, chú thích, khối khóa-giá trị, hộp nổi bật và bảng so sánh.
• Hai giao diện: Chọn giao diện kiểu kỹ thuật blueprint hoặc giao diện dựa trên thẻ shadcn. Cả hai đều hỗ trợ chế độ sáng và tối.
• Đầu ra dễ chia sẻ: Mỗi kết quả là một tệp HTML duy nhất, không có liên kết CDN hay phông chữ web, nên có thể mở ngoại tuyến và dễ dàng chia sẻ.
• Nhúng mã nguồn: Mỗi trang giữ lại Markdown được dùng để tạo trang. Nút Copy source của trang sẽ lấy lại bản nháp đó.
• Kiểm tra văn phong: Bản nháp tiếng Anh và tiếng Trung được kiểm tra các câu dài, cụm từ dài dòng, thể bị động và những vấn đề văn phong liên quan.

Yêu cầu và cài đặt

Bạn cần Node.js 20 trở lên. Cài đặt kỹ năng theo cách thông thường không yêu cầu chạy riêng npm install vì CLI và các phần phụ thuộc runtime đã được đóng gói cùng kỹ năng.

Tùy chọn 1: Để Agent Cài đặt

Cách được khuyến nghị là gửi yêu cầu cài đặt cho coding agent của bạn. Trình cài đặt hỗ trợ Claude Code, Codex, Cursor, OpenCode và nhiều agent khác.

Cài đặt kỹ năng Answer me with HTML bằng cách chạy npx -y skills add QingYunA/answer-me-with-html -g -y. Truyền -a cùng tên agent phù hợp, chẳng hạn như -a claude-code. Sau đó đọc SKILL.md của kỹ năng và tạo một trang giải thích quy trình bắt tay ba bước TCP.

Tùy chọn 2: Dùng Trình cài đặt tương tác

Chạy lệnh sau rồi chọn các agent cần cài đặt kỹ năng:

npx skills add QingYunA/answer-me-with-html

Lệnh này sử dụng trình cài đặt vercel-labs/skills, hỗ trợ hơn 70 agent.

Tùy chọn 3: Cài Plugin Claude Code

Trong Claude Code, thêm marketplace rồi cài plugin:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

Tùy chọn 4: Cài đặt thủ công

Sao chép repository rồi chép thư mục kỹ năng vào thư mục kỹ năng của agent. Với Claude Code, dùng:

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

Các vị trí khác được ghi nhận gồm ~/.codex/skills/ cho Codex, ~/.cursor/skills/ cho Cursor và ~/.config/opencode/skill/ cho OpenCode. Sau khi cài đặt, không cần thiết lập thêm.

Tạo trang đầu tiên

1. Đặt một câu hỏi có chiều sâu. Hãy thử Explain the TCP three-way handshake, Map out how the modules in this repository fit together hoặc Redis or Memcached for our cache?.
2. Để agent chọn cách trình bày. Agent sẽ viết một bản nháp Markdown ngắn rồi chuyển bản nháp cho CLI đi kèm.
3. Mở kết quả. Theo mặc định, trang được tạo sẽ mở trong trình duyệt.
4. Tìm tệp đã lưu. Các trang được tạo nằm trong ~/.answer-me-with-html/pages/.
5. Dùng các điều khiển của trang. Các điều khiển ở góc trên bên phải cho phép chuyển giao diện hoặc chế độ màu và sao chép Markdown nguồn.

Nếu agent không tự động chọn kỹ năng, hãy thêm chỉ dẫn trực tiếp như Explain it in HTML.

Cách công cụ chọn thành phần

Agent đối chiếu dạng thông tin với một thành phần phù hợp:

• flow biểu diễn kiến trúc, chuỗi gọi, các quyết định và hệ thống được nhóm.
• sequence hiển thị các thông điệp được nhiều bên tham gia trao đổi theo thời gian.
• tree trình bày thư mục, mô-đun và các hệ phân loại.
• timeline sắp xếp lịch sử, các bản phát hành hoặc các giai đoạn.
• limits so sánh một giá trị với giới hạn của nó.
• annot thêm ghi chú ở cấp độ từ vào một câu.
• kv hiển thị siêu dữ liệu hoặc thông tin khối tiêu đề.
• callout làm nổi bật kết luận, cảnh báo hoặc mẹo.
• Bảng Markdown hỗ trợ so sánh; các ô chứa ok, no hoặc warn sẽ trở thành dấu trạng thái trực quan.

Tự viết và kết xuất bản nháp

Bạn có thể sử dụng CLI đi kèm mà không cần tác nhân. Bản nháp bắt đầu bằng phần front matter tùy chọn và dùng mỗi tiêu đề cấp hai làm một bảng. Ví dụ sau tạo sơ đồ trình tự và luồng cho quá trình bắt tay TCP:

---
title: TCP three-way handshake
theme: blueprint
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

Trong tiêu đề bảng, span=2 làm bảng rộng hai cột, rows=2 làm bảng cao hai hàng, còn bare loại bỏ thanh tiêu đề. Bạn cũng có thể thêm siêu dữ liệu bằng meta="small text".

Kết xuất từ dòng lệnh

Tệp CLI là scripts/am.mjs bên trong skill đã cài đặt. Từ bản sao kho mã, hãy xác định đường dẫn và chạy lệnh mong muốn:

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

Lệnh đầu tiên kết xuất bản nháp và mở bản đó. Lệnh thứ hai chọn tên tệp đầu ra và ngăn trình duyệt mở. Lệnh thứ ba ghi đè theme cho một lần chạy. Các lệnh còn lại chạy kiểm tra nội dung, liệt kê các thành phần và hiển thị cài đặt.

Thông thường, tác nhân gửi bản nháp qua đầu vào chuẩn. Bạn cũng có thể làm như vậy:

node $AM render - <<'AM_EOF'
## A One panel
```flow
A -> B: hello
```
AM_EOF

Dùng am help <component> để xem cú pháp đầy đủ của một thành phần cụ thể. Đặt biến môi trường AM_HOME nếu bạn muốn lưu các trang được tạo ở nơi khác thay vì thư mục mặc định.

Cấu hình theme, hành vi trình duyệt và kiểm tra nội dung

Cài đặt được quản lý bằng các lệnh, vì vậy bạn không cần chỉnh sửa tệp cấu hình thủ công. Các giá trị được lưu tại ~/.answer-me-with-html/config.json.

Đối với cài đặt plugin Claude Code, hãy mở lệnh cấu hình tương tác hoặc thay đổi trực tiếp một cài đặt:

/answer-me-with-html:config
/answer-me-with-html:config open off

Với tác nhân khác, dùng /answer-me-with-html config open off hoặc yêu cầu tác nhân ngừng mở trình duyệt. Từ terminal, dùng:

am config
am config set open off
am config reset

• open mặc định là on và kiểm soát việc có mở trang mới trong trình duyệt hay không.
• always mặc định là on, nhưng chỉ có tác dụng khi đã cài đặt tích hợp always-on tùy chọn.
• theme mặc định là blueprint và cũng chấp nhận shadcn.
• mode chấp nhận auto, light hoặc dark.
• style chấp nhận off, 80 hoặc strict. Chế độ mặc định 80 cảnh báo mà không chặn việc kết xuất.

Theme được khai báo trong bản nháp sẽ ghi đè mặc định đã cấu hình. Các cờ --open và --no-open chỉ ghi đè hành vi trình duyệt cho một lần kết xuất.

Mẹo nâng cao

Bật chế độ Always-On

Thông thường, tác nhân chỉ tạo trang khi câu trả lời thực sự có lợi từ một trang. Chế độ always-on thêm một trang nhỏ whenever câu trả lời chứa kết luận, bản tóm tắt, kế hoạch, phép so sánh, bài đánh giá hoặc phần giải thích. Các trang thông thường dùng từ hai đến bốn bảng và được kết xuất mà không mở trình duyệt. Trò chuyện thông thường và câu trả lời không có kết luận vẫn không thay đổi.

Đối với Claude Code, hãy cài đặt plugin bổ sung:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html

Tạm dừng mà không gỡ cài đặt bằng cách chạy:

/answer-me-with-html:config always off

Các tác nhân khác có thể áp dụng quy tắc always-on đã được tài liệu hóa trong tệp quy tắc toàn cục, chẳng hạn như AGENTS.md. Quy tắc này nên yêu cầu tác nhân tạo một trang nhỏ cho các kết luận và kết xuất trang bằng --no-open, đồng thời bỏ qua trò chuyện thông thường, đầu ra lệnh thuần túy và các yêu cầu về văn bản thuần.

Sử dụng kiểm tra nội dung nghiêm ngặt

Kiểm tra nội dung dựa trên các nguyên tắc có thể kiểm tra bằng máy, được điều chỉnh từ ASD-STE100. Kiểm tra này ưu tiên câu ngắn, từ ngữ thông dụng, mệnh lệnh trực tiếp và thuật ngữ nhất quán. Các bước tiếng Anh nên dưới 20 từ, phần mô tả dưới 25 từ và đoạn văn không quá sáu câu. Kiểm tra tiếng Trung sử dụng các giới hạn ký tự tương ứng và đánh dấu một số cấu trúc lặp lại hoặc mơ hồ được chọn.

Bật kiểm tra chặn trên toàn cục bằng:

/answer-me-with-html:config style strict

Bạn cũng có thể chỉ định style: trong bản nháp để kiểm soát việc xác thực cho trang đó.

Chọn Mẫu Phù Hợp

Mẫu sheet mặc định sắp xếp thông tin dưới dạng lưới các bảng. Sử dụng doc cho trang một cột có mục lục. Với mẫu sheet, trường front matter cols kiểm soát số lượng cột.

Ghi Đè Cách Trình Bày Cho Từng Trang

Đặt các lựa chọn trình bày trong front matter của bản nháp khi một trang cần các thiết lập khác:

---
template: sheet
theme: shadcn
title: Cache comparison
subtitle: Redis and Memcached
cols: 3
source: Internal architecture review
---

Các trường front matter bổ sung sẽ được hiển thị bên dưới tiêu đề trang. Khi một thành phần tích hợp không phù hợp, định dạng bản nháp cũng hỗ trợ các khối HTML hoặc SVG thô, mặc dù các thành phần tích hợp cung cấp lợi ích bố cục tự động.

Phát Triển Dự Án Cục Bộ

Cộng tác viên cần cài đặt các dependency thông thường vì mã nguồn và các bài kiểm thử của repository đang được sử dụng:

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

Chạy npm run build sau khi thay đổi các tệp trong src/ để xây dựng lại skills/answer-me-with-html/scripts/am.mjs đã được đóng gói. Hai dependency thời gian chạy là marked để phân tích Markdown và Dagre để bố trí lưu đồ; cả hai đều được đóng gói vào CLI.

Kết Luận

Answer me with HTML tách biệt việc tạo nội dung khỏi việc xây dựng trang. Agent của bạn viết một bản nháp Markdown ngắn gọn, còn CLI cung cấp bố cục, sơ đồ, giao diện, xác thực và một tệp HTML ngoại tuyến có thể di chuyển. Hãy bắt đầu bằng cách cài đặt skill và yêu cầu giải thích bằng hình ảnh. Sau đó, tinh chỉnh quy trình bằng cách kết xuất trực tiếp qua CLI, sử dụng giao diện theo từng trang, kiểm tra nội dung nghiêm ngặt hoặc bật chế độ luôn hoạt động tùy chọn.