Accessibility
Accessibility testing and improvements
design-tokens
by dylanfeltus
Generate type scales, color palettes, spacing systems, WCAG contrast checks, and dark mode derivations with math. Use when setting up a design system, creating tokens, or building a Tailwind/CSS theme. Outputs CSS custom properties, Tailwind config, or JSON tokens.
visual-qa
by dylanfeltus
Use vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and accessibility gaps. Use when reviewing designs, comparing implementations to mockups, or doing pre-ship QA.
ui-ux-designer
by nahisaho
Copilot agent that assists with user interface and experience design, wireframes, prototypes, design systems, and usability testing Trigger terms: UI design, UX design, wireframe, mockup, prototype, user interface, user experience, design system, component library, accessibility, responsive design Use when: User requests involve ui ux designer tasks.
accessibility
by cosmix
Web accessibility patterns, WCAG compliance, and inclusive design. Use when implementing accessible UI, keyboard navigation, screen reader support, focus management, semantic HTML, or auditing for compliance. Triggers: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus, tab order, tabindex, alt text, color contrast, semantic HTML, landmark, role, aria-label, aria-labelledby, aria-describedby, aria-live, aria-expanded, aria-selected, aria-hidden, focus trap, roving tabindex, skip link, assistive technology.
react
by cosmix
Modern React development patterns including components, hooks, state management, routing, forms, and UI architecture. Covers React 19+, React Router v7, Jotai atoms, server components, accessibility, performance optimization, and testing. Use for building React applications with client-side routing, global state, component composition, and async data loading. Triggers: react, jsx, tsx, component, hook, useState, useEffect, useContext, useReducer, useMemo, useCallback, useRef, props, state, render, virtual DOM, reconciliation, single page application, spa, react-router, jotai, vite, bun, Next.js, Remix, client-side routing, server components, accessibility, a11y, ARIA, performance, code splitting, lazy loading, Suspense, error boundaries, form validation, UI components, design system, composition patterns.
data-visualization
by cosmix
Creates effective data visualizations, charts, dashboards, and reports across analytics, infrastructure monitoring, and ML domains. Covers library selection, UX design, and accessibility. Trigger keywords: chart, graph, plot, dashboard, report, visualization, matplotlib, plotly, d3, seaborn, grafana, tableau, superset, metabase, KPI, metric, analytics, histogram, heatmap, time-series, scatter, bar-chart.
rams
by brianlovin
Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
mapbox-cartography
by mapbox
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
generic-static-code-reviewer
by travisjneuman
Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.
generic-fullstack-ux-designer
by travisjneuman
Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
design-brief-generator
by jamesrochabrun
Generate comprehensive design briefs for design projects. Use this skill when designers ask to "create a design brief", "structure a design project", "define design requirements", or need help planning design work.
dribbble-ui-skills
by ihlamury
Dribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.
gumroad-ui-skills
by ihlamury
Gumroad's UI design system. Use when building interfaces inspired by Gumroad's aesthetic - dark mode, Inter font, 4px grid.
airtable-ui-skills
by ihlamury
Airtable's UI design system. Use when building interfaces inspired by Airtable's aesthetic - light mode, Inter font, 4px grid.
health-guardian
by openclaw
Proactive health monitoring for AI agents. Apple Health integration, pattern detection, anomaly alerts. Built for agents caring for humans with chronic conditions.
accessibility-toolkit
by openclaw
Friction-reduction patterns for agents helping humans with disabilities. Voice-first workflows, smart home templates, efficiency automation.
health-guardian
by openclaw
Proactive health monitoring for AI agents. Apple Health integration, pattern detection, anomaly alerts. Built for agents caring for humans with chronic conditions.
component-gallery
by tdimino
"Encyclopedic access to UI component patterns and design system implementations from component.gallery (60 components, 95 design systems, 2,676+ real-world examples). This skill should be used when researching how specific UI components are implemented across production design systems, comparing component patterns before building, finding alternative component names, or grounding frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows."
wcag-accessibility-audit
by mastepanoski
Comprehensive web accessibility audit using WCAG 2.1/2.2 guidelines. Evaluate compliance across 4 POUR principles (Perceivable, Operable, Understandable, Robust) with A, AA, AAA conformance levels.
frontend-orchestrator
by sanky369
Master coordinator skill that diagnoses your application's design maturity level and sequences all 13 frontend design skills in the optimal order. Analyzes current state, identifies gaps, and creates a personalized implementation roadmap for transforming your MVP into a world-class experience.
user-experience
by geekatron
"Parent orchestrator for AI-augmented UX methodology targeting tiny teams (1-5 people). Routes to 10 sub-skills by product lifecycle stage through criteria-gated waves. Invoke when team needs structured UX evaluation, user research, design systems, UX metrics, behavior diagnosis, feature prioritization, design sprints, or AI interaction design. Each sub-skill implements a proven UX framework with synthesis hypothesis confidence gates and MCP design tool integration. Triggers: UX, user experience, usability, heuristic evaluation, JTBD, lean UX, HEART metrics, atomic design, inclusive design, behavior design, Kano model, design sprint, AI-first design, UX audit, accessibility, design system, user research."
ux-inclusive-design
by geekatron
"Inclusive design and WCAG 2.2 accessibility evaluation sub-skill for the /user-experience parent skill. Performs WCAG 2.2 compliance audits across Perceivable, Operable, Understandable, and Robust principles (conformance levels A, AA, AAA) and applies Microsoft Inclusive Design methodology including Persona Spectrum analysis (permanent, temporary, situational disabilities). Produces accessibility audit reports and persona spectrum analyses. Invoke when teams need accessibility compliance evaluation, WCAG conformance auditing, screen reader compatibility assessment, color contrast analysis, cognitive load evaluation, or inclusive design review. Invoked by ux-orchestrator during Wave 3 lifecycle-stage routing or when user intent is \"Check accessibility\" at any lifecycle stage. Triggers: accessibility, WCAG, ARIA, screen reader, contrast, cognitive load, inclusive, a11y, inclusive design, WCAG 2.2, persona spectrum."
launchdarkly-ui-skills
by ihlamury
Launchdarkly's UI design system. Use when building interfaces inspired by Launchdarkly's aesthetic - dark mode, Inter font, 4px grid.
apple-ui-skills
by ihlamury
Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid.