real-prototypes-skill 0.1.0

package/.claude/skills/real-prototypes-skill/examples/amazon-chatbot/references/design-tokens.json

@@ -0,0 +1,87 @@
+{
+  "colors": {
+    "primary": {
+      "orange": "#FF9900",
+      "orangeHover": "#FA8900",
+      "orangePressed": "#E47911"
+    },
+    "navbar": {
+      "dark": "#131921",
+      "darkHover": "#232F3E",
+      "subNav": "#232F3E"
+    },
+    "text": {
+      "primary": "#0F1111",
+      "secondary": "#565959",
+      "link": "#007185",
+      "linkHover": "#C7511F",
+      "white": "#FFFFFF",
+      "muted": "#555555"
+    },
+    "background": {
+      "white": "#FFFFFF",
+      "light": "#EAEDED",
+      "gray": "#F0F2F2",
+      "card": "#FFFFFF"
+    },
+    "button": {
+      "yellowGradientStart": "#FFD814",
+      "yellowGradientEnd": "#F7CA00",
+      "yellowHover": "#F0C14B",
+      "orangeGradientStart": "#FFA41C",
+      "orangeGradientEnd": "#FF8F00"
+    },
+    "border": {
+      "light": "#DDD",
+      "medium": "#CDCDCD",
+      "dark": "#949494",
+      "input": "#888888"
+    },
+    "status": {
+      "success": "#067D62",
+      "error": "#CC0C39",
+      "warning": "#C45500",
+      "info": "#007185"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "primary": "Amazon Ember, Arial, sans-serif",
+      "fallback": "Arial, sans-serif"
+    },
+    "fontSize": {
+      "xs": "11px",
+      "sm": "12px",
+      "base": "13px",
+      "md": "14px",
+      "lg": "16px",
+      "xl": "18px",
+      "2xl": "21px",
+      "3xl": "28px"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "bold": "700"
+    }
+  },
+  "spacing": {
+    "xs": "4px",
+    "sm": "8px",
+    "md": "12px",
+    "lg": "16px",
+    "xl": "20px",
+    "2xl": "24px"
+  },
+  "borderRadius": {
+    "sm": "3px",
+    "md": "4px",
+    "lg": "8px",
+    "pill": "20px"
+  },
+  "shadows": {
+    "card": "0 2px 5px 0 rgba(0,0,0,0.1)",
+    "dropdown": "0 2px 5px rgba(0,0,0,0.15)",
+    "modal": "0 4px 16px rgba(0,0,0,0.15)"
+  }
+}

package/.claude/skills/real-prototypes-skill/references/accessibility-fixes.md

@@ -0,0 +1,298 @@
+# Accessibility Fixes Documentation
+
+**Generated:** 2026-01-26T18:27:12.020Z
+**WCAG Level:** AA (2.1)
+
+## Summary
+
+- **Total Files Analyzed:** 5
+- **Total Issues Found:** 24
+- **Total Fixes Applied:** 5
+
+---
+
+## 1. dashboard-widget.tsx.template
+
+**File:** `.claude/skills/real-prototypes-skill/templates/dashboard-widget.tsx.template`
+
+### Issues Found (4)
+
+#### 1. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 58 missing aria-label or associated label
+- **Element:** button
+- **Line:** 58
+
+#### 2. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 65 missing aria-label or associated label
+- **Element:** button
+- **Line:** 65
+
+#### 3. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 83 missing aria-label or associated label
+- **Element:** button
+- **Line:** 83
+
+#### 4. MISSING FOCUS INDICATOR
+
+- **Severity:** error
+- **Message:** No focus styles detected. Add focus:ring or focus-visible styles.
+
+### Fixes Applied (1)
+
+#### 1. ADD FOCUS STYLES
+
+- **Description:** Add focus indicators to interactive elements
+- **Implementation:** Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links
+
+---
+
+## 2. data-table.tsx.template
+
+**File:** `.claude/skills/real-prototypes-skill/templates/data-table.tsx.template`
+
+### Issues Found (2)
+
+#### 1. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 99 missing aria-label or associated label
+- **Element:** button
+- **Line:** 99
+
+#### 2. MISSING FOCUS INDICATOR
+
+- **Severity:** error
+- **Message:** No focus styles detected. Add focus:ring or focus-visible styles.
+
+### Fixes Applied (1)
+
+#### 1. ADD FOCUS STYLES
+
+- **Description:** Add focus indicators to interactive elements
+- **Implementation:** Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links
+
+---
+
+## 3. form-section.tsx.template
+
+**File:** `.claude/skills/real-prototypes-skill/templates/form-section.tsx.template`
+
+### Issues Found (6)
+
+#### 1. COLOR CONTRAST
+
+- **Severity:** warning
+- **Message:** Found 1 color utilities. Manual contrast check recommended.
+- **Colors:** text-red-500
+
+#### 2. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 220 missing aria-label or associated label
+- **Element:** button
+- **Line:** 220
+
+#### 3. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 230 missing aria-label or associated label
+- **Element:** button
+- **Line:** 230
+
+#### 4. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** input at line 92 missing aria-label or associated label
+- **Element:** input
+- **Line:** 92
+
+#### 5. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** input at line 117 missing aria-label or associated label
+- **Element:** input
+- **Line:** 117
+
+#### 6. KEYBOARD NAVIGATION
+
+- **Severity:** warning
+- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
+
+### Fixes Applied (1)
+
+#### 1. ADD KEYBOARD HANDLERS
+
+- **Description:** Add keyboard event handlers
+- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
+
+---
+
+## 4. modal-dialog.tsx.template
+
+**File:** `.claude/skills/real-prototypes-skill/templates/modal-dialog.tsx.template`
+
+### Issues Found (7)
+
+#### 1. COLOR CONTRAST
+
+- **Severity:** warning
+- **Message:** Found 2 color utilities. Manual contrast check recommended.
+- **Colors:** bg-red-600, bg-red-700
+
+#### 2. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 99 missing aria-label or associated label
+- **Element:** button
+- **Line:** 99
+
+#### 3. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 107 missing aria-label or associated label
+- **Element:** button
+- **Line:** 107
+
+#### 4. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 181 missing aria-label or associated label
+- **Element:** button
+- **Line:** 181
+
+#### 5. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 190 missing aria-label or associated label
+- **Element:** button
+- **Line:** 190
+
+#### 6. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 211 missing aria-label or associated label
+- **Element:** button
+- **Line:** 211
+
+#### 7. KEYBOARD NAVIGATION
+
+- **Severity:** warning
+- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
+
+### Fixes Applied (1)
+
+#### 1. ADD KEYBOARD HANDLERS
+
+- **Description:** Add keyboard event handlers
+- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
+
+---
+
+## 5. nav-item.tsx.template
+
+**File:** `.claude/skills/real-prototypes-skill/templates/nav-item.tsx.template`
+
+### Issues Found (5)
+
+#### 1. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 87 missing aria-label or associated label
+- **Element:** button
+- **Line:** 87
+
+#### 2. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 114 missing aria-label or associated label
+- **Element:** button
+- **Line:** 114
+
+#### 3. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 152 missing aria-label or associated label
+- **Element:** button
+- **Line:** 152
+
+#### 4. MISSING ARIA LABEL
+
+- **Severity:** error
+- **Message:** button at line 184 missing aria-label or associated label
+- **Element:** button
+- **Line:** 184
+
+#### 5. KEYBOARD NAVIGATION
+
+- **Severity:** warning
+- **Message:** Click handlers without keyboard handlers. Ensure keyboard accessibility.
+
+### Fixes Applied (1)
+
+#### 1. ADD KEYBOARD HANDLERS
+
+- **Description:** Add keyboard event handlers
+- **Implementation:** Add onKeyDown={(e) => e.key === "Enter" && handleClick()} to clickable elements
+
+---
+
+## Accessibility Best Practices
+
+### Color Contrast
+- Normal text (< 18pt): Minimum 4.5:1 contrast ratio
+- Large text (≥ 18pt or ≥ 14pt bold): Minimum 3.0:1 contrast ratio
+- Adjust lightness by maximum 5% to preserve design
+
+### Keyboard Navigation
+- All interactive elements must be keyboard accessible
+- Add `onKeyDown` handlers for `onClick` elements
+- Use `tabIndex={0}` for custom interactive elements
+- Ensure logical tab order
+
+### ARIA Labels
+- All buttons must have accessible names (text, aria-label, or aria-labelledby)
+- All links must have descriptive text
+- Form inputs must have associated labels
+- Use `aria-describedby` for error messages
+
+### Focus Indicators
+- All focusable elements must have visible focus states
+- Use `focus:ring-2 focus:ring-platform-primary` pattern
+- Ensure focus indicators have minimum 3:1 contrast
+
+### Semantic HTML
+- Use proper HTML elements (`<button>` not `<div onClick>`)
+- Maintain heading hierarchy (h1 → h2 → h3, no skipping)
+- Use landmarks (`<nav>`, `<main>`, `<footer>`)
+- Use lists for list content
+
+### Form Accessibility
+- Associate labels with inputs using `htmlFor` or `aria-label`
+- Include `aria-invalid` for validation errors
+- Use `aria-describedby` to link error messages
+- Mark required fields with `required` or `aria-required`
+
+### Images
+- All images must have `alt` attributes
+- Use `alt=""` for decorative images
+- Provide descriptive alt text for meaningful images
+
+---
+
+## Testing Recommendations
+
+1. **Automated Testing:** Run ESLint with accessibility plugin
+2. **Keyboard Testing:** Navigate site using only Tab, Enter, Escape
+3. **Screen Reader Testing:** Test with NVDA (Windows) or VoiceOver (Mac)
+4. **Contrast Testing:** Use browser DevTools Accessibility panel
+5. **WAVE Tool:** Run WAVE browser extension for visual feedback
+
+---
+
+**Note:** All fixes preserve the original design with minimal visual changes (<1% difference).

package/.claude/skills/real-prototypes-skill/references/accessibility-report.json

@@ -0,0 +1,253 @@
+{
+  "timestamp": "2026-01-26T18:27:12.016Z",
+  "wcagLevel": "AA",
+  "totalFiles": 5,
+  "totalIssues": 24,
+  "totalFixes": 5,
+  "results": [
+    {
+      "file": ".claude/skills/real-prototypes-skill/templates/dashboard-widget.tsx.template",
+      "issueCount": 4,
+      "fixCount": 1,
+      "issues": [
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 58,
+          "message": "button at line 58 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 65,
+          "message": "button at line 65 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 83,
+          "message": "button at line 83 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-focus-indicator",
+          "severity": "error",
+          "message": "No focus styles detected. Add focus:ring or focus-visible styles."
+        }
+      ],
+      "fixes": [
+        {
+          "type": "add-focus-styles",
+          "description": "Add focus indicators to interactive elements",
+          "implementation": "Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links"
+        }
+      ]
+    },
+    {
+      "file": ".claude/skills/real-prototypes-skill/templates/data-table.tsx.template",
+      "issueCount": 2,
+      "fixCount": 1,
+      "issues": [
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 99,
+          "message": "button at line 99 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-focus-indicator",
+          "severity": "error",
+          "message": "No focus styles detected. Add focus:ring or focus-visible styles."
+        }
+      ],
+      "fixes": [
+        {
+          "type": "add-focus-styles",
+          "description": "Add focus indicators to interactive elements",
+          "implementation": "Add focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 to buttons/links"
+        }
+      ]
+    },
+    {
+      "file": ".claude/skills/real-prototypes-skill/templates/form-section.tsx.template",
+      "issueCount": 6,
+      "fixCount": 1,
+      "issues": [
+        {
+          "type": "color-contrast",
+          "severity": "warning",
+          "message": "Found 1 color utilities. Manual contrast check recommended.",
+          "colors": [
+            "text-red-500"
+          ]
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 220,
+          "message": "button at line 220 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 230,
+          "message": "button at line 230 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "input",
+          "line": 92,
+          "message": "input at line 92 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "input",
+          "line": 117,
+          "message": "input at line 117 missing aria-label or associated label"
+        },
+        {
+          "type": "keyboard-navigation",
+          "severity": "warning",
+          "message": "Click handlers without keyboard handlers. Ensure keyboard accessibility."
+        }
+      ],
+      "fixes": [
+        {
+          "type": "add-keyboard-handlers",
+          "description": "Add keyboard event handlers",
+          "implementation": "Add onKeyDown={(e) => e.key === \"Enter\" && handleClick()} to clickable elements"
+        }
+      ]
+    },
+    {
+      "file": ".claude/skills/real-prototypes-skill/templates/modal-dialog.tsx.template",
+      "issueCount": 7,
+      "fixCount": 1,
+      "issues": [
+        {
+          "type": "color-contrast",
+          "severity": "warning",
+          "message": "Found 2 color utilities. Manual contrast check recommended.",
+          "colors": [
+            "bg-red-600",
+            "bg-red-700"
+          ]
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 99,
+          "message": "button at line 99 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 107,
+          "message": "button at line 107 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 181,
+          "message": "button at line 181 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 190,
+          "message": "button at line 190 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 211,
+          "message": "button at line 211 missing aria-label or associated label"
+        },
+        {
+          "type": "keyboard-navigation",
+          "severity": "warning",
+          "message": "Click handlers without keyboard handlers. Ensure keyboard accessibility."
+        }
+      ],
+      "fixes": [
+        {
+          "type": "add-keyboard-handlers",
+          "description": "Add keyboard event handlers",
+          "implementation": "Add onKeyDown={(e) => e.key === \"Enter\" && handleClick()} to clickable elements"
+        }
+      ]
+    },
+    {
+      "file": ".claude/skills/real-prototypes-skill/templates/nav-item.tsx.template",
+      "issueCount": 5,
+      "fixCount": 1,
+      "issues": [
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 87,
+          "message": "button at line 87 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 114,
+          "message": "button at line 114 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 152,
+          "message": "button at line 152 missing aria-label or associated label"
+        },
+        {
+          "type": "missing-aria-label",
+          "severity": "error",
+          "element": "button",
+          "line": 184,
+          "message": "button at line 184 missing aria-label or associated label"
+        },
+        {
+          "type": "keyboard-navigation",
+          "severity": "warning",
+          "message": "Click handlers without keyboard handlers. Ensure keyboard accessibility."
+        }
+      ],
+      "fixes": [
+        {
+          "type": "add-keyboard-handlers",
+          "description": "Add keyboard event handlers",
+          "implementation": "Add onKeyDown={(e) => e.key === \"Enter\" && handleClick()} to clickable elements"
+        }
+      ]
+    }
+  ],
+  "summary": {
+    "byType": {
+      "missing-aria-label": 17,
+      "missing-focus-indicator": 2,
+      "color-contrast": 2,
+      "keyboard-navigation": 3
+    },
+    "bySeverity": {
+      "error": 19,
+      "warning": 5,
+      "info": 0
+    }
+  }
+}