Accessibility
Accessibility testing and improvements
cypress-agent-skill
by YTItsfrost
Production-grade Cypress E2E and component testing — selectors, network stubbing, auth, CI parallelization, flake elimination, Page Object Model, and TypeScript support. The complete Cypress skill for AI agents.
accessibility
by vendeesign
"Garde-fou accessibilité pour le code UI. Activer quand Claude écrit ou modifie : du HTML/JSX/TSX/Vue/Svelte, des composants interactifs (boutons, formulaires, modals, menus, tabs, accordéons), de la navigation/routing, des images/icônes/médias, ou de la gestion du focus. Couvre WCAG AA : sémantique, labels, clavier, contrastes, touch targets, ARIA. Complémentaire avec frontend-design (qui couvre l'esthétique). Ne pas activer pour du CSS pur sans markup, du JavaScript sans manipulation du DOM, du code backend, ou des fichiers de configuration."
frontend-react
by ProjAnvil
Professional React development skill covering Next.js, React Server Components, Tailwind CSS, and the React ecosystem. Use this skill when building modern React applications, implementing Next.js features, creating UI components with shadcn/ui, or working with complex state management.
frontend-design
by vendeesign
"Garde-fou design frontend. Activer quand Claude génère ou modifie du code UI visuel : HTML/CSS, JSX/TSX avec styles, composants avec layout/couleurs/typo, pages complètes, landing pages, dashboards, formulaires stylés. Pousse vers des interfaces distinctives et production-grade — évite l'esthétique générique 'AI slop' (cyan/violet, glassmorphism, card grids identiques). Couvre : direction artistique, typographie, couleur, layout, animation, responsive, UX writing. Complémentaire avec accessibility (qui couvre WCAG/ARIA). Ne pas activer pour du code backend, de la logique métier sans rendu visuel, des scripts CLI, ou des fichiers de configuration."
Universal Design System — Claude Code Skill
by mkatogui
AI-native design system with BM25 reasoning engine — 9 palettes, 496 W3C DTCG tokens, 31 components, WCAG 2.1 AA validated, Tailwind/React/Vue/Svelte output, 57 industry sectors
mermaidjs-v11
by vibery-studio
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
aesthetic
by vibery-studio
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
ui-ux-pro-max
by vibery-studio
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
accessibility-by-default
by noejunior299
Treats accessibility as a baseline requirement, not a feature. WCAG 2.1/2.2 AA principles embedded into every decision.
axe
by aliceisjustplaying
Control iOS Simulators via accessibility APIs. Use this skill when the user wants to automate iOS simulator interactions, tap buttons by accessibility label, type text, swipe, take screenshots, describe the UI accessibility tree, or test iOS apps programmatically.
frontend-web-dev-expert
by dy9759
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
drupal-intent-testing
by scottfalconer
Exploratory, intent-focused UI testing for Drupal sites using the agent-browser CLI (accessibility-tree based; no vision model required). Use to “poke around like a human”: create/edit content, change module configuration, build Canvas pages, and verify the intended UX/output. Supports guided testing, seeded fuzz/monkey testing, and paired before/after comparisons with artifacts (snapshots, screenshots, console/errors).
accessibility-checker
by LKB-99
"Checks web accessibility using WCAG. Use this skill when users want to check, audit, or fix web accessibility issues, or test against WCAG standards. Triggers: accessibility, a11y, WCAG, accessibility audit, accessibility checker, web accessibility, acessibilidade, acessibilidade web, auditoria de acessibilidade."
mantine-reviewing
by meriley
Review React components using Mantine UI library for accessibility, Styles API correctness, component patterns, and common pitfalls. Use when reviewing Mantine code or before merging Mantine-based PRs.
web-design-mastery
by anilcancakir
"Production-grade web application UI design based on Refactoring UI principles. ALWAYS activate for: landing page, dashboard, auth screens, hero sections, card design, button design, form inputs, navigation, layouts, spacing decisions, typography hierarchy, color selection, shadows, depth, empty states, background decoration. Provides design workflow, visual hierarchy, spacing systems (4px grid), type scale, HSL color systems, shadow elevation, finishing touches. Turkish: sayfa tasarımı, UI/UX, frontend tasarım, web tasarım, güzel arayüz, modern tasarım, card tasarımı, buton stili, form tasarımı, renk paleti, tipografi. English: beautiful interface, sleek design, premium feel, visual hierarchy, whitespace, color palette, typography scale."
frontend-web-dev-expert
by dy9759
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
mantine-developing
by meriley
Build React UIs with Mantine component library. Customize styles with Styles API, handle forms with @mantine/form, implement theming, and avoid accessibility pitfalls. Use when creating Mantine components or fixing styling issues.
angular-material
by pluginagentmarketplace
Angular Material UI components, theming, and accessible interface design
tmux-cli-test
by gpu-cli
Test CLI applications interactively using tmux sessions. Use when testing TUI apps (ratatui dashboard, interactive prompts), verifying CLI command output, testing keyboard navigation, or validating terminal rendering. Launches commands in tmux, waits on conditions (never sleeps), captures frames, sends keypresses, and asserts on output. Specifically designed for gpu-cli but works with any CLI. Use this skill when asked to test, verify, or QA any terminal-based UI or CLI command flow.
web-app-designer
by CAPHTECH
"Webアプリの個別画面・コンポーネントのデザインを体系的に行うスキル。デザインプロセス・レイアウト・コンポーネント設計・インタラクション・アクセシビリティなどWebデザインの確立された手法を適用する。デザインシステム全体の構築・運用はdesign-system-builderスキルを使用すること。Use when: 「Webアプリをデザインして」「UIを設計して」「画面をデザインして」「レスポンシブ対応して」「アクセシビリティを改善して」「コンポーネントを設計して」「カラーパレットを決めて」と言われた時。"
@tank/framer-motion
by tankpkg
Motion for React (formerly Framer Motion) animation mastery. Covers the complete API: motion component, AnimatePresence, layout animations, spring physics, scroll-linked animations, gestures, motion values, useAnimate, variants/orchestration, SVG animation, drag, performance optimization, LazyMotion code splitting, and accessibility (reduced motion). Includes production-ready recipes for page transitions, modals, staggered lists, shared element transitions, parallax, and interactive components. Synthesizes Motion.dev documentation (2025-2026), Nabors (Animation at Work), Head (Designing Interface Animation), Saffer (Microinteractions), Kowalski (Animations on the Web), and production patterns from Linear, Vercel, and Notion. Trigger phrases: "framer motion", "motion/react", "motion component", "animate", "AnimatePresence", "exit animation", "layout animation", "layoutId", "shared layout", "spring animation", "spring physics", "useAnimate", "useScroll", "useMotionValue", "useTransform", "useSpring", "scroll animation", "parallax", "whileHover", "whileTap", "whileInView", "whileDrag", "gesture animation", "drag animation", "variants", "staggerChildren", "page transition", "modal animation", "enter animation", "exit animation", "keyframes", "motion value", "LazyMotion", "MotionConfig", "Reorder", "SVG path animation", "pathLength", "reduced motion", "animation performance", "layout animation gotcha", "spring preset", "tween", "easing", "stagger", "orchestration", "animate presence", "motion react", "framer-motion to motion", "motion library react"
@tank/figma-to-code
by tankpkg
Use when implementing UI from Figma designs with pixel-perfect fidelity. Covers the complete Figma-to-code pipeline: extracting design specs via Figma MCP tools (get_design_context, get_screenshot, get_variable_defs), translating every visual property to exact CSS (fonts, colors, spacing, shadows, gradients, border-radius, opacity), building design token systems, mapping Auto Layout to Flexbox/Grid, converting component variants to props, and verifying implementation against Figma screenshots. Requires: Figma desktop MCP (figma-desktop) for design extraction. Synthesizes Figma Dev Mode API (2024-2025), CSS Specifications (Color L4, Flexbox, Grid, Container Queries), WAI-ARIA Authoring Practices, Google Fonts Best Practices, and Playwright Visual Testing. Trigger phrases: "implement this Figma", "Figma to code", "pixel perfect", "match the design", "copy the Figma", "design implementation", "implement this design", "build from Figma", "Figma handoff", "translate design to code", "code this component from Figma", "design to HTML", "design to React", "design to Tailwind", "match Figma exactly", "implement UI from design", "Figma screenshot", "convert design", "make it look like Figma", "same as design", "design specs", "implement mockup", "from Figma file"
scanning-for-accessibility-issues
by atalovesyou
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
ui-animation
by LukasStrickler
"Guide tasteful UI animation with easing, springs, layout animations, gestures, and accessibility. Covers Tailwind and Motion patterns. Use when: (1) Implementing enter/exit animations, (2) Choosing easing curves, (3) Configuring springs, (4) Layout animations and shared elements, (5) Drag/swipe gestures, (6) Micro-interactions, (7) Ensuring prefers-reduced-motion accessibility. Triggers: animate, animation, easing, spring, transition, motion, layout, gesture, drag, swipe, reduced motion, framer motion."