Accessibility
Accessibility testing and improvements
design-consistency-auditor
by fefogarcia
Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications
accessibility-a11y
by canatufkansu
Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.
accessibility
by ma1orek
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Micro Polish
by justingoertz
Claude Code skill for micro polish
quality-audit
by lukeslp
"Code quality auditing skill that runs real analysis tools in the sandbox. Use when: auditing a codebase for security vulnerabilities, checking dependency health, scanning for accessibility issues, measuring performance, running linters, or generating a comprehensive quality report for a project."
playwright-best-practices
by jovermier
Playwright best practices including selectors, wait strategies, accessibility testing, responsive design, and flaky-test prevention. Use when writing or improving Playwright E2E tests.
ui-ux
by kieutrongthien
"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."
cui-css
by cuioss
Modern CSS standards covering essentials, responsive design, quality practices, and tooling for CUI projects
visual-design
by teslasoft-de
Create visual designs, design systems, and UI specifications. Use for typography scales, color systems, layout grids, component design, and accessibility compliance. Covers OKLCH color spaces, variable fonts, fluid typography, design tokens (W3C DTCG), and Atomic Design methodology. Keywords: UI design, color palette, design tokens, WCAG contrast, component library.
accessible-web-dev
by rcgsheffield
"Build WCAG 2.1 AA compliant web applications for University of Sheffield. Covers semantic HTML, ARIA patterns, form accessibility, keyboard navigation, color contrast, alt text, captions, and automated testing. Use when creating websites, web apps, forms, interactive components, or auditing accessibility for WCAG compliance, screen readers, keyboard access, or inclusive design."
uiux-excellence-guide
by Jpkovas
Create and refine visually strong interfaces with excellent UX, accessibility, and measurable performance. Use when requests involve designing new screens, redesigning existing UI, defining or evolving design systems/tokens, improving hierarchy/microcopy/motion, raising WCAG 2.2 compliance, improving touch ergonomics, or optimizing Web Vitals (LCP, INP, CLS) in web and app products.
review:ux
by IKatsuba
UX Review - analyzes feature for efficiency-first UX patterns, keyboard navigation, and pro-tool experience
lucide-icons
by aksuharun
Use Lucide icons correctly across any framework or environment. Lucide is a tree-shakeable SVG icon library with 1000+ icons. Use this skill when working with Lucide icons in React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, Vanilla JS, or static/server-side environments. Triggers include installing lucide icons, importing lucide components, customizing icon appearance, using dynamic icons, or using Lucide lab custom icons.
wcag-audit-operable-motion-deep
by Jkense
Animation and movement accessibility rules for dynamic interface elements
animator
by SebastiaanWouters
Create beautiful, performant, and accessible web animations with Motion One (motion.dev). Use when requests mention Motion One, motion.dev, WAAPI-based animation, UI micro-interactions, scroll-linked motion, staggered reveals, easing/timing tuning, animation performance optimization, or reduced-motion accessibility in vanilla JS/React/Vue apps.
ux-invariants-sample
by cubicle6
Sample UX Invariants whenever performing or reasoning about an UI/UX task.
ant-to-shadcn-migration
by uzhussain
"Migrate Ant Design UIs to shadcn/ui + Tailwind (React/CRA/Vite → Next.js App Router). Use for: component replacement (no wrappers), Tailwind-first styling, canonical component consolidation, global CSS cleanup, route/layout scaffolding, and migration gotchas."
Technical Clarity Skill v3.0 (Reasoning-Activated)
by NaveedTechLab
Ready to use: Invoke this skill to review technical content for clarity, accessibility, and comprehension at target proficiency level. Run AFTER content creation, BEFORE finalization.
developing-storybook
by sumik5
Storybook development guide covering CSF3 story writing, interaction testing (play function), accessibility testing (axe-core), visual regression testing, Next.js/React framework integration, MSW network mocking, addon ecosystem, and story-driven component development. MUST load when .stories.tsx/.ts files detected or Storybook setup/configuration needed. For general frontend UI implementation, use designing-frontend. For E2E browser testing, use testing-e2e-with-playwright. For React-specific concerns (internals, performance, RTL), use developing-react.
accessibility
by iulspop
Audits components and pages for WCAG accessibility issues and suggests fixes. Use when building new UI, reviewing components for a11y compliance, or fixing reported accessibility bugs.
frontend
by scottymcandrew
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
audit-methodology
by leobrival
Comprehensive audit methodology for web applications covering accessibility (RGAA 4.1), security (OWASP Top 10), performance (Core Web Vitals), and eco-design. Use when users need guidance on audit processes, testing methodologies, compliance standards, or audit best practices. Includes detailed reference documentation for each audit domain.
wcag-audit-operable-keyboard-focus
by Jkense
Validate logical keyboard navigation order for interface elements
check-a11y
by leobrival
Perform accessibility audit on web pages. Use when users ask to check accessibility, audit WCAG compliance, verify ARIA usage, check color contrast, audit keyboard navigation, or analyze screen reader compatibility. Detects ARIA issues, focus problems, contrast issues, and semantic HTML violations.