web-design-guidelines

Tổng quan về skill web-design-guidelines

Skill này dùng để làm gì

web-design-guidelines là một hướng dẫn thực tiễn về thiết kế nền tảng web và khả năng tiếp cận, dùng để xây dựng, rà soát hoặc sửa UI trên web. Skill này phù hợp nhất với những người cần nhiều hơn một prompt chung chung: kỹ sư frontend, designer làm việc với code, người kiểm tra accessibility, và các agent phải đưa ra lựa chọn HTML/CSS/JS có thể bảo vệ được.

Skill này giúp bạn quyết định điều gì

Hãy dùng skill này khi nhiệm vụ là chọn markup ngữ nghĩa, đáp ứng kỳ vọng của WCAG 2.2, cải thiện hành vi responsive, hoặc tránh các lỗi thoái lui phổ biến trong UI web. Giá trị chính của web-design-guidelines là biến các mục tiêu rộng như “làm form này accessible hơn” hoặc “cải thiện bố cục này trên mobile” thành các quy tắc nền tảng cụ thể.

Điểm khác biệt

Repository này không phụ thuộc framework và có quan điểm rõ ràng về các nguyên tắc cốt lõi: HTML ngữ nghĩa, truy cập bằng bàn phím, trạng thái focus, độ tương phản, thiết kế responsive và hiệu năng. Với web-design-guidelines for UI Design, điều đó làm cho skill này hữu ích trên React, Vue, HTML thuần, và cả công việc với design system, vì hướng dẫn nằm ở tầng thấp hơn lựa chọn framework.

Cách sử dụng skill web-design-guidelines

Cài đặt và nạp đúng tệp

Dùng lệnh web-design-guidelines install cho gói skill:
npx skills add ehmo/platform-design-skills --skill web-design-guidelines

Sau khi cài đặt, nạp SKILL.md để lấy toàn bộ bộ quy tắc. Nếu bạn chỉ cần một khía cạnh, hãy xem rules/_sections.md trước. AGENTS.md là đường nhanh nhất để hiểu cấu trúc tệp, phạm vi và các mức ưu tiên.

Biến yêu cầu mơ hồ thành prompt hữu ích

Skill hoạt động tốt nhất khi đầu vào nêu rõ bề mặt UI, ràng buộc mục tiêu và quyết định bạn muốn được đưa ra. Prompt tốt hơn sẽ có dạng:

• “Rà soát form checkout này xem có lỗi về bàn phím và label không.”
• “Refactor lưới card này để vẫn dễ đọc trên mobile và tuân thủ quy tắc độ tương phản.”
• “Kiểm tra modal này về focus trapping, hành vi khi nhấn Esc, và cách đặt tên ARIA.”

Với web-design-guidelines usage, hãy đưa vào markup thực tế, API component, hoặc các ràng buộc layout. Nếu bạn chỉ nói “cải thiện accessibility,” đầu ra thường quá rộng để đáng tin cậy.

Thứ tự đọc được khuyến nghị

Bắt đầu với SKILL.md, rồi đến AGENTS.md, sau đó dùng rules/_sections.md để nạp có chọn lọc. Nếu đang gỡ một lỗi cụ thể, hãy đọc trước phần liên quan nhất: accessibility, forms, responsive design, typography, performance hoặc navigation. Cách này giúp tập trung đúng việc và giảm các lời khuyên không liên quan.

Quy trình cho kết quả tốt hơn

Hãy đi theo chuỗi này: xác định vấn đề của người dùng, tìm phần quy tắc phù hợp, áp dụng sửa đổi cấu trúc tối thiểu, rồi kiểm tra lại keyboard, label, độ tương phản và hành vi trên mobile. Skill này mạnh nhất khi bạn yêu cầu nó tạo một bản review hoặc một bản patch, thay vì chỉ giải thích best practice theo kiểu trừu tượng.

Câu hỏi thường gặp về skill web-design-guidelines

Skill này chỉ dành cho công việc accessibility thôi à?

Không. Accessibility là phần lớn nhất, nhưng skill này còn bao gồm layout responsive, forms, typography, hiệu năng, dark mode, navigation, touch, i18n, animation và các vấn đề liên quan đến PWA. Nếu nhiệm vụ của bạn rộng hơn WCAG, skill này vẫn phù hợp.

Tôi có cần là chuyên gia frontend mới dùng được không?

Không. web-design-guidelines skill rất thân thiện với người mới nếu bạn có thể chia sẻ HTML, code component, hoặc mô tả vấn đề kèm ảnh chụp màn hình. Tuy nhiên, bạn vẫn cần nói rõ giao diện là gì và hành vi nào bạn muốn thay đổi.

Khi nào thì không nên dùng?

Bỏ qua skill này nếu nhiệm vụ của bạn chỉ là branding thuần túy về mặt hình ảnh, viết nội dung, hoặc chiến lược sản phẩm mà không có phần triển khai UI. Đây cũng không phải công cụ phù hợp cho các câu hỏi về kiến trúc server-side, trừ khi câu trả lời phụ thuộc vào hành vi của giao diện web.

Nó tốt hơn một prompt thông thường ở điểm nào?

Một prompt thông thường thường trả về lời khuyên chung chung. Skill này bám vào quy tắc nền tảng, nên các yêu cầu web-design-guidelines guide có thể đưa ra quyết định đáng tin hơn về phần tử ngữ nghĩa, luồng điều hướng bằng bàn phím, cách dùng ARIA và hành vi responsive mà không phải đoán mò.

Cách cải thiện skill web-design-guidelines

Cung cấp bối cảnh UI hoàn chỉnh nhưng nhỏ nhất có thể

Đầu vào tốt nhất sẽ gồm tên component, đoạn code liên quan và dạng lỗi đang gặp. Ví dụ: “Đây là một modal có icon đóng, hai ô nhập và một hành động chính; hãy rà soát quản lý focus và nhãn.” Cụ thể như vậy mạnh hơn nhiều so với “làm cho nó accessible.”

Nêu rõ ràng ràng buộc quan trọng nhất

Nếu bạn quan tâm nhất đến mobile, hãy nói rõ giới hạn viewport, breakpoint hoặc kích thước touch target. Nếu bạn quan tâm đến accessibility, hãy nêu đúng vấn đề mục tiêu: truy cập bằng bàn phím, độ tương phản, nhãn, reduced motion, hoặc cách đặt tên cho screen reader. web-design-guidelines usage sẽ hiệu quả hơn khi skill biết tradeoff nào là quan trọng nhất.

Chú ý các lỗi thất bại thường gặp

Những lỗi hay gặp nhất là lạm dụng <div> cho nội dung ngữ nghĩa, control tương tác bị ẩn nhưng không có nhãn, trạng thái focus yếu, và layout bị vỡ khi văn bản được dịch sang ngôn ngữ khác hoặc khi zoom. Nếu đầu ra đầu tiên có vẻ quá chung chung, hãy yêu cầu rà soát theo quy tắc của đúng cây component hoặc đúng CSS đó.

Lặp lại bằng vòng phản hồi

Sau lần đầu, hãy yêu cầu kiểm tra lại lần hai theo đúng mối lo còn chưa yên tâm: “rà soát lại thứ tự keyboard,” “xác nhận độ tương phản và style focus,” hoặc “chỉ xác định các thay đổi markup.” Cách này giúp web-design-guidelines luôn tập trung và thường cho ra bản triển khai cuối sắc hơn.