deepakkamboj/claude-marketplace Skills

A development assistant that enforces accessibility-first coding practices during code generation. Use this skill when writing new UI components, features, or interfaces to ensure WCAG 2.1 Level AA compliance from the start.\\n\\n<example>\\nContext: Developer is building a new user registration form for a web application.\\nuser: \\\"Create a registration form with email, password, and submit button.\\\"\\nassistant: \\\"I'll create an accessible registration form using semantic HTML, proper label associations, keyboard operability, and WCAG AA compliant structure.\\\"\\n<commentary>\\nThe accessible-dev skill generates accessible code by default. It uses semantic HTML elements, associates labels with form inputs, ensures keyboard navigation works, and follows WCAG 2.1 AA standards without requiring explicit accessibility requests.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Developer needs to add a modal dialog to display user settings.\\nuser: \\\"Add a settings modal that opens when clicking the gear icon.\\\"\\nassistant: \\\"I'll create an accessible modal with proper focus management, keyboard trapping, ARIA attributes, and an accessible close button. The modal will trap focus while open and return focus to the trigger button when closed.\\\"\\n<commentary>\\nAccessible-dev automatically applies accessibility best practices for complex UI patterns like modals, including focus management, keyboard interactions (Escape to close, Tab to navigate), and proper ARIA roles and states.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Developer has just completed building a dashboard component.\\nassistant: \\\"I've completed the dashboard component with accessible navigation, semantic landmarks, and keyboard shortcuts. Would you like me to run a comprehensive accessibility review using the accessibility-tester agent?\\\"\\n<commentary>\\nAfter completing a feature or component, accessible-dev proactively suggests running a comprehensive accessibility audit. This hybrid approach ensures code is accessible during generation and verified after completion.\\n</commentary>\\n</example>

Color contrast analyzer for WCAG compliance. Use when analyzing color contrast in code files, when user mentions WCAG compliance, color accessibility, contrast ratios, or when discussing colors in UI components. Calculates contrast ratios, identifies violations, and suggests accessible color alternatives that preserve design themes.

Generates comprehensive Playwright accessibility tests with axe-core integration for any UI component or page. Use this skill to create automated accessibility regression tests that verify WCAG 2.1 Level AA compliance.\\n\\n<example>\\nContext: Developer has just completed building a login form component.\\nuser: \\\"Generate Playwright accessibility tests for the login form.\\\"\\nassistant: \\\"I'll generate comprehensive Playwright tests including axe-core accessibility scans, keyboard navigation tests, form label verification, and focus management tests for your login form.\\\"\\n<commentary>\\nThe generate-a11y-tests skill creates framework-agnostic Playwright tests that verify accessibility compliance. Tests include automated axe-core scanning and manual verification of keyboard interactions, focus management, and ARIA attributes.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Developer needs to add accessibility tests for a modal dialog component.\\nuser: \\\"Create accessibility tests for src/components/Modal.tsx. Focus on keyboard trapping and ARIA attributes.\\\"\\nassistant: \\\"I'll generate Playwright tests for your Modal component including: axe-core violation scanning, focus trap verification, Escape key handling, focus restoration tests, and ARIA role/state validation.\\\"\\n<commentary>\\nThe skill analyzes the component structure to generate relevant tests. For modals, it focuses on focus management, keyboard interactions (Escape to close), and proper ARIA implementation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: Developer wants to test an entire page for accessibility.\\nuser: \\\"Generate accessibility tests for /checkout page.\\\"\\nassistant: \\\"I'll create comprehensive Playwright tests for the checkout page including full-page axe-core scans, keyboard navigation flow through the entire checkout process, form accessibility, and color contrast verification.\\\"\\n<commentary>\\nFor page-level testing, the skill generates broader tests covering complete user flows, navigation patterns, and end-to-end accessibility verification rather than isolated component tests.\\n</commentary>\\n</example>

Analyzes code for WCAG 2.4.4 Link Purpose (In Context) compliance. Identifies generic link text, ambiguous links, and links without sufficient context. Recommends descriptive link text and proper ARIA attributes.

Accessibility refactoring specialist. Automatically fixes accessibility issues across multiple files. Performs complex refactoring like extracting accessible components, restructuring markup, and implementing proper ARIA patterns.

Analyzes code for WCAG 1.4.1 Use of Color compliance. Identifies where color is used as the only means of conveying information and recommends additional visual indicators like text, icons, patterns, or ARIA attributes.