17 design skill แยกไว้ว่าตัวไหนใช้ตอนไหน

repo skill สาย design สองตัวที่คนแชร์กันเยอะช่วงนี้ รวมกัน 17 skill ดาวเกือบ 3 หมื่น

ปัญหาคือพอเปิดเข้าไปมันเป็นรายชื่อเปล่าๆ ไม่รู้ว่าตัวไหนไว้ใช้ตอนไหน เลยนั่งไล่อ่านแล้วจัดกลุ่มไว้ตามสถานการณ์

จะทำ animation ขึ้นมาใหม่

animate ไล่ตัดสินใจให้เป็นลำดับ ตั้งแต่คำถามแรกว่าอันนี้ควรมี animation ไหม ไปจนถึงเลือก property เลือก curve ตัวนี้แก้ปัญหาคนที่ใส่ transition มั่วๆ แล้วบอกไม่ได้ว่าทำไมมันดูแปลกemilkowalski/skillsGitHub ↗

animation-vocabulary เป็น glossary แบบย้อนกลับ อธิบายไปว่า "ไอ้ที่มันเด้งๆตอนเปิด popover" แล้วมันบอกกลับมาว่าอันนั้นเรียก Pop in ใครที่รู้ว่าอยากได้อะไรแต่เรียกชื่อไม่ถูก ตัวนี้ตรงมากemilkowalski/skillsGitHub ↗

apple-design เอาวิธีคิดเรื่อง motion แบบ Apple มาแปลงลงเว็บ พวก gesture spring drag sheetemilkowalski/skillsGitHub ↗

มี animation อยู่แล้ว อยากรู้ว่าห่วยตรงไหน

review-animations ตรวจ animation ที่เขียนไว้แล้วเทียบกับมาตรฐานงานคราฟต์ จุดที่ชอบคือ default ของมันคือ flag ไว้ก่อน ต้องพิสูจน์ตัวเองถึงจะผ่าน ไม่ใช่ผ่านไว้ก่อนแบบ tool ทั่วไปemilkowalski/skillsGitHub ↗

improve-animations ไล่สแกนทั้ง codebase แล้วออกมาเป็น audit เรียงลำดับความสำคัญ พร้อม plan ให้ agent ตัวถูกกว่าไปทำต่อได้emilkowalski/skillsGitHub ↗

find-animation-opportunities อันนี้กลับด้าน มันหาจุดที่ยังไม่มี animation แต่ควรมี แล้วก็ปฏิเสธจุดที่ไม่ควรมีด้วย อ่านอย่างเดียว ไม่แก้โค้ดให้emilkowalski/skillsGitHub ↗

interface-review ตัวนี้ไม่ได้รีวิวหน้าจอ แต่รีวิว "การเปลี่ยนแปลง" คือ diff ที่ยังไม่ commit หรือทั้ง PR แล้วแยกให้ด้วยว่าอันไหนพังเพราะรอบนี้ อันไหนพังมาตั้งแต่แรกjakubkrehel/skillsGitHub ↗

UI นิ่งๆ ที่ไม่เกี่ยวกับ motion

better-typography ตั้งแต่เลือกฟอนต์ จับคู่ฟอนต์ variable font type scale ไปจนถึงระยะบรรทัดjakubkrehel/skillsGitHub ↗

better-colors ทำงานบน OKLCH แปลงจาก hex ได้ สร้าง palette เช็ก contrast ต่อกับ Tailwind v4 ได้เลยjakubkrehel/skillsGitHub ↗

better-layout เรื่องการจัดกลุ่ม การจัดแนว ลำดับการอ่าน breakpointjakubkrehel/skillsGitHub ↗

better-accessibility focus state คีย์บอร์ด ARIA ฟอร์ม screen readerjakubkrehel/skillsGitHub ↗

better-writing ตัวหนังสือใน UI ทั้งหมด ปุ่ม error message placeholder empty state อันที่คนลืมบ่อยสุดjakubkrehel/skillsGitHub ↗

better-ui ตัวรวม หลักการทำให้ UI ดูเนียน พวก hover shadow border micro-interactionjakubkrehel/skillsGitHub ↗

better-interface ตัวคุมวง เรียก 6 ตัวข้างบนมารีวิวหน้าจอเดียวพร้อมกัน มีโหมดเร็วกับโหมดเต็มjakubkrehel/skillsGitHub ↗

ตัดสินใจไม่ได้

pick-ui-library เลือก library ให้ตามงาน มีลิสต์ที่คัดมาแล้วสำหรับ chart, command menu, OTP input, drag and drop, virtualizationemilkowalski/skillsGitHub ↗

prototype สร้าง UI หลายเวอร์ชันที่ต่างกันจริงๆ แล้ววางเรียงให้กดสลับดูสดๆ อันไหนถูกใจค่อยเลือกขึ้นมาใช้emilkowalski/skillsGitHub ↗

อ่านเอาวิธีคิด ไม่ได้ไว้สั่งงาน

emil-design-eng รวมวิธีคิดของ Emil เรื่อง polish การออกแบบ component และรายละเอียดเล็กๆที่ทำให้ของมันรู้สึกดีemilkowalski/skillsGitHub ↗

ของแถมที่ไม่ใช่ skill

desengs.com เป็นไดเรกทอรีรวม resource สาย design engineer มีคนอัปเดตอยู่เรื่อยๆ อันนี้คือแหล่งที่ควร bookmark ไว้มากกว่าจะจำเป็นชื่อๆDesEngs: Resources for Design EngineersCurated tools, articles, videos, communities, and inspiration for design engineers working across design and code.DesEngs ↗

vercel.com/design/engineer หน้าเดียวจบ ว่า Vercel นิยามตำแหน่งนี้ไว้ยังไงDesign Engineer PrinciplesPrinciples for design engineers at Vercel. Obsess over usefulness, own the whole experience, and make the team better.Vercel Design ↗

พูดตามตรง ในนี้โหลดมาจริงแค่ 2 ตัว ที่เหลือคืออ่านแล้วจัดกลุ่มไว้ให้ ใครลองตัวไหนแล้วเวิร์กมาเล่าให้ฟังหน่อย