安装命令
npx skills add https://github.com/devanb/lucidlog --skill 'Frontend Accessibility'🇨🇳中文介绍
前端可访问性
此技能为 Claude Code 提供具体指导，说明如何遵循与前端可访问性处理相关的编码标准。
何时使用此技能
- 在
.tsx或.jsx文件中创建或编辑 React 组件时 - 实现语义化 HTML 元素（nav、main、button、article、section 等）时
- 构建表单并确保所有输入都有相关联的标签时
- 实现键盘导航和焦点管理时
- 添加交互元素（如按钮、链接、模态框或菜单）时
- 选择颜色并验证对比度是否符合 WCAG 标准（最低 4.5:1）时
- 为图像或图标添加替代文本时
- 为复杂的 UI 模式实现 ARIA 属性时
- 使用屏幕阅读器测试组件时
- 创建逻辑化的标题层级结构（h1-h6）时
- 为键盘导航实现可见的焦点指示器时
- 在动态内容、模态框或单页应用中管理焦点时
- 确保触摸目标尺寸适合可访问性时
使用说明
详情请参阅此文件提供的信息：前端可访问性
每周安装次数
–
代码仓库
首次出现时间
–
安全审计
🇺🇸English
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
Weekly Installs
–
Repository
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
