web-component-design

Tổng quan

web-component-design là gì?

web-component-design là một kỹ năng dành cho các nhà phát triển frontend tập trung vào việc xây dựng các thành phần UI có thể tái sử dụng và dễ bảo trì bằng các framework hiện đại như React, Vue và Svelte. Kỹ năng này cung cấp hướng dẫn thực tế về các mẫu cấu trúc thành phần, tạo kiểu CSS-in-JS, các thực hành tốt về khả năng truy cập và triển khai hệ thống thiết kế. Đây là kỹ năng lý tưởng cho các nhóm và cá nhân muốn tạo thư viện thành phần có thể mở rộng, API nhất quán và kiến trúc frontend vững chắc.

Ai nên sử dụng kỹ năng này?

• Kỹ sư frontend xây dựng hoặc tái cấu trúc thư viện thành phần UI
• Nhà phát triển triển khai hệ thống thiết kế trên nhiều dự án
• Các nhóm tìm kiếm API thành phần nhất quán, dễ truy cập và dễ bảo trì
• Bất kỳ ai làm việc với React, Vue, Svelte hoặc các giải pháp CSS-in-JS

Các vấn đề được giải quyết

• Tinh giản cấu trúc thành phần để linh hoạt và tái sử dụng
• Hỗ trợ lựa chọn và triển khai các phương pháp tạo kiểu CSS-in-JS hoặc mô-đun
• Cung cấp các mẫu khả năng truy cập cho các thành phần UI phổ biến
• Hỗ trợ chuyển đổi từ các mẫu thành phần cũ sang hiện đại

Cách sử dụng

Các bước cài đặt

1. Cài đặt kỹ năng bằng lệnh:
   npx skills add https://github.com/wshobson/agents --skill web-component-design
2. Bắt đầu bằng cách xem qua SKILL.md để hiểu quy trình làm việc và bối cảnh sử dụng.
3. Khám phá các tệp hỗ trợ:
   • references/accessibility-patterns.md cho các mẫu ARIA và hộp thoại modal
   • references/component-patterns.md cho các thành phần phức hợp và sử dụng context
   • references/css-styling-approaches.md để so sánh CSS Modules, Tailwind, styled-components và các phương pháp khác

Điều chỉnh cho dự án của bạn

• Sử dụng các ví dụ và tài liệu tham khảo làm cảm hứng cho kho mã và công cụ của riêng bạn.
• Tích hợp các mẫu được đề xuất về cấu trúc thành phần, tạo kiểu và khả năng truy cập vào mã nguồn.
• Tùy chỉnh các phương pháp để phù hợp với hệ thống thiết kế và stack frontend của nhóm bạn.

Các khái niệm chính

Cấu trúc thành phần

• Thành phần phức hợp (ví dụ: Tabs, Select)
• Render props để render linh hoạt
• Slots để chèn nội dung (Vue/Svelte)

Phương pháp tạo kiểu

• CSS Modules cho kiểu scoped
• Tailwind cho tạo kiểu tiện ích
• Các giải pháp CSS-in-JS như styled-components và Emotion

Khả năng truy cập

• Mẫu ARIA cho modal, hộp thoại và các phần tử tương tác
• Quản lý focus và điều hướng bằng bàn phím

Câu hỏi thường gặp

Tôi có thể tìm ví dụ triển khai ở đâu?

Kiểm tra thư mục references/ để xem các mẫu mã chi tiết và các thực hành tốt nhất về mẫu thành phần, tạo kiểu và khả năng truy cập.

web-component-design có phù hợp với tất cả các dự án frontend không?

Kỹ năng này phù hợp nhất với các dự án sử dụng React, Vue hoặc Svelte, và các nhóm xây dựng thư viện UI tái sử dụng hoặc hệ thống thiết kế. Nó có thể không cần thiết cho các trang web tĩnh đơn giản hoặc dự án không sử dụng kiến trúc thành phần.

Làm sao để xem trước toàn bộ cây thư mục tệp?

Mở tab Files trong Agent Skills Finder để xem tất cả các tệp có sẵn, bao gồm các tài liệu tham khảo lồng nhau và các script hỗ trợ.