גלה יכולות. שלח כל פרויקט מהר יותר.

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

רשימת פסילה של קלישאות ויזואליות, תבניות פריסה ודפוסי ממשק שגורמים לפרונטאנד להיראות מיוצר בבינה מלאכותית. הפעילו את הסקיל הזה תמיד לצד frontend-design בכל בנייה של פרונטאנד — אתרים, עמודי נחיתה, לוחות מחוונים, רכיבי React, עמודי HTML או כל ממשק ויזואלי. הפעילו גם כשאומרים "שייראה פחות כמו בינה מלאכותית", "זה נראה גנרי", "שלא ייראה כמו כל אתר AI אחר", או כשסוקרים פלט פרונטאנד. זו רשימת השלמה של מה שאסור לעשות לעולם — הסקיל frontend-design מטפל במה שכן צריך לעשות.

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

בניית סצנות תלת-ממד אינטראקטיביות לרשת באמצעות Three.js r128. השתמשו בסקיל הזה רק כשאתם מבקשים במפורש תלת-ממד — מציגי מוצר, רקעי גיבור בתלת-ממד, גאומטריה אינטראקטיבית, סצנות חלקיקים או תנועת מצלמה מונעת גלילה. אל תפעילו אותה לאתרים דו-ממדיים רגילים, לאנימציות CSS או לגרפיקת SVG. מילות הפעלה: תלת-ממד, three.js, WebGL, סצנת תלת-ממד, מציג מוצר, רקע תלת-ממד, תלת-ממד אינטראקטיבי, מודל מסתובב, מערכת חלקיקים, חוויית תלת-ממד.

כללי חוויית שימוש מדידים, קטלוג סגנונות ממשק, הנחיות לפי תעשייה ורשימת בדיקה לפני מסירה, לכל פרויקט פרונטאנד. הפעילו את הסקיל הזה תמיד לצד frontend-design בבניית אתרים, עמודי נחיתה, לוחות מחוונים, אפליקציות, רכיבי React או כל ממשק אינטראקטיבי. הפעילו גם כשמזכירים "חוויית שימוש", "שימושיות", "נגישות", "WCAG", "רספונסיבי", "ידידותי למובייל", "דפוסי ממשק" או "רשימת בדיקה", או כשמבקשים לבדוק ולשפר את השימושיות של פרונטאנד. הסקיל מספק את המספרים הקשיחים — גדלים מינימליים, יחסי ניגודיות, ערכי תזמון וכללי מרווח.

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

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

שיטות עבודה מומלצות ל-SEO לאפליקציות React + Vite + Tailwind CSS שנבנו ב-sticklight.com. השתמשו בבנייה או בסקירה של עמודי ווב, בכתיבת תוכן לרשת, ביצירת תגי מטא, בשיפור דירוגי חיפוש, בהגדרת מפת אתר או robots.txt, בהוספת נתונים מובנים (JSON-LD) או באופטימיזציית תמונות וביצועים. מכסה: תגי מטא סטטיים, ‏SEO דינמי עם ‎@unhead/react, ההוק useSEO, מפות אתר, HTML סמנטי, היררכיית כותרות, SEO לתמונות, מבנה כתובות, ‏Core Web Vitals, מפרטי favicon ותמונות OG, עיצוב מובייל-פירסט ואינטגרציית IndexNow.

דפוסי אימות והרשאות לאפליקציות React + Vite + Tailwind עם Cloud Backend‏ (Supabase). השתמשו במימוש התחברות, הרשמה, איפוס סיסמה, ניהול סשן, נתיבים מוגנים, אבטחה ברמת השורה (RLS), בקרת גישה מבוססת תפקידים או טבלאות נתוני משתמשים. מכסה: טבלת פרופילים עם טריגר יצירה אוטומטית, טבלת user_roles, ‏AuthContext עם getUser(), רכיב ProtectedRoute, עמודי אימות מלאים, התנתקות, נתונים בבעלות משתמש עם מדיניות RLS, ושיטות עבודה מומלצות לאבטחה.

מערכת עיצוב מובייל-פירסט לבניית אפליקציות iOS ו-Android עם React Native, Flutter או פריימוורקים נייטיב. מכסה אינטראקציית מגע, ביצועים, מוסכמות פלטפורמה ואיכות ויזואלית. מונעת אסתטיקת מובייל גנרית של בינה מלאכותית (עודף כפתורי גלולה, שכבות גלסמורפיזם, מקטעי גיבור עם גרדיאנט, רשתות כרטיסי מדדים) ואוכפת ממשק פונקציונלי בעיצוב אנושי. השתמשו בכל בנייה של אפליקציית מובייל, רכיב מובייל, מסך React Native, ווידג׳ט Flutter או ממשק מובייל — גם אם לא אמרתם "מערכת עיצוב מובייל". הפעילו גם כשסוקרים קוד מובייל לבעיות חוויית שימוש או ביצועים.

אופטימיזציה של Core Web Vitals לאפליקציות Sticklight מבוססות React+Vite+Tailwind. השתמשו כשאתם מבקשים לשפר מהירות טעינה, ציוני Lighthouse, ‏LCP/FCP/CLS/INP/TBT, או לתקן עמודים איטיים או שבורים אחרי רענון. מכסה תמונות, גופנים, סקריפטים, אנימציית CSS, מאזינים וגודל חבילה.

מדריך ליצירה ולשיפור של סקילי משתמש ב-Sticklight (הנחיות ייעודיות שנשמרות בעורך הסקילים). השתמשו כשאתם רוצים להוסיף סקיל חדש, לכתוב מחדש תוכן של סקיל, לכוונן תיאורים כדי שיופעלו טוב יותר, או להעביר רעיונות ממסמכי סקילים מבוססי קבצים לפורמט של Sticklight.

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

בניית לוח ניהול חי ל-WooCommerce/WordPress: ניהול מוצרים, הזמנות וקטגוריות עם נתוני חנות אמיתיים. הפעילו כשאתם רוצים פאנל ניהול, לוח מחוונים או בק-אופיס לניהול חנות WordPress או WooCommerce — לא חזית חנות ציבורית.