Skill465 estrellas del repoactualizado 2d ago

ss-a11y

ss-a11y audits components and pages for WCAG 2.2 AA compliance, checking color contrast ratios, touch target sizes (minimum 44x44px), keyboard navigation, semantic HTML, ARIA attributes, and support for reduced motion preferences. Use this skill to identify and fix accessibility violations in StyleSeed-based code before deployment.

Ver fuente Repositorio: styleseed

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-a11y && cp -r /tmp/ss-a11y/engine/.claude/skills/ss-a11y ~/.claude/skills/ss-a11y

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# Accessibility Audit

## When NOT to use

- For general design system compliance review → use `/ss-review`
- For Nielsen UX heuristics → use `/ss-audit`
- For non-StyleSeed code (no `data-slot`, no semantic tokens) — assumes StyleSeed conventions
- For runtime testing — this is a static code audit, not a screen-reader simulation

Target: **$ARGUMENTS**

## Audit Criteria

### WCAG 2.2 AA Compliance

#### 1. Perceivable
- **Color contrast**: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)
  - Check `text-muted-foreground` (#717182) on `bg-background` (#FFFFFF) = 4.6:1 (passes)
  - Check `text-brand` on white (verify contrast with your skin's brand color)
  - Flag any custom colors that don't meet ratio
- **Non-text contrast**: UI controls/graphics must meet 3:1
- **Text alternatives**: All `<img>` need `alt`, icons need `aria-label` when meaningful
- **Color independence**: Don't convey info by color alone (add icons/text)

#### 2. Operable
- **Touch targets**: Minimum 44x44px (`min-h-11 min-w-11`)
  - Common violation: `h-9` (36px) buttons — should be `h-11`
  - Icon buttons need explicit size: `w-11 h-11`
- **Keyboard navigation**: All interactive elements must be keyboard-accessible
  - Tab order should be logical
  - `focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`
- **Motion**: Animations must respect `prefers-reduced-motion`
  ```css
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  ```

#### 3. Understandable
- **Labels**: Form inputs must have visible labels or `aria-label`
- **Error messages**: Form errors must be programmatically associated (`aria-describedby`)
- **Language**: `<html lang="en">` (or appropriate language code for your project)

#### 4. Robust
- **Semantic HTML**: Use appropriate elements (`<button>`, `<nav>`, `<main>`, `<header>`)
- **ARIA**: Use Radix UI components (they handle ARIA automatically)
- **Roles**: Custom interactive elements need proper `role` attributes

## Design System Token Reference

| Token | Minimum Contrast | Note |
|-------|-----------------|------|
| `--foreground` | 7:1+ | Body text — verify with your skin |
| `--muted-foreground` | 4.5:1+ | Secondary text — verify with your skin |
| `--brand` | 4.5:1+ | Accent — verify with your skin's brand color |
| `--destructive` | 4.5:1+ | Error — verify with your skin |
| `--success` | 3:1+ | Large text/icons only — verify with your skin |
| `--warning` | 4.5:1+ | Warning text — some skins need a darker variant |

## Output

1. **Issues found**: List with severity (Critical/Major/Minor)
2. **Auto-fixes**: Apply fixes directly where possible
3. **Manual review needed**: Flag items that need human judgment

Del mismo repositorio

ss-auditSkill

Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices

ss-componentSkill

Generate a new UI component following the StyleSeed design conventions

ss-copySkill

Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone

ss-feedbackSkill

Add appropriate user feedback states (loading, success, error, empty) to a component or page

ss-flowSkill

Design user flows and navigation structure following proven UX patterns

ss-lintSkill

Quick automated lint — detects common design system violations in seconds

ss-motionSkill

Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.

ss-pageSkill

Scaffold a new mobile page/screen using the StyleSeed layout patterns