无障碍
无障碍测试与改进
Accessibility
eyadsibai
This skill should be used when the user asks about "accessibility", "a11y", "WCAG", "screen readers", "keyboard navigation", "ARIA", "accessible design", "inclusive design", or mentions making apps accessible.
design-tokens
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
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.
accelint-react-testing
gohypergiant
Use when writing, reviewing, or refactoring React component tests with Testing Library. Load when you see render(), screen, fireEvent, userEvent, waitFor, or *.test.tsx files. Covers query priority (getByRole > getByLabelText > getByText), user-centric testing patterns, async utilities, custom renders with providers, and accessibility-first assertions. Keywords include RTL, Testing Library, screen, getByRole, findBy, queryBy, userEvent, waitFor, toBeInTheDocument, testing-library/react, testing-library/user-event, jest-dom.
frontend-enhancer
auldsyababua
This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
frontend-design
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."
Component Patterns Skill
markus41
"UI component patterns with style-specific implementations and accessibility"
ink
georg-unterholzner
Build CLI applications using React. Use when creating terminal UIs, handling keyboard input, or building interactive command-line tools with React components. Supports flexbox layouts, text styling, focus management, and accessibility.
brain
JFusco
Consult Joe's Brain for curated frontend and CMS guidance and official documentation. Use when the user asks to consult, check, search or use Brain in plain language, or explicitly invokes /brain or $brain. Do not activate merely because a task involves a covered framework or CMS.
speckit-checklist
ZenRay
"Generate a custom checklist for the current feature based on user requirements."
ui-ux-reviewer
ArjenSchwarz
Evaluate and improve user experience of interfaces (CLI, web, mobile)
speckit-checklist
mixpanel
"Generate a custom checklist for the current feature based on user requirements."
accessibility-by-default
noejunior299
Treats accessibility as a baseline requirement, not a feature. WCAG 2.1/2.2 AA principles embedded into every decision.
web-design-guidelines
Jst-Well-Dan
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
geo-infer-health
ActiveInferenceInstitute
Spatial epidemiology and public health analysis. Use when modeling disease spread, analyzing health disparities, performing spatial health risk assessment, building epidemiological surveillance systems, or assessing healthcare accessibility.
highcharts
vamseeachanta
Create enterprise-grade interactive charts with Highcharts
web-testing
mrgoonie
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
aesthetic
mrgoonie
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.
frontend-reviewer
olehsvyrydov
Senior Frontend Code Reviewer with 12+ years JavaScript/TypeScript experience. Use when reviewing React/TypeScript code, checking code quality and style, verifying accessibility compliance, ensuring test coverage, or configuring linting tools (ESLint, Prettier).
accessibility-patterns
organvm-iv-taxis
Build inclusive web experiences following WCAG guidelines. Covers semantic HTML, ARIA, keyboard navigation, color contrast, and testing strategies. Triggers on accessibility, a11y, WCAG, screen readers, or inclusive design requests.
ratatui-tui
blacktop
Build terminal UIs with ratatui following 2026 Rust best practices. Use when: (1) Creating new TUI apps, (2) Adding widgets/layouts, (3) Keyboard navigation/state management, (4) Image integration via ratatui-image, (5) Async event handling, (6) Release optimization. Covers v0.30.0+ API, Elm Architecture, StatefulWidget, color-eyre.
frontend-design-systems
organvm-iv-taxis
Systematic approach to building consistent, maintainable frontend UI components with design systems and component libraries
uikit-accessibility-auditor
rgmez
Audit UIKit-based screens for accessibility issues with concrete VoiceOver and Dynamic Type fixes
appkit-accessibility-auditor
rgmez
Audit macOS AppKit interfaces for accessibility, focusing on VoiceOver, keyboard navigation, and semantics