DevanB/Frontend Accessibility
.claude/skills/frontend-accessibility/SKILL.md
Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add DevanB/lucidlog Frontend AccessibilityInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 12:58 PM5.2s1 file scanned
SKILL.md
- name:
- Frontend Accessibility
- description:
- Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
Frontend Accessibility
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend accessibility.
When to use this skill
- When creating or editing React components in
.tsxor.jsxfiles - When implementing semantic HTML elements (nav, main, button, article, section, etc.)
- When building forms and ensuring all inputs have associated labels
- When implementing keyboard navigation and focus management
- When adding interactive elements like buttons, links, modals, or menus
- When choosing colors and verifying contrast ratios meet WCAG standards (4.5:1 minimum)
- When adding alternative text to images or icons
- When implementing ARIA attributes for complex UI patterns
- When testing components with screen readers
- When creating logical heading hierarchies (h1-h6)
- When implementing visible focus indicators for keyboard navigation
- When managing focus in dynamic content, modals, or single-page applications
- When ensuring touch targets are appropriately sized for accessibility
Instructions
For details, refer to the information provided in this file: frontend accessibility
Related Skills
DevanB/Testing Test Writing
development
VerifiedTrustedCommunity
Write focused tests for core user flows and critical paths using Pest framework, with minimal tests during development and strategic coverage at completion points. Use this skill when creating or editing test files in tests/Feature/ or tests/Unit/ directories, when writing Pest tests with descriptive names, when testing critical user workflows and business logic, when mocking external dependencies, when implementing fast unit tests, when testing behavior rather than implementation details, or when deciding what needs test coverage at feature completion.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Validation
tools
VerifiedTrustedCommunity
Implement server-side validation with allowlists, specific error messages, type checking, and sanitization to prevent security vulnerabilities and ensure data integrity. Use this skill when creating or editing form request classes, when validating API inputs, when implementing validation rules in controllers or services, when writing client-side validation for user experience, when sanitizing user input to prevent injection attacks, when validating business rules, when implementing error message display, or when ensuring consistent validation across all application entry points.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Tech Stack
tools
VerifiedTrustedCommunity
Understand and adhere to the project's technology stack including Laravel, PHP, React, PostgreSQL, Pest, Tailwind CSS, and all configured tools and services. Use this skill when making architectural decisions, when choosing libraries or packages, when configuring development tools, when setting up testing frameworks, when implementing authentication, when integrating third-party services, when configuring CI/CD pipelines, when setting up local development environments, or when ensuring consistency with the established tech stack across all parts of the application.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Error Handling
development
VerifiedTrustedCommunity
Implement user-friendly error handling with specific exception types, centralized error handling, graceful degradation, and proper resource cleanup. Use this skill when implementing error handling in controllers, services, or API endpoints, when creating custom exception classes, when writing try-catch blocks, when handling external service failures, when implementing retry strategies, when displaying error messages to users, when cleaning up resources in finally blocks, or when implementing fail-fast validation and error detection.
SKILL.mdUpdated Apr 16, 2026