Accessibility
Accessibility testing and improvements
vscode-extension-uiux
by kcchien
Build secure, elegant, and accessible VS Code extensions with excellent UI/UX. Covers the complete Extension API including webviews, tree views, custom editors, sidebars, panels, and activity bar integration. Use this skill when: (1) Creating new VS Code extensions, (2) Building webview-based UIs, (3) Implementing tree views or custom editors, (4) Adding sidebar/panel contributions, (5) Ensuring extension security (CSP, message validation), (6) Theming and accessibility compliance, (7) Reviewing or improving existing extension UI/UX.
data-visualizer
by oakoss
'Charts, dashboards, and data visualizations using Recharts, Chart.js, and D3.js. Use when building charts, dashboards, or interactive data displays. Use for chart type selection, data storytelling, annotation patterns, responsive design, accessibility, and performance optimization.'
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".
frontend-ui-ux-design
by DauQuangThanh
Creates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementations. Produces wireframes, mockups, design specifications, and implementation guidelines. Use when designing user interfaces, creating design systems, building component libraries, implementing responsive designs, ensuring accessibility compliance, or when users mention UI design, UX design, interface design, design systems, user experience, or frontend design patterns.
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.
frontend-coding
by DauQuangThanh
Expert frontend development guidance covering React, Vue, Angular, TypeScript, state management, component architecture, performance optimization, accessibility, testing, and modern web APIs. Produces production-ready, maintainable, and performant frontend code with best practices. Use when building web applications, implementing UI components, managing application state, optimizing performance, or when users mention React, Vue, Angular, TypeScript, hooks, state management, components, or frontend development.
frontend-design-review
by DauQuangThanh
Conducts comprehensive frontend design reviews covering UI/UX design quality, design system validation, accessibility compliance, responsive design patterns, component library architecture, and visual design consistency. Evaluates design specifications, Figma/Sketch files, design tokens, interaction patterns, and user experience flows. Identifies usability issues, accessibility violations, design system deviations, and provides actionable recommendations for improvement. Produces detailed design review reports with severity-rated findings, visual examples, and implementation guidelines. Use when reviewing frontend designs, validating design systems, ensuring accessibility compliance, evaluating component libraries, assessing responsive designs, or when users mention design review, UI/UX review, Figma review, design system validation, accessibility audit, or frontend design quality.
e2e-testing-expert
by YuniorGlez
Senior End-to-End (E2E) Test Architect for 2026. Specialized in Playwright orchestration, visual regression testing, and high-performance CI/CD sharding. Expert in building resilient, auto-waiting test suites using the Page Object Model (POM), automated accessibility auditing (Axe-core), and deep-trace forensic debugging.
component-interface-design
by qodex-ai
Design interfaces using component libraries and design systems. Creates cohesive UIs with pre-built accessible component primitives.
interaction-design
by petekp
Design intuitive, meaningful interactions grounded in user goals and cognitive principles. Use when designing component behaviors, user flows, feedback systems, error handling, loading states, transitions, accessibility, keyboard navigation, touch/gesture interactions, or when evaluating interaction quality. Also use for modal vs modeless decisions, direct manipulation patterns, input device considerations, emotional/dramatic aspects of UX, or when asked about making interfaces feel responsive, humane, and goal-directed.
seo-pro-max
by aycanozarpaci
Production-grade SEO implementation skill. Analyzes the existing project first, asks the user the right questions, and then implements every chosen SEO surface (meta tags, Open Graph, Twitter Cards, canonical, robots, sitemap, schema.org/JSON-LD, favicons, llms.txt, admin-panel wiring, database schema) exactly as the user decided. The skill is an EXECUTOR, not a decision-maker.
macos-app-design
by petekp
Use when designing or building native macOS applications with SwiftUI or AppKit. Triggers on menu bar structure, keyboard shortcuts, multi-window behavior, Liquid Glass design system, macOS Tahoe/Sequoia, sidebar navigation, toolbar design, app icons, SF Symbols, or making an app feel like a "good Mac citizen."
universal-design-for-learning
by reggiechan74
This skill should be used when the user asks to "design accessible curriculum", "apply UDL", "accommodate diverse learners", "create inclusive workshops", "ensure accessibility", or references Universal Design for Learning. Also applies when generating lesson plans, outlines, or activities to ensure multiple means of representation, engagement, and expression. Provides practical guidance for creating inclusive, accessible learning experiences in 1-2 day workshop contexts.
frontend-design
by vipulgupta2048
Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
ppt-deck
by cklxx
PPT 产出 playbook（目标/受众 -> 故事线 -> 版式设计 -> 可访问性 -> 交付），含 10/20/30 与 Accessibility 最佳实践。
Accessibility Engineer
by daffy0208
Implement accessibility (a11y) best practices to make applications usable by everyone. Use when building UIs, conducting accessibility audits, or ensuring WCAG compliance. Covers screen readers, keyboard navigation, ARIA attributes, and inclusive design patterns.
applying-web-design-guidelines
by alunadev
Audits and enforces web interface standards covering accessibility, performance, UX, and code quality from Vercel Engineering's Web Interface Guidelines. Use this skill when reviewing UI code, checking accessibility compliance, auditing design implementations, running pre-merge frontend checks, or when someone asks to "review my UI", "check accessibility", "check my site", "audit design", or "is this component correct". Apply proactively when writing form elements, interactive components, images, animations, or anything that users directly touch — these guidelines prevent common mistakes before they reach production.
swiftui-developer
by beshkenadze
Develop SwiftUI applications for iOS/macOS. Use when writing SwiftUI views, managing state, or building Apple platform UIs.
ios-design-review
by beshkenadze
Review iOS code for Apple HIG compliance. Use when validating SwiftUI/UIKit code, checking accessibility, or auditing iOS design implementation.
ada-compliance
by beshkenadze
Use when reviewing accessibility of websites, apps, or facilities, conducting WCAG audits, preparing for ADA Title II/III deadlines, or checking digital/physical accessibility requirements.
ios-ux-design
by mosif16
Activate this skill when analyzing iOS app UI/UX, evaluating iOS design patterns, proposing iOS interface improvements, or creating iOS implementation specifications. Provides deep expertise in Apple Human Interface Guidelines, SwiftUI patterns, native iOS components, accessibility standards, and iOS-specific interaction paradigms.
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"
aesthetic
by ngxtm
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Integrate localized specialized skills (chrome-devtools, ImageMagick) with native vision intelligence to achieve premium aesthetic standards.