Skills Emilkowalski

skills/skills/animate

Xây dựng một hoạt ảnh từ đầu, đưa ra các quyết định theo thứ tự quyết định liệu nó có cảm giác đúng hay không — liệu nó có nên hoạt ảnh không, mục đích gì, công cụ nào, thuộc tính nào, đường cong và thời lượng nào, cách nó ngắt quãng, cách nó thoát. Viết phần triển khai. Sử dụng khi được yêu cầu tạo hoạt ảnh cho một thứ gì đó, thêm chuyển động, làm cho một thành phần trở nên sống động, hoặc xây dựng một chuyển tiếp. Để phê bình chuyển động hiện có, sử dụng review-animations; để kiểm tra toàn bộ mã nguồn, sử dụng improve-animations.

skills/skills/animation-vocabulary

Từ điển tra ngược giúp chuyển đổi mô tả mơ hồ về một hiệu ứng hoạt hình hoặc chuyển động trên web thành thuật ngữ chính xác ("hiệu ứng nảy khi cửa sổ popover mở ra" → Pop in; "hiệu ứng cuộn đàn hồi kiểu iOS" → Rubber-banding). Sử dụng khi người dùng hỏi "hiệu ứng đó gọi là gì khi…", hoặc mô tả một hiệu ứng chuyển động mà không biết tên của nó và muốn có từ ngữ chính xác để gợi ý cho AI hoặc nhà thiết kế. Dùng để đặt tên cho hiệu ứng, không phải để thiết kế hay xây dựng hiệu ứng.

skills/skills/apple-design

Cách tiếp cận của Apple về thiết kế giao diện và chuyển động vật lý mượt mà, được chuyển thể cho web. Sử dụng khi xây dựng hoặc đánh giá giao diện điều khiển bằng cử chỉ, hoạt ảnh lò xo, tương tác kéo/vuốt/bảng, động lượng và chuyển tiếp có thể ngắt, vật liệu trong suốt và chiều sâu, kiểu chữ (cỡ chữ quang học, tracking, leading), chế độ giảm chuyển động, hoặc các nền tảng thiết kế (phản hồi, nhất quán không gian, tiết chế) đằng sau giao diện kiểu Apple.

skills/skills/ask-sonner

Hướng dẫn về Sonner, thư viện toast của React — cài đặt và kết nối Toaster, chọn đúng lệnh gọi toast(), toast promise và loading, cập nhật, đóng và duy trì toast, tạo kiểu, chủ đề và biểu tượng, định vị và nhiều toaster. Sử dụng khi làm việc với Sonner hoặc khắc phục sự cố — toast không xuất hiện, xuất hiện hai lần, mất kiểu dáng, bỏ qua lớp Tailwind, nằm sau modal, hoặc không theo chế độ tối.

skills/skills/emil-design-eng

Kỹ năng này mã hóa triết lý của Emil Kowalski về sự tinh tế trong giao diện người dùng, thiết kế thành phần, quyết định về hoạt ảnh và những chi tiết vô hình giúp phần mềm trở nên tuyệt vời.

skills/skills/find-animation-opportunities

Tìm kiếm trong mã nguồn hoặc giao diện người dùng những chỗ chưa có hoạt ảnh nhưng nên có, và loại bỏ mọi thứ không nên. Chỉ đọc; nó đề xuất chuyển động với giá trị chính xác, không triển khai. Dùng khi người dùng hỏi "chỗ nào có thể thêm hoạt ảnh ở đây?" hoặc muốn "làm cho nó sống động hơn". Để sửa hoạt ảnh hiện có, hãy dùng improve-animations hoặc review-animations thay thế.

skills/skills/improve-animations

Khảo sát mã nguồn hoạt ảnh và chuyển động của một codebase với tư cách cố vấn chuyển động cấp cao, sau đó tạo ra một bản kiểm toán ưu tiên và các kế hoạch triển khai độc lập để các tác nhân khác (hoặc các mô hình rẻ hơn) thực thi. Chỉ đọc mã nguồn — nó lập kế hoạch cải tiến, không áp dụng chúng. Sử dụng khi người dùng yêu cầu "cải thiện hoạt ảnh", "kiểm toán chuyển động", "làm cho ứng dụng này cảm thấy tốt hơn", hoặc muốn một lộ trình sửa lỗi hoạt ảnh thay vì đánh giá một bản diff đơn lẻ.

skills/skills/pick-ui-library

Chọn thư viện phù hợp cho một tác vụ frontend cụ thể từ danh sách được tuyển chọn, có chủ kiến — số, ô nhập OTP, biểu đồ, menu lệnh, ảo hóa, kéo và thả, thông báo toast, trạng thái, định kiểu, và hơn thế nữa. Chỉ chạy khi được gọi một cách tường minh; nó không tự kích hoạt.

skills/skills/prototype

Xây dựng nhiều phiên bản thực sự khác nhau của một phần giao diện bạn mô tả, hiển thị phía sau một bộ chọn trực quan để bạn có thể lướt qua chúng theo thời gian thực và chọn ra phiên bản phù hợp nhất. Chỉ chạy khi được gọi một cách tường minh; nó không tự động kích hoạt.

skills/skills/review-animations

Xem xét mã hoạt ảnh và chuyển động dựa trên tiêu chuẩn thủ công cao lấy từ triết lý kỹ thuật thiết kế của Emil Kowalski. Mặc định là gắn cờ; sự chấp thuận phải được kiếm được.