Accessibility
Accessibility testing and improvements
backend_core
by vuralserhat86
Node.js/TypeScript temel prensipler, proje yapısı ve TypeScript strict mode kuralları.
clerk_auth
by vuralserhat86
Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.
color-contrast
by dylantarre
Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.
focus-states
by dylantarre
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
cc_chrome_devtools_mcp_skill
by justfinethanku
Comprehensive Chrome DevTools automation for performance testing, Core Web Vitals measurement (INP, LCP, CLS), network monitoring, accessibility validation, responsive testing, and browser automation. Uses Chrome DevTools Protocol via MCP to provide professional-grade web application testing, debugging, and analysis capabilities including performance tracing, HAR export, device emulation, and multi-page workflows.
gc-review-bilingual
by dougkeefe
Review code for Government of Canada Official Languages Act compliance. Checks for hardcoded strings, dictionary parity between English/French translation files, locale-aware routing, date/number formatting, and accessibility attribute translations. Use when reviewing code for bilingual support, i18n compliance, French/English translation coverage, or OLA requirements.
gc-review-a11y
by dougkeefe
Accessibility (A11y) reviewer for WCAG 2.1 Level AA compliance - checks semantic HTML, ARIA patterns, focus management, text alternatives, visual integrity, language of page/parts, form input purpose, and GC-specific patterns (WET-BOEW, Canada.ca) in code changes following the Standard on Web Accessibility
swift-accessibility
by madebyecho
Automatically applies accessibility best practices to Swift projects (SwiftUI and UIKit). Use when working on iOS/macOS projects that need VoiceOver support, Dynamic Type, WCAG compliance, or accessibility audits. Triggers on Swift accessibility tasks, a11y improvements, or when the user mentions accessibility, VoiceOver, or Dynamic Type.
component-docs
by dylantarre
Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
aria-patterns
by dylantarre
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
getting-started
by dylantarre
Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
icon-system
by dylantarre
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
compound-components
by dylantarre
Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.
a11y
by joabgonzalez
"Universal accessibility with WCAG 2.1/2.2 Level AA. Trigger: When implementing UI components, adding interactive elements, or ensuring accessibility."
Web Design Builder
by rknall
"Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs."
macos-accessibility
by martinholovsky
"Expert in macOS Accessibility APIs (AXUIElement) for desktop automation. Specializes in secure automation of macOS applications with proper TCC permissions, element discovery, and system interaction. HIGH-RISK skill requiring strict security controls."
e2e-testing
by oakoss
'E2E test architecture and patterns with Playwright. Use when designing test suites, structuring Page Object Models, planning CI sharding strategies, setting up authentication flows, or organizing tests with tags and annotations. Use for test architecture, accessibility auditing with axe-core, network mocking strategies, visual regression workflows, HAR replay, and storageState authentication patterns. For Playwright API details, browser automation, or web scraping, use the playwright skill instead.'
design-system
by oakoss
'Builds scalable design systems with tokens, theming, and component architecture. Use when creating design token hierarchies, theming systems, component variant patterns, or accessibility foundations. Use for design tokens, CVA variants, dark mode, multi-brand theming, Radix headless UI, Storybook documentation, and governance.'
accessibility
by oakoss
Build WCAG 2.2 AA compliant interfaces with semantic HTML, ARIA, keyboard navigation, focus management, color contrast, and screen reader support. Covers forms, dialogs, tabs, live regions, skip links, alt text, and data tables. Use when implementing accessible UIs, auditing WCAG compliance, fixing screen reader issues, keyboard navigation, focus traps, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast", "missing alt text", "heading hierarchy".
icon-design
by oakoss
Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
ux-principles
by miles990
User experience design principles for developers
accessibility
by Logos-Liber
WCAG 2.1 guidelines, screen reader compatibility, keyboard navigation, color contrast, semantic HTML, and ARIA attributes
design-systems
by Logos-Liber
Design system principles, component libraries, typography, color theory, spacing systems, and design tokens
ppt-deck
by cklxx
PPT 产出 playbook（目标/受众 -> 故事线 -> 版式设计 -> 可访问性 -> 交付），含 10/20/30 与 Accessibility 最佳实践。