AgentSkillsCN

Frontend Accessibility

构建无障碍的用户界面，让所有用户都能顺畅使用，包括那些依赖辅助技术的用户。当创建UI组件、表单、模态框、导航栏，或任何交互式元素时，可使用此技能。适用于*.tsx、*.jsx、*.vue、*.html等前端组件文件的开发工作。对于实现语义化的HTML元素（nav、main、button、article）、通过可见的焦点指示器支持键盘导航、确保合适的色彩对比度（文本对比度至少为4.5:1）、为图片添加替代文本、使用ARIA标签与属性、构建合理的标题层级（h1-h6），以及在动态内容与单页应用中妥善管理焦点而言，此项技能至关重要。

SKILL.md
--- frontmatter
name: Frontend Accessibility
description: Build accessible user interfaces that work for all users including those using assistive technologies. Use this skill when creating UI components, forms, modals, navigation, or any interactive elements. Apply when working on files like *.tsx, *.jsx, *.vue, *.html, or any frontend component files. Essential for implementing semantic HTML elements (nav, main, button, article), keyboard navigation with visible focus indicators, proper color contrast ratios (4.5:1 for text), alt text for images, ARIA labels and attributes, logical heading hierarchy (h1-h6), and focus management in dynamic content and SPAs.

When to use this skill:

  • •When creating or editing React/Vue/Angular component files (*.tsx, *.jsx, *.vue)
  • •When adding interactive elements like buttons, links, forms, or modals
  • •When implementing navigation menus or tab interfaces
  • •When adding images that need alt text descriptions
  • •When working with color choices that affect readability
  • •When implementing keyboard-navigable interfaces
  • •When adding ARIA attributes for complex components
  • •When building dynamic content that requires focus management
  • •When creating form inputs with proper labels
  • •When organizing content with headings and landmarks
  • •When testing UI with screen readers

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.

Instructions

For details, refer to the information provided in this file: frontend accessibility