Accessibility
Accessibility testing and improvements
ui-design-iteration
by ozten
Iterates on data-intensive UI designs to improve scannability, hierarchy, accessibility, and systematization. Use when improving an existing UI, reviewing a design for UX issues, or transforming a functional-but-flat interface into a polished product.
a11y-annotation-generator
by Dexploarer
Adds accessibility annotations (ARIA labels, roles, alt text) to make web content accessible. Use when user asks to "add accessibility", "make accessible", "add aria labels", "wcag compliance", or "screen reader support".
webdev-token-input
by ozten
Multi-value token/chip input patterns for tag inputs, filter bars, and email "To" fields. Builds on webdev-combobox-autocomplete with token state management, key:value parsing, context-dependent suggestions, and token editing patterns. Use when building filter inputs, tag selectors, multi-select chips, or any input that creates visual tokens/pills from text.
webdev-combobox-autocomplete
by ozten
Foundational patterns for building accessible autocomplete/combobox components with state management, ARIA patterns, keyboard navigation, async suggestions, and framework-agnostic implementation. Use when building autocomplete inputs, command palettes, search inputs, select replacements, or any dropdown with keyboard navigation and suggestions.
wcag-compliance-checker
by Dexploarer
Checks websites for WCAG 2.1 Level AA compliance, identifies accessibility violations, and provides remediation guidance. Use when user asks to "check accessibility", "wcag compliance", "a11y audit", "accessibility violations", or "screen reader testing".
Blazor Framework - Quick Reference (SKILL.md)
by FortiumPartners
Next: See REFERENCE.md for comprehensive guides, advanced patterns, and production deployment strategies.
kanpeki
by fellipeutaka
"Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Covers installation, component patterns, forms, theming, and dark mode with React Aria Components + Tailwind CSS 4.1 + CVA."
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-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."
semantic-html
by schalkneethling
Write well-considered semantic HTML that serves all users. Use when creating components, page structures, or reviewing markup. Emphasizes native HTML elements over ARIA. Treats proper document structure and accessibility as foundations rather than afterthoughts.
playwright
by fellipeutaka
Write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with Playwright test files, configuring playwright.config.ts, writing browser automation, debugging flaky E2E tests, setting up authentication for tests, API mocking/interception, visual regression testing, accessibility testing, or CI/CD integration for browser tests. Triggers: Playwright, E2E test, end-to-end, browser test, @playwright/test, playwright.config, page object model, test fixture, visual snapshot, trace viewer.
aesthetic
by samhvw8
"Visual design intelligence and UI aesthetics. Integrates: chrome-devtools, ai-multimodal, media-processing. Capabilities: design analysis, visual hierarchy, color theory, typography, micro-interactions, animation, design systems, accessibility. Actions: analyze, design, create, capture, evaluate, implement UI aesthetics. Keywords: Dribbble, Behance, Mobbin, design inspiration, visual hierarchy, color palette, typography, spacing, animation, micro-interaction, design system, style guide, accessibility, WCAG, contrast ratio, golden ratio, whitespace, visual rhythm. Use when: building beautiful UIs, analyzing design inspiration, implementing visual hierarchy, adding animations/micro-interactions, creating design systems, evaluating aesthetic quality, capturing design screenshots."
ios-ui-design-guide
by muheun
Apply iOS/SwiftUI design principles following Apple Human Interface Guidelines when building any iOS UI component. Only execute this when the current project is an iOS project and involves UI-related work. Use this skill for SwiftUI views, UIKit components, or iOS app development. Ensures HIG compliance with Clarity, Deference, and Depth principles, system colors with Dark Mode support, 8pt grid spacing, SF Pro typography with Dynamic Type, and native iOS interaction patterns. Prevents common anti-patterns like fixed text sizes, Dark Mode neglect, and Safe Area violations.
frontend-developer
by BenjaminG
Specialist for modern React applications, TypeScript frontend code, UI development, TanStack Query, component creation, CSS styling, responsive design, accessibility, form validation, state management, routing, and performance optimization. Use for ANY work involving .tsx/.jsx files, React components, frontend bugs, or client-side development tasks.
web-perf
by nicholasgriffintn
Audits web performance using Chrome DevTools MCP. Measures Core Web Vitals, finds render-blocking resources, dependency chains, layout shifts, caching issues, and accessibility gaps. Use for audits, profiling, debugging, or optimising page load performance and Lighthouse scores.
tailwind
by display-design-studio
Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).
automating-ios-simulator
by gannonh
Use this skill when the user asks to run an iOS app, launch an app in the simulator, tap or click buttons, interact with simulator UI, automate iOS testing, take screenshots, enter text in fields, swipe or scroll, check accessibility, or perform any iOS simulator interaction. Covers app launching, UI navigation, gestures, form input, and simulator lifecycle management.
css-tailwind-styling
by Adonis0123
Expert guidance for writing clean, performant CSS and Tailwind CSS. Use when creating styles, designing components, optimizing performance, or establishing styling conventions. Covers modern CSS features, Tailwind utility patterns, responsive design, accessibility, and team collaboration standards.
design-system-starter
by ArieGoldkin
Use this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.
Accessibility Patterns
by Kaakati
WCAG 2.2 Level AA compliance patterns for Flutter applications including Semantics widgets, screen reader support, keyboard navigation, and color contrast requirements
accessibility-patterns
by Kaakati
"Expert accessibility decisions for iOS/tvOS: when to combine vs separate elements, label vs hint selection, Dynamic Type layout strategies, and WCAG AA compliance trade-offs. Use when implementing VoiceOver support, handling Dynamic Type, or ensuring accessibility compliance. Trigger keywords: accessibility, VoiceOver, Dynamic Type, WCAG, a11y, accessibilityLabel, accessibilityElement, accessibilityTraits, isAccessibilityElement, reduceMotion, contrast, focus"
front-end-checklist
by fabricioctelles
This skill should be used when a developer or team needs to review, validate, or audit front-end code before launching a website or HTML page to production. Triggers on requests such as "run the front-end checklist", "validate my front-end", "check my site before launch", or when the user asks for a structured review of HTML, CSS, JavaScript, accessibility, performance, security, or design quality.
ios-engineer
by ky1ejs
You MUST use this skill for ANY changes you make within to the iOS app. Senior iOS engineer with visual feedback capabilities via simulator MCP tools.
Ultimate Design System Master
by fabricioctelles
A collection of skills for AI agents (Kiro, Cursor, Windsurf, Claude Code, and others). Each skill is a reusable module that teaches the agent to perform complex tasks with context, structure, and best practices.