Skills Emilkowalski

skills/skills/animate

สร้างแอนิเมชันตั้งแต่เริ่มต้น โดยตัดสินใจตามลำดับที่กำหนดว่ามันให้ความรู้สึกถูกต้องหรือไม่ — ควรจะมีการเคลื่อนไหวหรือไม่, มีวัตถุประสงค์อะไร, ใช้เครื่องมือใด, ใช้คุณสมบัติใด, ใช้ curve และระยะเวลาเท่าใด, จะขัดจังหวะอย่างไร, จะจบลงอย่างไร เขียนการนำไปใช้งาน ใช้เมื่อถูกขอให้สร้างแอนิเมชันบางอย่าง เพิ่มการเคลื่อนไหว ทำให้คอมโพเนนต์รู้สึกมีชีวิต หรือสร้างทรานซิชัน สำหรับการวิจารณ์การเคลื่อนไหวที่มีอยู่ให้ใช้ review-animations; สำหรับการตรวจสอบโค้ดเบสทั้งหมดให้ใช้ improve-animations

skills/skills/animation-vocabulary

พจนานุกรมค้นหาย้อนกลับที่เปลี่ยนคำอธิบายคลุมเครือของแอนิเมชันเว็บหรือเอฟเฟกต์การเคลื่อนไหวให้เป็นคำศัพท์ที่แน่นอน ("สิ่งกระเด้งเมื่อป๊อปโอเวอร์เปิด" → Pop in; "การเลื่อนแบบยางรัดของ iOS" → Rubber-banding) ใช้เมื่อผู้ใช้ถามว่า "มันเรียกว่าอะไรเมื่อ…" หรืออธิบายเอฟเฟกต์การเคลื่อนไหวโดยไม่รู้ชื่อ และต้องการคำที่ถูกต้องเพื่อบอก AI หรือนักออกแบบ สำหรับการตั้งชื่อเอฟเฟกต์ ไม่ใช่การออกแบบหรือสร้างขึ้นมา

skills/skills/apple-design

แนวทางการออกแบบอินเทอร์เฟซและการเคลื่อนไหวที่ลื่นไหลเป็นธรรมชาติของ Apple ที่ปรับใช้สำหรับเว็บ ใช้เมื่อสร้างหรือตรวจสอบ UI ที่ขับเคลื่อนด้วยท่าทางสัมผัส แอนิเมชันแบบสปริง การโต้ตอบแบบลาก/ปัด/แผ่น โมเมนตัมและการเปลี่ยนผ่านที่สามารถขัดจังหวะได้ วัสดุโปร่งแสงและความลึก การพิมพ์ (การปรับขนาดเชิงแสง การติดตาม ระยะนำ) การเคลื่อนไหวที่ลดลง หรือรากฐานการออกแบบ (การตอบกลับ ความสม่ำเสมอเชิงพื้นที่ ความยับยั้งชั่งใจ) ที่อยู่เบื้องหลังอินเทอร์เฟซสไตล์ Apple

skills/skills/ask-sonner

คู่มือสำหรับ Sonner ไลบรารี toast ของ React — ติดตั้งและเชื่อมต่อ Toaster เลือกการเรียกใช้ toast() ที่เหมาะสม toast แบบ promise และ loading การอัปเดต การปิด และการคง toast ไว้ การจัดสไตล์ การทำธีม และไอคอน การจัดตำแหน่งและ toaster หลายตัว ใช้เมื่อทำงานกับ Sonner หรือแก้ไขปัญหา — toast ที่ไม่แสดงผล แสดงซ้ำ สูญเสียสไตล์ ไม่สนใจ Tailwind classes อยู่ด้านหลัง modal หรือไม่เป็นไปตาม dark mode

skills/skills/emil-design-eng

ทักษะนี้เข้ารหัสปรัชญาของ Emil Kowalski เกี่ยวกับการตกแต่ง UI การออกแบบคอมโพเนนต์ การตัดสินใจเรื่องแอนิเมชัน และรายละเอียดที่มองไม่เห็นซึ่งทำให้ซอฟต์แวร์รู้สึกดี

skills/skills/find-animation-opportunities

ค้นหาโค้ดเบสหรือ UI เพื่อหาจุดที่ควรมีแอนิเมชันแต่ไม่มี และปฏิเสธทุกอย่างที่ไม่ควรมี อ่านอย่างเดียวเท่านั้น เสนอการเคลื่อนไหวพร้อมค่าที่แม่นยำ แต่ไม่ได้ลงมือปรับใช้ ใช้เมื่อผู้ใช้ถามว่า "ตรงไหนที่ควรทำแอนิเมชันได้บ้าง?" หรือต้องการ "ทำให้ดูมีชีวิตชีวามากขึ้น" สำหรับการแก้แอนิเมชันที่มีอยู่ ให้ใช้ improve-animations หรือ review-animations แทน

skills/skills/improve-animations

สำรวจโค้ดเบสด้านแอนิเมชันและโค้ดการเคลื่อนไหวในฐานะที่ปรึกษาด้านการเคลื่อนไหวระดับอาวุโส จากนั้นสร้างรายการตรวจสอบตามลำดับความสำคัญและแผนการดำเนินงานแบบครบวงจรให้กับเอเจนต์อื่น (หรือโมเดลที่ราคาถูกกว่า) นำไปปฏิบัติ อ่านได้อย่างเดียวจากซอร์สโค้ด — วางแผนการปรับปรุง แต่ไม่นำไปใช้ ใช้เมื่อผู้ใช้ขอให้ "ปรับปรุงแอนิเมชัน" "ตรวจสอบการเคลื่อนไหว" "ทำให้แอปนี้รู้สึกดีขึ้น" หรือต้องการแผนงานแก้ไขแอนิเมชันมากกว่าการตรวจสอบ diff เพียงครั้งเดียว

skills/skills/pick-ui-library

เลือกไลบรารีที่เหมาะสมสำหรับงาน frontend ที่กำหนดจากรายการที่คัดสรรมาแล้วอย่างมีหลักการ — ตัวเลข, ช่องกรอก OTP, กราฟ, เมนูคำสั่ง, virtualization, drag and drop, toasts, state, styling และอื่นๆ อีกมากมาย ทำงานเฉพาะเมื่อถูกเรียกใช้อย่างชัดเจนเท่านั้น ไม่ทำงานเองโดยอัตโนมัติ

skills/skills/prototype

สร้างเวอร์ชันที่แตกต่างกันอย่างแท้จริงหลายเวอร์ชันของชิ้นส่วน UI ที่คุณอธิบาย โดยแสดงผลไว้ด้านหลังตัวเลือกแบบภาพเพื่อให้คุณสามารถสลับดูได้แบบเรียลไทม์และเลื่อนระดับเวอร์ชันที่รู้สึกว่าเหมาะสมที่สุด ทำงานเฉพาะเมื่อถูกเรียกใช้อย่างชัดเจนเท่านั้น ไม่มีการทำงานเองโดยอัตโนมัติ

skills/skills/review-animations

ตรวจสอบโค้ดแอนิเมชันและการเคลื่อนไหวเทียบกับมาตรฐานงานฝีมือระดับสูงที่ได้จากปรัชญาวิศวกรรมการออกแบบของ Emil Kowalski โดยค่าเริ่มต้นจะตั้งค่าสถานะไว้ก่อน การอนุมัติต้องได้รับจากการพิสูจน์