Skills Addyosmani

web-quality-skills/skills/accessibility

Kiểm tra và cải thiện khả năng truy cập web theo hướng dẫn WCAG 2.2. Sử dụng khi được yêu cầu "cải thiện khả năng truy cập", "kiểm tra a11y", "tuân thủ WCAG", "hỗ trợ trình đọc màn hình", "điều hướng bàn phím" hoặc "làm cho có thể truy cập".

agent-skills/skills/api-and-interface-design

Hướng dẫn thiết kế API và giao diện ổn định. Sử dụng khi thiết kế API, ranh giới module hoặc bất kỳ giao diện công khai nào. Sử dụng khi tạo endpoint REST hoặc GraphQL, định nghĩa hợp đồng kiểu giữa các module hoặc thiết lập ranh giới giữa frontend và backend.

web-quality-skills/skills/best-practices

Áp dụng các phương pháp thực hành tốt nhất trong phát triển web hiện đại về bảo mật, khả năng tương thích và chất lượng mã. Sử dụng khi được yêu cầu "áp dụng các phương pháp thực hành tốt nhất", "kiểm tra bảo mật", "hiện đại hóa mã", "đánh giá chất lượng mã" hoặc "kiểm tra lỗ hổng".

agent-skills/skills/browser-testing-with-devtools

Kiểm thử trên trình duyệt thực qua Chrome DevTools MCP. Sử dụng khi xây dựng hoặc gỡ lỗi bất kỳ thứ gì chạy trên trình duyệt. Sử dụng khi cần kiểm tra DOM, ghi lại lỗi console, phân tích yêu cầu mạng, đánh giá hiệu suất hoặc xác minh đầu ra trực quan với dữ liệu runtime thực. Yêu cầu máy chủ MCP chrome-devtools phải được cấu hình.

agent-skills/skills/ci-cd-and-automation

Tự động hóa thiết lập pipeline CI/CD. Sử dụng khi thiết lập hoặc sửa đổi các pipeline xây dựng và triển khai. Sử dụng khi bạn cần tự động hóa các cổng chất lượng, cấu hình trình chạy kiểm thử trong CI, hoặc thiết lập các chiến lược triển khai.

agent-skills/skills/code-review-and-quality

Thực hiện đánh giá mã nguồn đa chiều. Sử dụng trước khi hợp nhất bất kỳ thay đổi nào. Sử dụng khi xem xét mã do chính bạn, một tác nhân khác hoặc con người viết. Sử dụng khi bạn cần đánh giá chất lượng mã trên nhiều khía cạnh trước khi nó được đưa vào nhánh chính.

agent-skills/skills/code-simplification

Đơn giản hóa mã để rõ ràng hơn. Sử dụng khi tái cấu trúc mã để tăng độ rõ ràng mà không thay đổi hành vi. Sử dụng khi mã hoạt động nhưng khó đọc, khó bảo trì hoặc khó mở rộng hơn mức cần thiết. Sử dụng khi xem xét mã đã tích tụ độ phức tạp không cần thiết.

agent-skills/skills/context-engineering

Tối ưu hóa thiết lập ngữ cảnh cho tác nhân. Sử dụng khi bắt đầu phiên mới, khi chất lượng đầu ra của tác nhân giảm sút, khi chuyển đổi giữa các tác vụ, hoặc khi bạn cần cấu hình tệp quy tắc và ngữ cảnh cho một dự án.

web-quality-skills/skills/core-web-vitals

Tối ưu hóa Core Web Vitals (LCP, INP, CLS) để cải thiện trải nghiệm trang và thứ hạng tìm kiếm. Sử dụng khi được yêu cầu "cải thiện Core Web Vitals", "sửa LCP", "giảm CLS", "tối ưu INP", "tối ưu hóa trải nghiệm trang" hoặc "sửa lỗi dịch chuyển bố cục".

agent-skills/skills/debugging-and-error-recovery

Hướng dẫn gỡ lỗi nguyên nhân gốc rễ một cách có hệ thống. Sử dụng khi kiểm thử thất bại, bản dựng bị hỏng, hành vi không khớp với kỳ vọng, hoặc bạn gặp bất kỳ lỗi bất ngờ nào. Sử dụng khi bạn cần một cách tiếp cận có hệ thống để tìm và sửa nguyên nhân gốc rễ thay vì phỏng đoán.

agent-skills/skills/deprecation-and-migration

Quản lý việc không dùng nữa và di chuyển. Sử dụng khi loại bỏ các hệ thống, API hoặc tính năng cũ. Sử dụng khi di chuyển người dùng từ một triển khai này sang triển khai khác. Sử dụng khi quyết định duy trì hay ngừng sử dụng mã hiện có.

agent-skills/skills/documentation-and-adrs

Ghi lại các quyết định và tài liệu. Sử dụng khi đưa ra quyết định kiến trúc, thay đổi API công khai, phát hành tính năng hoặc khi cần ghi lại ngữ cảnh mà các kỹ sư và tác nhân trong tương lai sẽ cần để hiểu mã nguồn.

agent-skills/skills/doubt-driven-development

Đưa mọi quyết định không tầm thường vào một cuộc đánh giá đối kháng trong ngữ cảnh mới trước khi nó được chấp nhận. Sử dụng khi tính chính xác quan trọng hơn tốc độ, khi làm việc với mã nguồn không quen thuộc, khi rủi ro cao (sản xuất, logic nhạy cảm bảo mật, thao tác không thể đảo ngược), hoặc bất kỳ lúc nào việc xác minh một đầu ra tự tin sẽ rẻ hơn so với việc gỡ lỗi sau này.

agent-skills/skills/frontend-ui-engineering

Xây dựng giao diện người dùng chất lượng sản xuất, có khả năng truy cập và phản hồi. Sử dụng khi xây dựng hoặc sửa đổi giao diện và trang, tạo thành phần, triển khai bố cục, đáp ứng yêu cầu truy cập WCAG, quản lý trạng thái, hoặc khi đầu ra cần trông và cảm nhận chất lượng sản xuất thay vì do AI tạo ra.

agent-skills/skills/git-workflow-and-versioning

Cấu trúc các thực hành quy trình làm việc git. Sử dụng khi thực hiện bất kỳ thay đổi mã nào. Sử dụng khi commit, tạo nhánh, giải quyết xung đột, hoặc khi bạn cần tổ chức công việc trên nhiều luồng song song. Sử dụng khi cắt một bản phát hành, chọn mức tăng phiên bản ngữ nghĩa, gắn thẻ, hoặc viết changelog.

agent-skills/skills/idea-refine

Tinh chỉnh các ý tưởng thô thành các khái niệm sắc bén, có thể hành động thông qua tư duy phân kỳ và hội tụ có cấu trúc. Sử dụng khi một ý tưởng còn mơ hồ, khi bạn cần kiểm tra độ căng của các giả định trước khi cam kết với một kế hoạch, hoặc khi bạn muốn mở rộng các lựa chọn trước khi hội tụ vào một. Kích hoạt bởi "ideate", "refine this idea", hoặc "stress-test my plan".

agent-skills/skills/incremental-implementation

Phân phối các thay đổi một cách tăng dần. Sử dụng khi triển khai bất kỳ tính năng hoặc thay đổi nào ảnh hưởng đến nhiều hơn một tệp. Sử dụng khi bạn chuẩn bị viết một lượng lớn mã cùng một lúc, hoặc khi một nhiệm vụ có vẻ quá lớn để hoàn thành trong một bước.

agent-skills/skills/interview-me

Trích xuất điều người dùng thực sự muốn thay vì điều họ nghĩ họ nên muốn. Đạt được điều này thông qua phỏng vấn từng câu hỏi một cho đến khi đạt ~95% độ tin cậy về ý định cơ bản. Sử dụng khi yêu cầu chưa được xác định rõ ("xây cho tôi X" mà không có "cho ai" hoặc "tại sao bây giờ"), khi người dùng yêu cầu một cách tường minh ("phỏng vấn tôi", "hỏi vặn tôi", "chúng ta có chắc không?", "kiểm tra áp lực suy nghĩ của tôi"), hoặc khi bạn nhận ra mình đang âm thầm điền vào các yêu cầu mơ hồ trước khi có bất kỳ kế hoạch, đặc tả hoặc mã nào tồn tại.

agent-skills/skills/observability-and-instrumentation

Mã hóa công cụ để hành vi sản xuất có thể nhìn thấy và chẩn đoán được. Sử dụng khi thêm ghi nhật ký, số liệu, theo dõi hoặc cảnh báo. Sử dụng khi triển khai bất kỳ tính năng nào chạy trong sản xuất và bạn cần bằng chứng nó hoạt động. Sử dụng khi có báo cáo sự cố sản xuất nhưng bạn không thể biết chuyện gì đã xảy ra từ dữ liệu có sẵn.

web-quality-skills/skills/performance

Tối ưu hiệu suất web để tải nhanh hơn và cải thiện trải nghiệm người dùng. Sử dụng khi được yêu cầu "tăng tốc trang web của tôi", "tối ưu hiệu suất", "giảm thời gian tải", "sửa tải chậm", "cải thiện tốc độ trang" hoặc "kiểm tra hiệu suất".

agent-skills/skills/performance-optimization

Tối ưu hóa hiệu suất ứng dụng trên frontend, backend, truy vấn và cơ sở dữ liệu. Sử dụng khi có yêu cầu về hiệu suất, khi nghi ngờ có suy giảm hiệu suất, khi cần cải thiện Core Web Vitals hoặc thời gian tải, khi cần sửa các mẫu truy vấn N+1, hoặc khi hồ sơ hiệu suất phát hiện điểm nghẽn.

agent-skills/skills/planning-and-task-breakdown

Chia công việc thành các tác vụ có thứ tự. Sử dụng khi bạn có đặc tả hoặc yêu cầu rõ ràng và cần chia công việc thành các tác vụ có thể thực hiện được. Sử dụng khi một tác vụ có vẻ quá lớn để bắt đầu, khi bạn cần ước lượng phạm vi, hoặc khi có thể thực hiện song song.

agent-skills/skills/security-and-hardening

Tăng cường bảo mật mã nguồn chống lại các lỗ hổng. Sử dụng khi xử lý đầu vào người dùng, xác thực, lưu trữ dữ liệu hoặc tích hợp bên ngoài. Sử dụng khi xây dựng bất kỳ tính năng nào chấp nhận dữ liệu không đáng tin cậy, quản lý phiên người dùng hoặc tương tác với dịch vụ bên thứ ba.

web-quality-skills/skills/seo

Tối ưu hóa khả năng hiển thị và thứ hạng trên công cụ tìm kiếm. Sử dụng khi được yêu cầu "cải thiện SEO", "tối ưu hóa cho tìm kiếm", "sửa thẻ meta", "thêm dữ liệu có cấu trúc", "tối ưu hóa sơ đồ trang web" hoặc "tối ưu hóa công cụ tìm kiếm".

agent-skills/skills/shipping-and-launch

Chuẩn bị cho việc ra mắt sản phẩm. Sử dụng khi chuẩn bị triển khai lên môi trường production. Sử dụng khi bạn cần danh sách kiểm tra trước khi ra mắt, khi thiết lập giám sát, khi lên kế hoạch triển khai theo giai đoạn, hoặc khi bạn cần chiến lược rollback.

agent-skills/skills/source-driven-development

Căn cứ mọi quyết định triển khai vào tài liệu chính thức. Sử dụng khi bạn muốn mã nguồn có thẩm quyền, được trích dẫn nguồn và không có các mẫu lỗi thời. Sử dụng khi xây dựng với bất kỳ framework hoặc thư viện nào mà tính chính xác là quan trọng.

agent-skills/skills/spec-driven-development

Tạo đặc tả trước khi viết mã. Sử dụng khi bắt đầu một dự án mới, tính năng mới hoặc thay đổi quan trọng và chưa có đặc tả nào tồn tại. Sử dụng khi yêu cầu chưa rõ ràng, mơ hồ hoặc chỉ tồn tại dưới dạng ý tưởng mơ hồ.

agent-skills/skills/test-driven-development

Thúc đẩy phát triển bằng các bài kiểm tra. Sử dụng khi triển khai bất kỳ logic nào, sửa bất kỳ lỗi nào hoặc thay đổi bất kỳ hành vi nào. Sử dụng khi bạn cần chứng minh mã hoạt động, khi có báo cáo lỗi hoặc khi bạn sắp sửa đổi chức năng hiện có.

agent-skills/skills/using-agent-skills

Phát hiện và gọi kỹ năng tác nhân. Sử dụng khi bắt đầu một phiên làm việc hoặc khi bạn cần phát hiện kỹ năng nào phù hợp với tác vụ hiện tại. Đây là kỹ năng siêu cấp điều chỉnh cách tất cả các kỹ năng khác được phát hiện và gọi.

web-quality-skills/skills/web-quality-audit

Kiểm tra chất lượng web toàn diện bao gồm hiệu suất, khả năng tiếp cận, SEO và các phương pháp tốt nhất. Sử dụng khi được yêu cầu "kiểm tra trang web của tôi", "đánh giá chất lượng web", "chạy kiểm tra lighthouse", "kiểm tra chất lượng trang" hoặc "tối ưu hóa trang web của tôi".