This skill should be used when the user is building or reviewing accessibility (a11y), WCAG 2.2 AA compliance, keyboard navigation, focus management, screen reader support, ARIA attributes, color contrast, or SPA accessibility. Covers legal requirements, accessible component primitives, and the unique focus challenges of single-page applications.
npx claudepluginhub oborchers/fractional-cto --plugin saas-design-principlesThis skill uses the workspace's default tool permissions.
WCAG 2.2 Level AA is the target — not because it is aspirational, but because it is law. The ADA Title II final rule requires WCAG 2.1 AA compliance for government-facing software. The European Accessibility Act applies to any SaaS accessible to EU citizens. Over 4,000 accessibility lawsuits were filed in 2023 alone.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
WCAG 2.2 Level AA is the target — not because it is aspirational, but because it is law. The ADA Title II final rule requires WCAG 2.1 AA compliance for government-facing software. The European Accessibility Act applies to any SaaS accessible to EU citizens. Over 4,000 accessibility lawsuits were filed in 2023 alone.
Every interactive element must be operable by keyboard alone:
| Key | Action |
|---|---|
| Tab | Navigate between elements |
| Enter/Space | Activate element |
| Escape | Close modals, popovers, dropdowns — always |
| Arrow keys | Navigate within composite widgets |
Focus must always be visible. Many CSS resets strip :focus styles — this is a critical accessibility violation. Ensure every focusable element has a visible focus indicator.
Single-page applications break three browser behaviors that most teams miss entirely. Traditional page loads reset focus, announce the new page title, and reset scroll position. SPAs break all three.
Mandatory SPA fixes:
tabindex="-1" on the element receiving programmatic focus<title> tag on every navigationWhen uncertain where to place focus after navigation, move it to the top of the page — it is always correct.
Do not build modals, dialogs, or dropdown menus from scratch. The edge cases are vast and the failure modes are invisible to sighted developers.
Use libraries like Radix UI (the foundation of shadcn/ui) that handle ARIA attributes, focus management, and keyboard navigation internally.
Automated testing catches roughly 30% of accessibility issues. Manual testing catches the rest.
Manual testing methods:
Working implementations in examples/:
examples/spa-route-change-focus.md — Title update, focus management, and ARIA announcements for React Router, Vue Router, and SvelteKitexamples/keyboard-navigation-composite.md — Roving tabindex pattern for tab panels, with comparison to Radix UI primitivesWhen reviewing or building for accessibility:
:focus styles<title> tag updates on every navigationalt="" for decorative images)