diff --git a/wcag-accessibility-widget/SKILL.md b/wcag-accessibility-widget/SKILL.md
new file mode 100644
index 0000000..bae3156
--- /dev/null
+++ b/wcag-accessibility-widget/SKILL.md
@@ -0,0 +1,244 @@
+---
+name: wcag-accessibility-widget
+description: Build a self-hosted floating accessibility widget for Israeli websites — WCAG 2.1 AA / ת"י 5568 toggles (high contrast, font size, keyboard nav, readable font, heading/link markers), settings persisted in localStorage, applied as CSS classes on <html>. Use when building an accessibility widget, implementing Israeli accessibility law compliance (חוק שוויון זכויות לאנשים עם מוגבלות), creating an הצהרת נגישות page, or debugging position:fixed elements that break under CSS filter. Covers React/Next.js component architecture, RTL-safe toggle switches, CSS class strategy, and required accessibility declaration page content. Do NOT use for third-party accessibility overlay services (UserWay, AccessiBe) or non-Israeli WCAG audits.
+license: MIT
+compatibility: Works with React 18+ and Next.js 13+ (App Router). No external API or service required — fully self-hosted with localStorage. Compatible with Tailwind CSS projects. RTL/Hebrew layout aware.
+---
+
+# WCAG Accessibility Widget
+
+## Overview
+
+A self-hosted floating accessibility widget: a fixed button that opens a panel with toggles for common WCAG 2.1 AA features. Settings are persisted in `localStorage` and applied as CSS classes on `<html>`. No third-party service needed.
+
+---
+
+## WCAG 2.1 AA Checklist — What to Build
+
+Before touching any component, audit these items first:
+
+| Item | What to check / implement |
+|------|--------------------------|
+| **Skip link** | `<a href="#main-content">` in layout, visually hidden, visible on focus. Target `<main id="main-content" tabIndex={-1}>` |
+| **Alt text** | Every `<img>` has descriptive `alt`. Decorative images get `alt=""` + `aria-hidden="true"` |
+| **Color contrast** | Normal text ≥ 4.5:1, large text ≥ 3:1. Common fail: `text-gray-500` on dark bg (~3.9:1) → use `text-gray-400` |
+| **Keyboard navigation** | All interactive elements reachable by Tab. Test with keyboard only |
+| **ARIA labels** | `aria-label` on icon-only buttons, `aria-expanded` on toggles, `aria-label` on `<nav>` when multiple navs exist |
+| **Decorative elements** | Emoji, underline spans, SVG icons with adjacent text → `aria-hidden="true"` |
+| **Lang + dir** | `<html lang="he" dir="rtl">` (or your locale) on the root element |
+| **Mobile responsive** | Site usable on mobile without horizontal scroll |
+| **Accessibility declaration** | Required by Israeli law (חוק שוויון זכויות) — page at `/accessibility` |
+| **Privacy policy** | `/privacy-policy` listing exactly what data the form collects |
+
+---
+
+## Widget Architecture
+
+### 1. Settings type + CSS class map
+
+```ts
+type Settings = {
+  keyboardNav: boolean;
+  noAnimations: boolean;
+  highContrast: boolean;
+  textLarge: boolean;    // mutually exclusive with textSmall
+  textSmall: boolean;
+  readableFont: boolean;
+  markHeadings: boolean;
+  markLinks: boolean;
+};
+
+const CLASS_MAP: Record<keyof Settings, string> = {
+  keyboardNav:  "a11y-keyboard",
+  noAnimations: "a11y-no-anim",
+  highContrast: "a11y-contrast",
+  textLarge:    "a11y-font-lg",
+  textSmall:    "a11y-font-sm",
+  readableFont: "a11y-readable",
+  markHeadings: "a11y-headings",
+  markLinks:    "a11y-links",
+};
+```
+
+### 2. Apply classes to `<html>` + persist
+
+```ts
+useEffect(() => {
+  const html = document.documentElement;
+  (Object.keys(settings) as (keyof Settings)[]).forEach((key) => {
+    html.classList.toggle(CLASS_MAP[key], settings[key]);
+  });
+  localStorage.setItem("a11y", JSON.stringify(settings));
+}, [settings]);
+```
+
+### 3. Restore on mount
+
+```ts
+useEffect(() => {
+  try {
+    const saved = localStorage.getItem("a11y");
+    if (saved) setSettings(JSON.parse(saved));
+  } catch { /* ignore */ }
+}, []);
+```
+
+### 4. Close on Escape + outside click
+
+```ts
+useEffect(() => {
+  if (!isOpen) return;
+  const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setIsOpen(false); };
+  const onMouse = (e: MouseEvent) => {
+    if (!panelRef.current?.contains(e.target as Node) &&
+        !btnRef.current?.contains(e.target as Node)) setIsOpen(false);
+  };
+  document.addEventListener("keydown", onKey);
+  document.addEventListener("mousedown", onMouse);
+  return () => {
+    document.removeEventListener("keydown", onKey);
+    document.removeEventListener("mousedown", onMouse);
+  };
+}, [isOpen]);
+```
+
+### 5. Toggle switch component (RTL-safe)
+
+Use `transform: translateX()` — CSS transforms are always physical (not RTL-flipped):
+
+```tsx
+<span
+  aria-hidden="true"
+  className="absolute top-[3px] h-[18px] w-[18px] rounded-full bg-white shadow-sm transition-transform duration-200"
+  style={{ transform: `translateX(${active ? "21px" : "3px"})` }}
+/>
+```
+
+Track: `w-11 h-6` (44×24px). Thumb: 18×18px with 3px padding each side → on=21px, off=3px.
+
+---
+
+## CSS Modes (globals.css)
+
+```css
+/* Keyboard nav */
+html.a11y-keyboard *:focus,
+html.a11y-keyboard *:focus-visible {
+  outline: 3px solid var(--red) !important;
+  outline-offset: 3px !important;
+}
+
+/* No animations */
+html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after {
+  animation-duration: 0.001ms !important;
+  transition-duration: 0.001ms !important;
+}
+html.a11y-no-anim { scroll-behavior: auto !important; }
+
+/* High contrast — see critical bug below, DO NOT use filter on body/html */
+html.a11y-contrast { --bg: #000; --bg2: #000; --muted: #e8e8e8; }
+html.a11y-contrast body { background-color: #000 !important; }
+html.a11y-contrast .text-gray-400 { color: #ebebeb !important; }
+html.a11y-contrast .text-gray-500 { color: #e0e0e0 !important; }
+
+/* Font sizes — scale root rem so all rem-based units scale */
+html.a11y-font-lg { font-size: 115%; }
+html.a11y-font-sm { font-size: 88%; }
+
+/* Readable font */
+html.a11y-readable, html.a11y-readable * {
+  font-family: Arial, Helvetica, sans-serif !important;
+  letter-spacing: 0.015em;
+}
+
+/* Mark headings */
+html.a11y-headings h1, html.a11y-headings h2,
+html.a11y-headings h3, html.a11y-headings h4 {
+  outline: 2px dashed var(--red) !important;
+  outline-offset: 6px;
+}
+
+/* Mark links / buttons (exclude widget's own toggles) */
+html.a11y-links a,
+html.a11y-links button:not([role="switch"]):not(#a11y-btn) {
+  outline: 2px solid #3b82f6 !important;
+  text-decoration: underline !important;
+}
+```
+
+---
+
+## Critical Bug: CSS filter + position:fixed
+
+**Symptom:** Floating widget button (or sticky header) "jumps to the bottom of the page" when a mode is activated.
+
+**Root cause:** CSS `filter` (and `transform`, `perspective`) on any **ancestor** of a `position:fixed` element makes that element position relative to the filtered ancestor instead of the viewport. On a long page, `bottom: 1.5rem` becomes 1.5rem from the bottom of the page, not the viewport.
+
+**What breaks it:**
+```css
+/* ❌ Any of these on an ancestor of a fixed element */
+body    { filter: contrast(160%); }   /* breaks ALL fixed descendants */
+#wrapper { filter: contrast(160%); }  /* breaks fixed descendants */
+```
+
+**Safe approaches:**
+```css
+/* ✅ Target only non-ancestor elements */
+/* Apply filter to the element itself (not its ancestor) */
+html.a11y-contrast header { filter: contrast(160%); }  /* header is fixed but filter is ON it, not ancestor */
+html.a11y-contrast #main-content { filter: contrast(160%); }  /* widget is sibling, not descendant */
+
+/* ✅ Best: avoid filter entirely — use CSS variable overrides */
+html.a11y-contrast { --bg: #000; --muted: #e0e0e0; }
+html.a11y-contrast body { background-color: #000 !important; }
+```
+
+**Rule:** Never apply `filter`, `transform`, or `perspective` to any element that is an ancestor of a `position:fixed` element you care about.
+
+---
+
+## Widget Placement
+
+Place widget in `layout.tsx` body, **after** `{children}` — never inside page content:
+
+```tsx
+<body>
+  <a href="#main-content" className="sr-only focus:not-sr-only ...">דלג לתוכן הראשי</a>
+  {children}          {/* page content — Header (fixed) + main */}
+  <AccessibilityWidget />   {/* fixed button + panel, sibling of children */}
+</body>
+```
+
+z-index guide:
+- Header: `z-50`
+- Widget button + panel: `z-[200]`
+- Skip link: `z-[9999]`
+
+---
+
+## Accessibility Declaration Page (Israeli Law)
+
+Required by חוק שוויון זכויות לאנשים עם מוגבלות. Must include:
+
+- Statement of conformance level (WCAG 2.1 AA / ת"י 5568)
+- List of adaptations made
+- Known limitations
+- Accessibility coordinator contact (name + phone)
+- Date of last review
+- Reference to נציב שוויון זכויות for unresolved complaints
+
+Link from footer alongside privacy policy.
+
+---
+
+## Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| `filter` on body for contrast mode | Use CSS variable overrides instead |
+| `aria-hidden` on element with focusable children | Move `aria-hidden` to purely decorative wrapper |
+| Two `<nav>` elements without labels | Add `aria-label` to each nav |
+| `text-gray-500` on dark bg | Fails 4.5:1 — use `text-gray-400` minimum |
+| Font size via `px` overrides | Use `font-size: %` on `<html>` so all `rem` units scale |
+| Toggle thumb using RTL-aware positioning | Use `translateX()` — it's always physical, not RTL-flipped |
+| Widget inside page content | Place after `{children}` in layout, never inside main |
diff --git a/wcag-accessibility-widget/SKILL_HE.md b/wcag-accessibility-widget/SKILL_HE.md
new file mode 100644
index 0000000..3bc08df
--- /dev/null
+++ b/wcag-accessibility-widget/SKILL_HE.md
@@ -0,0 +1,309 @@
+---
+name: wcag-accessibility-widget
+description: בנה ווידג'ט נגישות צף ועצמאי לאתרי אינטרנט ישראליים — כפתורי WCAG 2.1 AA / ת"י 5568 (ניגודיות גבוהה, גודל גופן, ניווט מקלדת, גופן קריא, סימון כותרות/קישורים), הגדרות שמורות ב-localStorage, מוחלות כ-CSS class על <html>. השתמשו כשבונים ווידג'ט נגישות, מיישמים דרישות חוק שוויון זכויות לאנשים עם מוגבלות, יוצרים דף הצהרת נגישות, או מאבחנים אלמנטים position:fixed שנשברים בעת שימוש ב-CSS filter. מכסה ארכיטקטורת קומפוננטה ב-React/Next.js, כפתורי toggle בטוחים ל-RTL, אסטרטגיית CSS class, ותוכן דף הצהרת הנגישות הנדרש. אל תשתמשו עבור שירותי accessibility overlay צד שלישי (UserWay, AccessiBe) או ביקורות WCAG שאינן ישראליות.
+license: MIT
+compatibility: עובד עם React 18+ ו-Next.js 13+ (App Router). אין צורך ב-API או שירות חיצוני — עצמאי לחלוטין עם localStorage. תואם לפרויקטי Tailwind CSS. מודע לפריסת RTL/עברית.
+---
+
+# ווידג'ט נגישות WCAG
+
+## סקירה כללית
+
+ווידג'ט נגישות עצמאי: כפתור קבוע שפותח פנל עם כפתורי toggle לתכונות WCAG 2.1 AA נפוצות. ההגדרות שמורות ב-`localStorage` ומוחלות כ-CSS class על `<html>`. אין צורך בשירות צד שלישי.
+
+---
+
+## רשימת WCAG 2.1 AA — מה לבנות
+
+לפני כל שינוי בקומפוננטה, בדקו תחילה את הפריטים הבאים:
+
+| פריט | מה לבדוק / ליישם |
+|------|-----------------|
+| **קישור דילוג** | `<a href="#main-content">` בפריסה, מוסתר ויזואלית, גלוי בפוקוס. יעד: `<main id="main-content" tabIndex={-1}>` |
+| **תיאור תמונות** | לכל `<img>` יש `alt` תיאורי. תמונות דקורטיביות מקבלות `alt=""` + `aria-hidden="true"` |
+| **ניגודיות צבע** | טקסט רגיל ≥ 4.5:1, טקסט גדול ≥ 3:1. כשל נפוץ: `text-gray-500` על רקע כהה (~3.9:1) → השתמשו ב-`text-gray-400` |
+| **ניווט מקלדת** | כל האלמנטים האינטראקטיביים נגישים ב-Tab. בדקו עם מקלדת בלבד |
+| **תוויות ARIA** | `aria-label` על כפתורים עם סמל בלבד, `aria-expanded` על toggles, `aria-label` על `<nav>` כשיש מספר navs |
+| **אלמנטים דקורטיביים** | אמוג'י, span קו תחתי, אייקוני SVG עם טקסט סמוך → `aria-hidden="true"` |
+| **שפה וכיוון** | `<html lang="he" dir="rtl">` (או השפה שלכם) על אלמנט השורש |
+| **רספונסיביות מובייל** | האתר שמיש במובייל ללא גלילה אופקית |
+| **הצהרת נגישות** | נדרשת לפי חוק שוויון זכויות לאנשים עם מוגבלות — עמוד בכתובת `/accessibility` |
+| **מדיניות פרטיות** | `/privacy-policy` עם רשימה של כל הנתונים שהטופס אוסף |
+
+---
+
+## ארכיטקטורת הווידג'ט
+
+### 1. טיפוס ההגדרות + מפת CSS class
+
+```ts
+type Settings = {
+  keyboardNav: boolean;
+  noAnimations: boolean;
+  highContrast: boolean;
+  textLarge: boolean;    // בלעדי עם textSmall
+  textSmall: boolean;
+  readableFont: boolean;
+  markHeadings: boolean;
+  markLinks: boolean;
+};
+
+const CLASS_MAP: Record<keyof Settings, string> = {
+  keyboardNav:  "a11y-keyboard",
+  noAnimations: "a11y-no-anim",
+  highContrast: "a11y-contrast",
+  textLarge:    "a11y-font-lg",
+  textSmall:    "a11y-font-sm",
+  readableFont: "a11y-readable",
+  markHeadings: "a11y-headings",
+  markLinks:    "a11y-links",
+};
+```
+
+### 2. החלת class על `<html>` + שמירה
+
+```ts
+useEffect(() => {
+  const html = document.documentElement;
+  (Object.keys(settings) as (keyof Settings)[]).forEach((key) => {
+    html.classList.toggle(CLASS_MAP[key], settings[key]);
+  });
+  localStorage.setItem("a11y", JSON.stringify(settings));
+}, [settings]);
+```
+
+### 3. שחזור בעת טעינה
+
+```ts
+useEffect(() => {
+  try {
+    const saved = localStorage.getItem("a11y");
+    if (saved) setSettings(JSON.parse(saved));
+  } catch { /* ignore */ }
+}, []);
+```
+
+### 4. סגירה ב-Escape + לחיצה מחוץ
+
+```ts
+useEffect(() => {
+  if (!isOpen) return;
+  const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setIsOpen(false); };
+  const onMouse = (e: MouseEvent) => {
+    if (!panelRef.current?.contains(e.target as Node) &&
+        !btnRef.current?.contains(e.target as Node)) setIsOpen(false);
+  };
+  document.addEventListener("keydown", onKey);
+  document.addEventListener("mousedown", onMouse);
+  return () => {
+    document.removeEventListener("keydown", onKey);
+    document.removeEventListener("mousedown", onMouse);
+  };
+}, [isOpen]);
+```
+
+### 5. כפתור toggle בטוח ל-RTL
+
+השתמשו ב-`transform: translateX()` — CSS transforms הם תמיד פיזיים (לא מתהפכים ב-RTL):
+
+```tsx
+<span
+  aria-hidden="true"
+  className="absolute top-[3px] h-[18px] w-[18px] rounded-full bg-white shadow-sm transition-transform duration-200"
+  style={{ transform: `translateX(${active ? "21px" : "3px"})` }}
+/>
+```
+
+מסלול: `w-11 h-6` (44×24px). אגודל: 18×18px עם ריפוד 3px מכל צד → פועל=21px, כבוי=3px.
+
+---
+
+## מצבי CSS (globals.css)
+
+```css
+/* ניווט מקלדת */
+html.a11y-keyboard *:focus,
+html.a11y-keyboard *:focus-visible {
+  outline: 3px solid var(--red) !important;
+  outline-offset: 3px !important;
+}
+
+/* ללא אנימציות */
+html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after {
+  animation-duration: 0.001ms !important;
+  transition-duration: 0.001ms !important;
+}
+html.a11y-no-anim { scroll-behavior: auto !important; }
+
+/* ניגודיות גבוהה — ראו באג קריטי למטה, אל תשתמשו ב-filter על body/html */
+html.a11y-contrast { --bg: #000; --bg2: #000; --muted: #e8e8e8; }
+html.a11y-contrast body { background-color: #000 !important; }
+html.a11y-contrast .text-gray-400 { color: #ebebeb !important; }
+html.a11y-contrast .text-gray-500 { color: #e0e0e0 !important; }
+
+/* גדלי גופן — משנה rem שורש כך שכל יחידות rem מתרחבות */
+html.a11y-font-lg { font-size: 115%; }
+html.a11y-font-sm { font-size: 88%; }
+
+/* גופן קריא */
+html.a11y-readable, html.a11y-readable * {
+  font-family: Arial, Helvetica, sans-serif !important;
+  letter-spacing: 0.015em;
+}
+
+/* סימון כותרות */
+html.a11y-headings h1, html.a11y-headings h2,
+html.a11y-headings h3, html.a11y-headings h4 {
+  outline: 2px dashed var(--red) !important;
+  outline-offset: 6px;
+}
+
+/* סימון קישורים / כפתורים (לא כולל toggles של הווידג'ט) */
+html.a11y-links a,
+html.a11y-links button:not([role="switch"]):not(#a11y-btn) {
+  outline: 2px solid #3b82f6 !important;
+  text-decoration: underline !important;
+}
+```
+
+---
+
+## באג קריטי: CSS filter + position:fixed
+
+**תסמין:** כפתור הווידג'ט הצף (או header דביק) "קופץ לתחתית העמוד" בעת הפעלת מצב.
+
+**סיבת שורש:** CSS `filter` (וכן `transform`, `perspective`) על כל **אב** של אלמנט `position:fixed` גורם לאלמנט לקבל מיקום יחסית לאב המסונן במקום ה-viewport. בעמוד ארוך, `bottom: 1.5rem` הופך ל-1.5rem מתחתית העמוד, לא מה-viewport.
+
+**מה שובר:**
+```css
+/* ❌ כל אחד מאלה על אב של אלמנט fixed */
+body    { filter: contrast(160%); }   /* שובר את כל הצאצאים fixed */
+#wrapper { filter: contrast(160%); }  /* שובר צאצאי fixed */
+```
+
+**גישות בטוחות:**
+```css
+/* ✅ מיקוד רק על אלמנטים שאינם אבות */
+html.a11y-contrast header { filter: contrast(160%); }  /* header הוא fixed אבל filter עליו, לא על אב */
+html.a11y-contrast #main-content { filter: contrast(160%); }  /* הווידג'ט הוא sibling, לא צאצא */
+
+/* ✅ עדיף: הימנעות מ-filter לחלוטין — שימוש בדריסת משתני CSS */
+html.a11y-contrast { --bg: #000; --muted: #e0e0e0; }
+html.a11y-contrast body { background-color: #000 !important; }
+```
+
+**כלל:** לעולם אל תחיל `filter`, `transform`, או `perspective` על אלמנט שהוא אב של `position:fixed` שאכפת לכם ממנו.
+
+---
+
+## מיקום הווידג'ט
+
+מקמו את הווידג'ט ב-`layout.tsx` body, **אחרי** `{children}` — לעולם לא בתוך תוכן הדף:
+
+```tsx
+<body>
+  <a href="#main-content" className="sr-only focus:not-sr-only ...">דלג לתוכן הראשי</a>
+  {children}                  {/* תוכן הדף — Header (fixed) + main */}
+  <AccessibilityWidget />     {/* כפתור + פנל fixed, sibling של children */}
+</body>
+```
+
+מדריך z-index:
+- Header: `z-50`
+- כפתור + פנל הווידג'ט: `z-[200]`
+- קישור דילוג: `z-[9999]`
+
+---
+
+## דף הצהרת נגישות (חוק ישראלי)
+
+נדרש לפי חוק שוויון זכויות לאנשים עם מוגבלות. חייב לכלול:
+
+- הצהרה על רמת ההתאמה (WCAG 2.1 AA / ת"י 5568)
+- רשימת ההתאמות שבוצעו
+- מגבלות ידועות
+- פרטי רכז הנגישות (שם + טלפון)
+- תאריך סקירה אחרונה
+- הפנייה לנציב שוויון זכויות לתלונות שלא נפתרו
+
+קשרו מהתחתית לצד מדיניות הפרטיות.
+
+### תבנית דף הצהרת נגישות
+
+```tsx
+// app/accessibility/page.tsx
+export default function AccessibilityPage() {
+  return (
+    <main id="main-content" tabIndex={-1} dir="rtl" lang="he">
+      <h1>הצהרת נגישות</h1>
+
+      <section>
+        <h2>מחויבות לנגישות</h2>
+        <p>
+          [שם האתר] פועל לאפשר שימוש נגיש לכלל המשתמשים, לרבות אנשים עם מוגבלות,
+          בהתאם לחוק שוויון זכויות לאנשים עם מוגבלות (התשנ"ח-1998) ותקנות הנגישות.
+        </p>
+        <p>
+          האתר עומד ברמת תאימות <strong>WCAG 2.1 AA</strong> (ת"י 5568).
+        </p>
+      </section>
+
+      <section>
+        <h2>התאמות נגישות שבוצעו</h2>
+        <ul>
+          <li>ניגודיות צבעים גבוהה</li>
+          <li>הגדלה והקטנה של גודל הגופן</li>
+          <li>הדגשת ניווט מקלדת</li>
+          <li>גופן קריאה נוח (Arial)</li>
+          <li>הדגשת כותרות וקישורים</li>
+          <li>עצירת אנימציות</li>
+          <li>קישור דילוג לתוכן הראשי</li>
+          <li>תגיות alt לתמונות</li>
+          <li>תוויות ARIA לאלמנטים אינטראקטיביים</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>מגבלות ידועות</h2>
+        <p>אנו עובדים באופן שוטף לשיפור הנגישות. אם נתקלתם בבעיה — פנו אלינו.</p>
+      </section>
+
+      <section>
+        <h2>רכז נגישות</h2>
+        <p>שם: [שם רכז הנגישות]</p>
+        <p>טלפון: [מספר טלפון]</p>
+        <p>דוא"ל: [כתובת דוא"ל]</p>
+      </section>
+
+      <section>
+        <h2>תאריך סקירה אחרונה</h2>
+        <p>[תאריך]</p>
+      </section>
+
+      <section>
+        <h2>פניות ותלונות</h2>
+        <p>
+          במידה ונתקלתם בבעיית נגישות שלא נפתרה, תוכלו לפנות ל
+          <a href="https://www.justice.gov.il/Units/NetzivutShivionZchuyot/Pages/default.aspx">
+            נציב שוויון זכויות לאנשים עם מוגבלות
+          </a>.
+        </p>
+      </section>
+    </main>
+  );
+}
+```
+
+---
+
+## שגיאות נפוצות
+
+| שגיאה | תיקון |
+|-------|-------|
+| `filter` על body למצב ניגודיות | השתמשו בדריסת משתני CSS במקום |
+| `aria-hidden` על אלמנט עם צאצאים שניתן לפוקוס | העבירו `aria-hidden` לעטיפה דקורטיבית בלבד |
+| שני אלמנטי `<nav>` ללא תוויות | הוסיפו `aria-label` לכל nav |
+| `text-gray-500` על רקע כהה | נכשל ב-4.5:1 — השתמשו ב-`text-gray-400` לכל הפחות |
+| גודל גופן דרך דריסות `px` | השתמשו ב-`font-size: %` על `<html>` כך שכל יחידות `rem` מתרחבות |
+| אגודל toggle עם מיקום מודע ל-RTL | השתמשו ב-`translateX()` — הוא תמיד פיזי, לא מתהפך ב-RTL |
+| ווידג'ט בתוך תוכן הדף | מקמו אחרי `{children}` בפריסה, לעולם לא בתוך main |
diff --git a/wcag-accessibility-widget/evidence.json b/wcag-accessibility-widget/evidence.json
new file mode 100644
index 0000000..5c0a8ec
--- /dev/null
+++ b/wcag-accessibility-widget/evidence.json
@@ -0,0 +1,70 @@
+{
+  "version": "1.0",
+  "skill": "wcag-accessibility-widget",
+  "verified_date": "2026-05",
+  "claims": [
+    {
+      "id": "claim-001",
+      "claim": "WCAG 2.1 Level AA requires normal text contrast ratio of at least 4.5:1",
+      "source_url": "https://www.w3.org/TR/WCAG21/#contrast-minimum",
+      "source_title": "W3C WCAG 2.1 - Success Criterion 1.4.3 Contrast (Minimum)",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-002",
+      "claim": "WCAG 2.1 Level AA requires large text contrast ratio of at least 3:1",
+      "source_url": "https://www.w3.org/TR/WCAG21/#contrast-minimum",
+      "source_title": "W3C WCAG 2.1 - Success Criterion 1.4.3 Contrast (Minimum)",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-003",
+      "claim": "Israeli Standard ת\"י 5568 governs digital accessibility requirements for websites in Israel",
+      "source_url": "https://www.sii.org.il/1772-he/SII.aspx",
+      "source_title": "Israeli Standards Institution (מכון התקנים הישראלי) - ת\"י 5568",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-004",
+      "claim": "Israeli accessibility law (חוק שוויון זכויות לאנשים עם מוגבלות) requires an accessibility declaration page (הצהרת נגישות) on websites",
+      "source_url": "https://www.gov.il/he/departments/guides/nigushot_web",
+      "source_title": "Israeli Government - Web Accessibility Requirements",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-005",
+      "claim": "CSS filter property creates a new stacking context, which causes position:fixed children to be positioned relative to the filtered ancestor instead of the viewport",
+      "source_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/filter#formal_definition",
+      "source_title": "MDN Web Docs - CSS filter (stacking context behavior)",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-006",
+      "claim": "The html element should have lang and dir attributes set (e.g., lang=\"he\" dir=\"rtl\" for Hebrew) for accessibility and correct RTL rendering",
+      "source_url": "https://www.w3.org/TR/WCAG21/#language-of-page",
+      "source_title": "W3C WCAG 2.1 - Success Criterion 3.1.1 Language of Page",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-007",
+      "claim": "All interactive elements must be reachable by keyboard (Tab key) per WCAG 2.1 AA Success Criterion 2.1.1",
+      "source_url": "https://www.w3.org/TR/WCAG21/#keyboard",
+      "source_title": "W3C WCAG 2.1 - Success Criterion 2.1.1 Keyboard",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-008",
+      "claim": "Decorative images must have empty alt text (alt=\"\") and aria-hidden=\"true\" per WCAG 2.1",
+      "source_url": "https://www.w3.org/TR/WCAG21/#non-text-content",
+      "source_title": "W3C WCAG 2.1 - Success Criterion 1.1.1 Non-text Content",
+      "verified": "2026-05"
+    },
+    {
+      "id": "claim-009",
+      "claim": "localStorage is available in all modern browsers and can be used to persist user accessibility preferences across sessions",
+      "source_url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage",
+      "source_title": "MDN Web Docs - Window.localStorage",
+      "verified": "2026-05"
+    }
+  ]
+}
diff --git a/wcag-accessibility-widget/metadata.json b/wcag-accessibility-widget/metadata.json
new file mode 100644
index 0000000..56d2d64
--- /dev/null
+++ b/wcag-accessibility-widget/metadata.json
@@ -0,0 +1,43 @@
+{
+  "name": "wcag-accessibility-widget",
+  "author": "Tura2",
+  "version": "1.0.0",
+  "category": "developer-tools",
+  "tags": {
+    "he": [
+      "נגישות",
+      "wcag",
+      "ת״י-5568",
+      "ווידג'ט-נגישות",
+      "הצהרת-נגישות",
+      "ישראל"
+    ],
+    "en": [
+      "accessibility",
+      "wcag",
+      "a11y",
+      "widget",
+      "ti-5568",
+      "israeli-law",
+      "israel"
+    ]
+  },
+  "display_name": {
+    "he": "ווידג'ט נגישות WCAG",
+    "en": "WCAG Accessibility Widget"
+  },
+  "display_description": {
+    "he": "בנה ווידג'ט נגישות עצמאי לאתרי אינטרנט ישראליים בהתאם ל-WCAG 2.1 AA / ת\"י 5568. השתמשו כשבונים ווידג'ט נגישות, מיישמים דרישות חוק שוויון זכויות לאנשים עם מוגבלות, יוצרים דף הצהרת נגישות, או מאבחנים אלמנטים position:fixed שנשברים בעת שימוש ב-CSS filter. מכסה ניגודיות גבוהה, גודל גופן, ניווט מקלדת, גופן קריא, סימון כותרות וקישורים — ללא שירות צד שלישי. אל תשתמשו עבור שירותי accessibility overlay כמו UserWay או AccessiBe.",
+    "en": "Build a self-hosted floating accessibility widget for Israeli websites compliant with WCAG 2.1 AA / ת\"י 5568 (Israeli Standard). Use when building an accessibility widget, implementing Israeli accessibility law (חוק שוויון זכויות לאנשים עם מוגבלות), creating an הצהרת נגישות (accessibility declaration) page, or debugging position:fixed elements that break under CSS filter. Covers high contrast, font size scaling, keyboard nav highlighting, readable font, heading/link markers — no third-party service required. Do NOT use for third-party accessibility overlays (UserWay, AccessiBe) or non-Israeli WCAG audits."
+  },
+  "supported_agents": [
+    "claude-code",
+    "cursor",
+    "github-copilot",
+    "windsurf",
+    "opencode",
+    "codex",
+    "antigravity",
+    "gemini-cli"
+  ]
+}
diff --git a/wcag-accessibility-widget/references/README.md b/wcag-accessibility-widget/references/README.md
new file mode 100644
index 0000000..cc0773b
--- /dev/null
+++ b/wcag-accessibility-widget/references/README.md
@@ -0,0 +1,48 @@
+# References
+
+## Israeli Law & Standards
+
+- **חוק שוויון זכויות לאנשים עם מוגבלות, תשנ"ח-1998**
+  https://www.nevo.co.il/law_html/law01/999_429.htm
+
+- **תקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות), תשע"ג-2013**
+  https://www.nevo.co.il/law_html/law01/999_687.htm
+
+- **ת"י 5568 — נגישות לתכנים באינטרנט (Israeli Standard, mirrors WCAG 2.1)**
+  https://www.sii.org.il/
+
+- **נציבות שוויון זכויות לאנשים עם מוגבלות**
+  https://www.justice.gov.il/Units/NetzivutShivionZchuyot/Pages/default.aspx
+
+## WCAG Standards
+
+- **WCAG 2.1 Specification**
+  https://www.w3.org/TR/WCAG21/
+
+- **WCAG 2.1 Quick Reference**
+  https://www.w3.org/WAI/WCAG21/quickref/
+
+- **Understanding WCAG 2.1**
+  https://www.w3.org/WAI/WCAG21/Understanding/
+
+## Accessibility Testing Tools
+
+- **axe DevTools** — browser extension for automated a11y testing
+  https://www.deque.com/axe/devtools/
+
+- **WAVE** — Web Accessibility Evaluation Tool
+  https://wave.webaim.org/
+
+- **Colour Contrast Analyser**
+  https://www.tpgi.com/color-contrast-checker/
+
+- **NVDA** — free screen reader for Windows
+  https://www.nvaccess.org/
+
+## CSS filter + position:fixed Reference
+
+- **MDN: The stacking context (CSS)**
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+
+- **CSS filter creates new stacking context**
+  https://www.w3.org/TR/filter-effects/#FilterProperty
