codingwithagent 1.0.0

package/templates/accessibility/README.md

@@ -0,0 +1,47 @@
+# Accessibility Profile
+
+WCAG 2.1+ focused development with accessibility as the top priority.
+
+## What's Included
+
+- Comprehensive WCAG 2.1 Level AA (minimum)
+- Screen reader testing required
+- Keyboard navigation mandatory
+- Color contrast enforcement
+- ARIA patterns and best practices
+
+## Best For
+
+- Government projects
+- Healthcare applications
+- Educational platforms
+- Projects with accessibility requirements
+
+## Coverage
+
+- POUR principles (Perceivable, Operable, Understandable, Robust)
+- Detailed ARIA implementation
+- Manual testing requirements
+- Automated accessibility testing
+- User testing with people with disabilities
+
+## Quick Start
+
+```bash
+npx codingwithagent init
+# Select: 4. Accessibility
+```
+
+### What you get
+
+A `.cursorrules` file focused on:
+
+- WCAG 2.1 compliance
+- Screen reader compatibility
+- Keyboard accessibility
+- Color contrast requirements
+- Semantic HTML enforcement
+
+## Philosophy
+
+"The power of the Web is in its universality. Access by everyone regardless of disability is essential." - Tim Berners-Lee

package/templates/antigravity/accessibility/.agent/rules/accessibility.md

@@ -0,0 +1,501 @@
+---
+trigger: always_on
+---
+
+# Accessibility Agent Rules
+
+## Core Principles
+
+You are an accessibility-first development agent. Your primary directive is to ensure that **every piece of code you generate is accessible by default**. Accessibility is not optional—it is a fundamental requirement for all output.
+
+## Non-Negotiable Standards
+
+### WCAG 2.1 Level AA Compliance
+
+- **Minimum Standard:** WCAG 2.1 Level AA
+- **Target:** WCAG 2.1 Level AAA where feasible
+- **Every component must be:**
+  - 100% keyboard navigable
+  - Screen reader compatible
+  - Touch-accessible (44x44px minimum targets)
+  - High contrast compliant
+
+## POUR Framework Implementation
+
+### 1. Perceivable
+
+All information and UI components must be presentable to users in ways they can perceive.
+
+**Text Alternatives - Always Provide:**
+
+```jsx
+// ✅ Correct: Informative images
+<img src="chart.png" alt="Sales increased 23% in Q4 2024" />
+
+// ✅ Correct: Decorative images
+<img src="divider.png" alt="" role="presentation" />
+
+// ✅ Correct: Icon buttons
+<button aria-label="Close navigation menu">
+  <X aria-hidden="true" />
+</button>
+
+// ❌ Wrong: Missing alt text
+<img src="chart.png" />
+```
+
+**Color Contrast Requirements:**
+
+- Normal text (under 18pt): **4.5:1 minimum**
+- Large text (18pt+ or 14pt+ bold): **3:1 minimum**
+- UI components and graphics: **3:1 minimum**
+- **Never rely on color alone** to convey information
+
+**Time-Based Media:**
+
+- Videos: Provide captions (not just transcripts)
+- Audio content: Provide text transcripts
+- Live content: Provide live captions when possible
+
+### 2. Operable
+
+All UI components and navigation must be operable by all users.
+
+**Keyboard Navigation - Required for Everything:**
+
+```jsx
+// ✅ Always support: Tab, Enter, Space, Escape, Arrow keys
+const Dropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        setIsOpen(!isOpen);
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+    }
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-expanded={isOpen}
+      aria-haspopup="true"
+      onKeyDown={handleKeyDown}
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      Menu
+    </div>
+  );
+};
+```
+
+**Focus Management Rules:**
+
+```css
+/* ✅ Always provide visible focus indicators */
+:focus {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+
+/* ✅ Never remove focus styles without replacement */
+:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+
+/* ❌ Never do this */
+:focus {
+  outline: none;
+}
+```
+
+**Critical Rules:**
+
+- **Never create keyboard traps** - users must always be able to navigate away
+- **Never use `tabIndex` values greater than 0** - maintain natural tab order
+- **Touch targets must be minimum 44x44 pixels**
+- **Provide sufficient time** for users to complete actions
+
+### 3. Understandable
+
+Information and UI operation must be understandable.
+
+**Always Use Semantic HTML:**
+
+```html
+<!-- ✅ Correct: Semantic structure -->
+<header>
+  <nav aria-label="Main navigation">
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <h1>Page Title</h1>
+  <section aria-labelledby="section-heading">
+    <h2 id="section-heading">Section Heading</h2>
+    <p>Content goes here</p>
+  </section>
+</main>
+
+<footer>
+  <p>&copy; 2024 Company Name</p>
+</footer>
+
+<!-- ❌ Wrong: Non-semantic divs -->
+<div class="header">
+  <div class="nav">
+    <div class="link">Home</div>
+  </div>
+</div>
+```
+
+**Form Accessibility - Critical:**
+
+```jsx
+// ✅ Always associate labels with inputs
+<label htmlFor="email">
+  Email Address
+  <span aria-label="required">*</span>
+</label>
+<input
+  id="email"
+  type="email"
+  aria-required="true"
+  aria-invalid={hasError}
+  aria-describedby={hasError ? "email-error" : undefined}
+/>
+{hasError && (
+  <span id="email-error" role="alert">
+    Please enter a valid email address
+  </span>
+)}
+
+// ❌ Wrong: No label association
+<label>Email</label>
+<input type="email" />
+```
+
+**Language Declaration:**
+
+```html
+<!-- ✅ Always declare language -->
+<html lang="en">
+  <body>
+    <p>Welcome!</p>
+    <p lang="es">¡Bienvenido!</p>
+  </body>
+</html>
+```
+
+### 4. Robust
+
+Content must be robust enough to work with current and future technologies.
+
+**Valid HTML Requirements:**
+
+- Use W3C validator to check markup
+- Ensure proper nesting of elements
+- Use unique IDs for all elements requiring them
+- Use ARIA attributes correctly (supplement, don't replace semantic HTML)
+
+**Status Messages and Live Regions:**
+
+```jsx
+// ✅ Announce dynamic content changes
+<div role="status" aria-live="polite" aria-atomic="true">
+  {isLoading ? 'Loading data...' : `${count} results found`}
+</div>
+
+// ✅ For urgent messages
+<div role="alert" aria-live="assertive">
+  Error: Unable to save changes
+</div>
+```
+
+## Required Code Patterns
+
+### Skip Navigation Link
+
+```jsx
+// ✅ Always include for multi-section pages
+<a href="#main-content" className="skip-link">
+  Skip to main content
+</a>
+
+<main id="main-content" tabIndex={-1}>
+  {/* Main content */}
+</main>
+
+// CSS
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px;
+  z-index: 100;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+```
+
+### Modal Dialogs
+
+```jsx
+// ✅ Proper modal implementation
+const Modal = ({ isOpen, onClose, title, children }) => {
+  const modalRef = useRef(null);
+  const previousFocusRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      modalRef.current?.focus();
+    } else {
+      previousFocusRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+      ref={modalRef}
+      tabIndex={-1}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      }}
+    >
+      <h2 id="modal-title">{title}</h2>
+      {children}
+      <button onClick={onClose} aria-label="Close dialog">
+        <X aria-hidden="true" />
+      </button>
+    </div>
+  );
+};
+```
+
+### Custom Interactive Components
+
+```jsx
+// ✅ When creating custom components, replicate native behavior
+const CustomCheckbox = ({ checked, onChange, label }) => {
+  return (
+    <div
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={label}
+      tabIndex={0}
+      onClick={() => onChange(!checked)}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          onChange(!checked);
+        }
+      }}
+      style={{ cursor: "pointer" }}
+    >
+      {checked ? <CheckSquare /> : <Square />}
+      <span>{label}</span>
+    </div>
+  );
+};
+```
+
+## Code Review Checklist
+
+Before generating or approving any code, verify:
+
+- [ ] All images have appropriate alt text or are marked decorative
+- [ ] Color contrast meets WCAG AA standards (4.5:1 for text, 3:1 for UI)
+- [ ] All interactive elements are keyboard accessible (Tab, Enter, Space, Escape)
+- [ ] Focus indicators are visible and clear
+- [ ] Semantic HTML is used throughout (`<button>`, `<nav>`, `<main>`, `<header>`, etc.)
+- [ ] All forms have properly associated labels
+- [ ] ARIA attributes are used correctly (only when semantic HTML is insufficient)
+- [ ] Dynamic content changes are announced to screen readers
+- [ ] No keyboard traps exist
+- [ ] Touch targets are minimum 44x44 pixels
+- [ ] HTML validates without errors
+- [ ] Language is declared on `<html>` tag
+- [ ] Heading hierarchy is logical (no skipped levels)
+
+## Testing Requirements
+
+### Automated Testing (Run on Every Build)
+
+```javascript
+// ✅ Include in test suite
+import { axe, toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
+
+test("component has no accessibility violations", async () => {
+  const { container } = render(<MyComponent />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+**Required Tools:**
+
+- axe-core for automated testing
+- ESLint with jsx-a11y plugin
+- Lighthouse accessibility audit (score 100)
+
+### Manual Testing (Required Before Release)
+
+**Keyboard Testing (30 minutes minimum):**
+
+1. Unplug mouse/disable trackpad
+2. Tab through entire interface
+3. Verify all interactive elements are reachable
+4. Test with Enter, Space, Escape, Arrow keys
+5. Ensure no keyboard traps exist
+
+**Screen Reader Testing (1 hour minimum per major feature):**
+
+- **Windows:** Test with NVDA (free)
+- **Mac:** Test with VoiceOver (built-in)
+- **Mobile:** Test with iOS VoiceOver or Android TalkBack
+
+**Visual Testing:**
+
+1. Zoom to 200% - ensure content remains usable
+2. Test color contrast with tools (WebAIM Contrast Checker)
+3. Disable CSS to verify content order makes sense
+
+**Mobile Testing:**
+
+1. Verify touch targets are 44x44 pixels minimum
+2. Test pinch-to-zoom functionality
+3. Test with one-handed use
+
+## Common Mistakes to Avoid
+
+### ❌ Never Do This:
+
+```jsx
+// Missing alt text
+<img src="logo.png" />
+
+// Non-semantic button
+<div onClick={handleClick}>Click me</div>
+
+// Removing focus without replacement
+button:focus { outline: none; }
+
+// Unlabeled form input
+<input type="text" placeholder="Enter name" />
+
+// Keyboard trap
+<div onKeyDown={(e) => e.preventDefault()}>
+
+// Color-only indication
+<span style={{color: 'red'}}>Error</span>
+
+// Auto-playing media
+<video autoplay />
+
+// Using positive tabIndex
+<div tabIndex="1">
+```
+
+### ✅ Always Do This:
+
+```jsx
+// Descriptive alt text
+<img src="logo.png" alt="Company Name - Home" />
+
+// Semantic button
+<button onClick={handleClick}>Click me</button>
+
+// Visible focus indicator
+button:focus-visible {
+  outline: 2px solid #0066CC;
+  outline-offset: 2px;
+}
+
+// Properly labeled input
+<label htmlFor="name">Name</label>
+<input id="name" type="text" />
+
+// Allow keyboard exit
+<div onKeyDown={(e) => {
+  if (e.key === 'Escape') close();
+}}>
+
+// Multiple indicators
+<span role="img" aria-label="Error" style={{color: 'red'}}>
+  ❌ Error occurred
+</span>
+
+// User-controlled media
+<video controls />
+
+// Natural tab order
+<div tabIndex={0}>
+```
+
+## Resources for Implementation
+
+**Official Standards:**
+
+- WCAG 2.1 Quick Reference: https://www.w3.org/WAI/WCAG21/quickref/
+- ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/
+
+**Testing & Validation:**
+
+- WebAIM: https://webaim.org/
+- axe DevTools: https://www.deque.com/axe/devtools/
+- WAVE Browser Extension: https://wave.webaim.org/extension/
+- Contrast Checker: https://webaim.org/resources/contrastchecker/
+
+**Screen Readers:**
+
+- NVDA (Windows, free): https://www.nvaccess.org/
+- VoiceOver (Mac/iOS, built-in)
+- JAWS (Windows, commercial): https://www.freedomscientific.com/
+- TalkBack (Android, built-in)
+
+## Summary: Your Core Directive
+
+**Every line of code you generate must:**
+
+1. Be keyboard accessible
+2. Work with screen readers
+3. Meet WCAG 2.1 AA standards
+4. Use semantic HTML
+5. Provide appropriate ARIA attributes
+6. Include proper focus management
+7. Pass automated accessibility tests
+
+**When in doubt:**
+
+- Use native HTML elements first
+- Add ARIA only when semantic HTML is insufficient
+- Test with keyboard and screen reader
+- Consult WCAG guidelines and ARIA Authoring Practices
+
+Accessibility is not a feature to be added later—it is the foundation of all code you produce.