Initial commit

.claude/rules/accessibility.md

@@ -0,0 +1,83 @@
+---
+paths:
+  - "src/components/**/*.tsx"
+---
+
+# Accessibility Patterns
+
+## Interactive Components
+
+### ariaLabel Prop
+
+Always include `ariaLabel` prop with sensible fallback:
+
+```typescript
+interface Props {
+  ariaLabel?: string;
+}
+
+<section aria-label={ariaLabel || "Default section label"}>
+```
+
+### Disabled States
+
+```tsx
+<button
+  disabled={isDisabled}
+  className="disabled:cursor-not-allowed disabled:opacity-50"
+>
+```
+
+### Focus Indicators
+
+Custom focus indicators for consistent styling:
+
+```tsx
+<button className="focus:outline-none focus:ring-2 focus:ring-foreground/50">
+```
+
+---
+
+## Media Components
+
+### Images
+
+Use `aria-hidden` for decorative images:
+
+```tsx
+<img
+  src={imageSrc}
+  alt={imageAlt}
+  aria-hidden={imageAlt === ""}
+/>
+```
+
+### Videos
+
+Always include `videoAriaLabel` prop:
+
+```tsx
+<video aria-label={videoAriaLabel || "Video content"}>
+```
+
+---
+
+## Semantic HTML
+
+### Heading Hierarchy
+
+- `h1` - Page title (one per page)
+- `h2` - Section headings
+- `h3` - Subsection headings
+- `h4` - Card titles
+
+### Semantic Elements
+
+Use appropriate semantic elements:
+
+- `<section>` - Thematic groupings of content
+- `<nav>` - Navigation blocks
+- `<article>` - Self-contained content
+- `<aside>` - Tangentially related content
+- `<main>` - Primary content area
+- `<header>` / `<footer>` - Section headers/footers