איך בוט הביקורת של Modern Web Guidance עוזר ל-MetaMask להשיק ממשק משתמש מודרני ונגיש

Gilberto Cocchi

Rick Viscomi

תאריך פרסום: 10 בנובמבר 2026

‫MetaMask היא פלטפורמה פיננסית בניהול עצמי עם יותר מ-100 מיליון הורדות בכ-190 מדינות. תוסף הדפדפן שלה מפותח באופן פתוח, כך שזרם קבוע של בקשות משיכה מגיע מתורמים בתוך החברה ומחוצה לה.

פרנסיס נפומוסנו, מהנדס UX ב-MetaMask, בדק הרבה מבקשות ה-pull האלה ורצה למצוא דרך עקבית לעזור לתורמים ליישם שיטות מומלצות לנגישות ולהשתמש בתכונות אינטרנט מודרניות. בעורך שלו, הוא כבר השתמש ב-Modern Web Guidance של Chrome, קבוצת מיומנויות שמספקת לסוכני תכנות שיטות מומלצות לפלטפורמת האינטרנט ונתוני תאימות לדפדפן. כדי להעביר את אותה הדרכה לתורמים אחרים, הוא הגדיר בוט שיבדוק כל בקשת משיכה למאגר הקוד הפתוח של MetaMask, בלי קשר לכלים שבהם השתמשו היוצרים.

האתגר: להתעדכן בתכונות החדשות של האינטרנט המודרני

ב-HTML וב-CSS המודרניים נוספים כל הזמן פיצ'רים שמשפרים את הנגישות ואת חוויית המשתמש, וקשה לעקוב אחרי הפיצ'רים שפועלים בדפדפנים שונים. כשיש הרבה תורמים, הידע הזה צריך להגיע לכל מי שפותח בקשת משיכה.

אבטחה היא סיבה נוספת: MetaMask מבודדת כל תלות של צד שלישי כברירת מחדל, מה שהופך את התכונה המקורית של הדפדפן לזולה יותר לאימוץ מאשר חלופה של ספרייה. כמו שנפומסנו אמר, "הגישה לממשקי ה-API המודרניים האלה, כמו היכולת להשתמש בתיבות דו-שיח ובתפריטים נפתחים בלי JavaScript, הייתה ניצחון גדול".

הפתרון: Modern Web Guidance בודק כל בקשת משיכה

ב-16 בספטמבר 2026, בקשת משיכה אל MetaMask/metamask-extension הוסיפה דף "איך זה עובד" עם שאלות נפוצות שנבנו כמו רוב השאלות הנפוצות של React:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

אחרי כחמש דקות, הבוט הגיב. בהתבסס על המדריך של search-hidden-content, הוא ציין שלוש נקודות:

• עיבוד מותנה של כל תשובה מסיר אותה מה-DOM, כך שלא ניתן למצוא טקסט מכווץ באמצעות החיפוש בדף של הדפדפן, וקשה יותר לגלות אותו באמצעות טכנולוגיה מסייעת.
• Baseline (מאז 2020) – רכיב גילוי נאות מקורי של <details>/<summary> שומר את התוכן ב-DOM עם הסמנטיקה הנכונה. אם יש לכם חלוניות שמוציאות זו את זו, מאפיין name משותף (זמין ב-Baseline החל מ-2024) סוגר את האחרות באופן אוטומטי. אם יש לכם שאלות נפוצות עם כמה חלוניות פתוחות, אל תשתמשו במאפיין הזה.
• אם הצוות מעדיף את רכיב Disclosure הקיים, הוא צריך לפחות לשמור את התשובות ב-DOM עם hidden="until-found" ומאזין beforematch שמסנכרן את aria-expanded ואת מצב הסמל.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

אחרי 13 דקות, מחבר החבילה הוציא תיקון. הרכיב הפך לחשיפה מקורית של <details>/<summary>, התשובות המכווצות נשארו ב-DOM לחיפוש בדף, ושני לחצני ניווט הפכו לקישורים.

הבוט הזה הוא Cursor Automation שמריץ את Modern Web Guidance, ו-Nepomuceno הגדיר אותו באמצעות הנחיה בת שלוש שורות. עד 21 באוקטובר 2026, חמישה שבועות אחרי ההשקה:

• הבוט פעל על כ-480 בקשות משיכה והגיב על 64 מהן (57 בקשות משיכה של תכונות ותיקונים, ו-7 בקשות משיכה אוטומטיות של פרסום וסנכרון) מ-26 מחברים.
• בבקשות ה-pull של התכונות והתיקונים, מהנדסי התוכנה תיקנו 43 מהממצאים, ותיקנו באופן חלקי 3 ממצאים נוספים, ב-22 בקשות משיכה (pull request).
• המהנדסים פעלו במהירות: מתוך 38 התיקונים עם commit שניתן לזיהוי, 19 הגיעו תוך 15 דקות ו-26 תוך שעה, עם חציון של 15.2 דקות מהתגובה לתיקון.

כך MetaMask הגדירה את הבוט, מה הוא תפס ואיפה הוא היה רועש.

ההגדרה היא הנחיה בת שלוש שורות

כשנשאל איך האוטומציה מוגדרת, נפומוסנו ענה: "אין שום דבר מיוחד בהגדרה שלנו. אנחנו פשוט שומרים על תמציתיות ומתמקדים בנושא". ההוראה המלאה:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

איך זה עובד בפועל:

• הוא מייעץ: ביומיים הראשונים שלו, הבוט פרסם ביקורות עם "בקשות לשינויים" (ואישור אחד), שהמחברים התעלמו מהן אחרי שהתייחסו אליהן. מאז 18 בספטמבר, כל ביקורת היא תגובה. הוא לא חוסם מיזוג, כך שהמחברים הם אלה שמחליטים לגבי כל הצעה.
• הוא מצטט מדריכים וקבצים ספציפיים במאגר: ב-64 בקשות ה-pull שעליהן הוא הגיב, הבוט העלה 122 ממצאים. מתוך 102 בקשות ה-Pull של התכונות והתיקונים, 63 מציינות את המדריך הספציפי של Modern Web Guidance שהן מיישמות, כמו search-hidden-content, state-aware-sticky-headers, או sms-otp-form, ומפנות לקובץ קיים במאגר כשהוא כבר משתמש בתבנית המומלצת.
• הוא נשאר שקט אלא אם בקשת משיכה נוגעת בממשק המשתמש: מתוך כ-480 בקשות המשיכה בחמשת השבועות האלה, לפחות 100 נגעו בממשק המשתמש או בקוד הלקוח, והבוט מצא בממוצע כשני ממצאים לכל בקשת משיכה שהוא הגיב עליה. צוותים עם מאגרים שרובם של ממשק משתמש יכולים לצפות שהכלי יגיב על חלק גדול יותר.

ההנחיה עצמה פועלת עם כל סוכן. אפשר להתקין את Modern Web Guidance כמיומנות או כפלאגין ל-Cursor, ל-Claude Code, ל-Codex, ל-GitHub Copilot, ל-Antigravity ולסוכני תכנות אחרים. כשהסוכן מפעיל את המיומנות, הוא מחפש את המדריכים התואמים באינדקס מקומי בלי צורך במפתחות API, ובודק את ההבדלים ביניהם באמצעות המודל שכבר מסופק על ידי מפעיל הסוכנים של הצוות.

מה Modern Web Guidance זיהה שכלי ניתוח קוד סטטי לא זיהו

כלי סטטי לניתוח קוד יכול לסמן מאפיין חסר ברכיב בודד, אבל הממצאים הבאים קשורים להתנהגות האינטראקציה, לסמנטיקה של HTML ולאופן שבו הרכיבים משתלבים בקבצים.

שדה של עמלה על עסקאות שנראה שאפשר לערוך אותו, אבל המערכת מתעלמת מהקלט בלי להודיע על כך

בהגדרות המתקדמות של עמלות על עסקאות ב-MetaMask, השדה של מגבלת הגז (שמגביל את עמלת הרשת שעסקה יכולה לצרוך) נראה כאילו אפשר לערוך אותו, אבל הוא התעלם מהקלט של המשתמשים בלי להודיע על כך. זה קרה כשהערכת העמלה עדיין נטענה או נכשלה. בינתיים, הכפתור "שמירה" הושבת, בלי הסבר שהטכנולוגיה המסייעת יכולה לקרוא.

בהתאם למדריך הטפסים, הבוט סימן שלושה תיקונים:

• משביתים את השדה של מגבלת הגז כשאין אומדן זמין, ומחברים את טקסט הסטטוס הגלוי שלו לשדה כדי שהטכנולוגיה המסייעת תקרא את ההסבר.
• מקשרים את הלחצן "שמירה" המושבת לאותו טקסט סטטוס, כדי שקוראי המסך ידעו למה הוא מושבת.
• מעבירים את השדה למצב קלט מספרי כדי שמשתמשים בנייד יקבלו לוח מקשים מספרי.

המחבר החיל את כל שלושת התיקונים בשני המודלים של ההגדרות ואיחד אותם לרכיב אחד.

כפתורים בבאנר שהסתירו את כתובות ה-URL שלהם

בבאנר סטטוס של אחת מתכונות המסחר של MetaMask, הפעולות המוטבעות "שאלות נפוצות" ו"יצירת קשר עם התמיכה של MetaMask" נבנו כלחצנים שפתחו כרטיסייה חדשה באמצעות JavaScript במקום כקישורים. תוך שלוש דקות, הבוט – תוך ציטוט של המדריכים בנושא HTML ונגישות – סימן שקוראי מסך מכריזים עליהם כלחצנים, ושהמשתמשים מאבדים את האפשרויות של הקישורים, כמו העתקת כתובת ה-URL או פתיחה שלה בכרטיסייה חדשה מתפריט ההקשר. הוא גם הצביע על רכיב באנר קיים בבסיס הקוד של MetaMask שכבר מעבד את הפעולות האלה כקישורים אמיתיים.

אחרי 12 דקות, המחבר החליף את שתי הפעולות בקישורים. "אני מוצאת שזה מאוד שימושי שברגע שהנחיה אומצה, ביקורות עתידיות מזכירות את זה כדוגמה להתייחסות", אמרה נפומוסנו.

שדות קלט לאימות שהתוויות שלהם היו במקום אחר

היכולת של הבוט לקרוא קבצים שונים גם עזרה לו למלא טופס עם כמה שלבים. כלי סטטי לניתוח קוד רואה רק שדה טקסט עם טקסט לדוגמה בתוך כל שלב, ולא יכול לזהות שהכותרת וההוראות שמוצגות נמצאות ברכיב של פריסת אם. בהתבסס על המדריכים בנושא טפסים ונגישות, הבוט זיהה שהפלייסהולדר היה התווית היחידה של השדה, שכותרת השלב וההוראות בפריסת האם לא היו משויכות לקלט, ושהודעות השגיאה וההודעות על שליחה חוזרת של הקוד לא הוקראו על ידי קוראי מסך. אחרי 15 דקות, כל שלושת הבאגים תוקנו, והחיווט של הנגישות נשאר ללא שינוי כשבקשת משיכה (pull request) נוספת שינתה את הסגנון של קלט הקוד לשישה ריבועים חזותיים של ספרות.

עוד כמה דברים שהבוט זיהה

חמישה ממצאים נוספים מאותה תקופה של חמישה שבועות:

• פרט CSS שהמהנדס שמאחורי הבוט פספס: בקשת ה-pull של נפומוסנו עצמו לכרטיסיות בית דביקות הכילה שאילתות מצב גלילה של CSS בלי לתת שמות לקונטיינרים שלהן, והחליפה גבול באופן ששינה את הפריסה באמצע הגלילה. הבוט ציטט את המדריך לכותרות עליונות קבועות שמותאמות למצב, והוא תיקן את שתי הבעיות. הוא מצא שהביקורות עזרו לו עם שאילתות לגבי מיקום העוגן ומצב הגלילה.
• הגבלת החריגה באמצע ההקלדה: קלט מותאם אישית של חריגה (תנועת המחיר שמשתמש מוכן לסבול בעסקה) הגביל ערכים מעל 100% בכל הקשה, והפך את 101 ל-100 בזמן שהמשתמש עדיין הקליד. בהתאם למדריך בנושא טפסים, התיקון העביר את האימות למצב שבו השדה מאבד את המיקוד, והוסיף באנר אזהרה גלוי.
• אינדיקטור טעינה שקוראי מסך לא יכלו להשתמש בו: תווית ה"טעינה" של שלד טעינה של רשימת אסימונים הופיעה ברכיב גנרי ללא תפקיד, וזה אסור לפי ARIA. הבוט הצביע על שני רכיבים בבסיס הקוד שכבר השתמשו בתבנית של MetaMask לקורא מסך בלבד (שניהם עודכנו אחרי בדיקה של Modern Web Guidance שישה ימים לפני כן), והמחבר התאים את השלד לתבנית הזו שמונה דקות לאחר מכן.
• פעולה אסינכרונית לא מוגנת: לכפתור אסינכרוני של "הצגה אצל הספק" לא הייתה הגנה בזמן הפעולה, ולכן לחיצה כפולה יכלה לפתוח כרטיסיות כפולות וצופים ברקע. המחבר הוסיף שומר פחות מארבע דקות אחרי התגובה.
• אימות הקשות ללא טופס: דף ייבוא NFT אימת כל הקשה, ולא היה בו רכיב <form> לסמנטיקה של שליחה. שני המקרים טופלו תוך 19 דקות מרגע הבדיקה.

כל הביקורות גלויות לכולם. התגובות המלאות של הבוט מופיעות בכל בקשת משיכה מקושרת, ואפשר לעיין בכולן ב-GitHub.

מה לא תוקן ומה רמת הרעש

לא כל הממצאים נחתו. בטבלה הבאה מוצג איך MetaMask ספרה את 102 הממצאים בבקשות משיכה של תכונות ותיקונים (20 נוספים הגיעו ל-7 בקשות משיכה של גרסאות וסנכרון, שבהן בדיקה לא צפויה לשנות את הקוד):

פירוט לפי נושאים של כל 122 הממצאים (כולל 20 הממצאים בבקשות המשיכה של הגרסה והסנכרון):

כמה דפוסים במספרים האלה:

• תיקונים שמתבצעים בתוך רכיב אחד מתקבלים לעיתים קרובות יותר מאשר שינויי נגישות רוחביים. תיקונים של טפסים ו-HTML נשארים בתוך הרכיב שנבדק, ולכן בדרך כלל היוצרים מיישמים אותם מיד (19 מתוך 31 תוקנו). בנושא הנגישות היו הכי הרבה ממצאים (38), אבל רק 12 תוקנו, בדרך כלל כי התיקון היה מחוץ להיקף של בקשת משיכה (pull request) או שהיה צורך ברכיב משותף של מערכת העיצוב שעדיין לא היה קיים.
• הקטגוריה "אחר" כוללת את כל מה שלא קשור להנחיות של פלטפורמת האינטרנט. 16 מהממצאים עסקו בעקביות של מערכת העיצוב, באגים לוגיים, העתקה, איכות הבדיקה, מצב כהה והיגיינת קוד. 3 מהם טופלו, אחד מהם היה רגרסיה אמיתית (שינוי ברשימת הרשת שגרם לתקלה במילוי האוטומטי של הטופס). רוב 16 הבעיות האלה היו זניחות, אבל זיהוי הרגרסיה הזו הצדיק את הבדיקה המהירה.
• התוצאות החיוביות הכוזבות נבעו מהאופן שבו הנציג יישם את המדריכים, ואפשר לתקן את רוב הרעש בהגדרה. מכיוון שהבוט לבדיקת קוד הוא סוכן שקורא השוואה ולא linter סטטי, התוצאות החיוביות השגויות שלו נבעו מקריאה שגויה של הקוד שמסביב או מהחלת כלל בצורה מחמירה יותר מהמדריך המקושר. ההתאמות הבאות שצריך לעשות הן לדלג על ענפי ההפצה והסנכרון, ולנסח הנחיה מדויקת יותר כדי שהסוכן יפעל לפי הכללים שצוינו במפורש במדריך.

נפומוסנו מתאר את ההשפעה הרחבה יותר על הצוות ועל זמן הטיפול בבדיקות:

דיוויד מרדוק, מהנדס ב-MetaMask, תרם גם להנחיות עצמן: כשהייתה שגיאה באחת הדוגמאות במדריך לפריסת CSS, הוא דיווח על בעיה, והצוות של Modern Web Guidance מיזג תיקון יומיים לאחר מכן.

מה הצוות של MetaMask היה אומר לצוות ששוקל להשתמש ב-Gemini

• לפני שכותבים משהו, חשוב לקרוא את ההנחיות. מריצים את npx modern-web-guidance@latest search "accordion find in page" כדי לראות אילו מדריכים הסוכן יאחזר למשימה. אתם יכולים גם לעיין במדריכים המלאים של Modern Web Guidance.
• מתחילים עם ההנחיה בת שלוש השורות והסוכן שכבר מופעל. מתקינים את המיומנות (npx modern-web-guidance@latest install, או פקודת פלאגין של סוכן), מכוונים אליה את כל מה שיכול לפעול על בקשות משיכה, ואומרים לה להגיב רק כשיש משהו שניתן לפעול לפיו ולהיצמד לכללים שמצוינים במפורש במדריך. המהנדסים של MetaMask עדיין קוראים את התגובות של הבוט, כי הוא שומר על שקט כשאין בעיות.
• יכול להיות שחלק מהממצאים לא יטופלו. מתוך 102 ממצאים בבקשות משיכה של תכונות ותיקונים, 43 תוקנו ו-36 נדחו או לא טופלו. היחס הזה מתאים לבוט שמבצע בדיקה מייעצת, אבל הוא עלול להפריע אם הוא משמש לבדיקה חוסמת.
• בודקים אנושיים ממשיכים לבדוק. הבוט מבין היטב את הסמנטיקה של פלטפורמת האינטרנט, CSS מודרני ודפוסי אינטראקציה, אבל הוא לא מכיר את המוצר.

יש גם דברים ש-MetaMask עדיין לא מדדה: אחרי חמישה שבועות, הצוות לא עקב אחרי העלות לכל בקשת משיכה, זמן הריצה, השוואות בין מודלים או איך הבוט לבדיקת קוד מתנהג מחוץ לבסיס קוד של React.

באמצעות שלוש שורות של הגדרות אישיות, MetaMask קיבלה בוט לבדיקה שמצטט מדריך ספציפי לרוב הממצאים (ודוגמה קיימת במאגר, אם יש כזו). ההצעות שמתקבלות בדרך כלל מתוקנות תוך שעה.