Aitishiku.com📌 Skill基础信息
- Skill名称: gamut-accessibility
- 简称: Gamut 可访问性技能
- 来源: 官方 (Codecademy)
- 运行宿主: 专为 Codecademy Gamut 设计组件库的 Agent 工具运行
- 核心定位: 为 Gamut 组件库提供 WCAG 标准可访问性实现指导，适用于组件开发、覆盖层构建和可访问性审计场景
🧩 内部核心组成
核心能力模块
- 组件可访问性模式库: 补充基础 accessibility.mdc 规则，提供 Gamut 组件特定的可访问性模式
- 组件参考索引: 涵盖按钮、对话框、表单、菜单等 20+ 组件的可访问性实现规范
- ARIA 角色管理: 正确处理角色分配、焦点管理和键盘导航
关键组件处理方式
| 组件类别 | 处理方式 | 开发者责任 |
|---|---|---|
| 按钮组件 | 原生 button/a 标签渲染 | 提供可见文本或 href 目的 |
| 对话框组件 | FocusTrap + Overlay 实现 | 提供清晰的 title 和有意义的内容 |
| 表单组件 | 专用 gamut-forms 技能处理 | 正确设置标签和验证 |
| Tabs 组件 | react-aria-components 实现 | 正确命名每个标签页 |
🛠 安装与启用方式
安装命令:
skills install --user Codecademy/gamut前置依赖:
- Codecademy Gamut 组件库环境
- react-aria-components (仅 Tabs 组件使用)
- react-focus-on (FocusTrap 组件依赖)
API/工具要求: 需要访问 Gamut Storybook 文档进行组件验证
📋 标准工作流
- 用户输入: 开发者提出特定组件的可访问性需求
- 组件识别: Skill 识别目标组件类型（按钮、对话框、表单等）
- 模式匹配: 匹配对应的可访问性实现模式
- 代码生成: 提供符合 WCAG 标准的组件实现代码
- 审计验证: 对照组件源码验证 ARIA 属性设置是否正确
- 文档参考: 引导至相应 Storybook 文档进行最终确认
⚠️ 关键限制、缺陷、注意事项
- 平台限制: 仅支持 Codecademy Gamut 组件库，不适用于其他 UI 库
- 表单处理: 表单相关可访问性需使用专用的 gamut-forms 技能
- 模态框细节: 模态框和对话框的完整组合细节在 gamut-modal 技能中
- 生产环境: 适用于开发阶段的可访问性实现，需要结合人工审计
- 组件覆盖: 仅覆盖 Gamut 官方组件，自定义组件需要手动实现
✅ 适用场景 & ❌ 不适合场景
✅ 适用场景
- Gamut 组件库的可访问性功能开发
- 符合 WCAG 标准的覆盖层和复合小部件构建
- 针对特定组件的可访问性使用审计
- 教育类应用的无障碍功能实现
❌ 不适合场景
- 非 Gamut 组件库的项目
- 需要完整表单可访问性解决方案（应使用 gamut-forms）
- 需要详细模态框实现细节（应使用 gamut-modal）
- 完全自定义的非标准组件实现
如何安装
skills install --user Codecademy/gamut通用安装教程：在哪里输入上面的命令
上面的命令本质是在「终端 / 命令行」中调用技能管理器，把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同，按下面操作即可：
- 打开工具自带的终端面板，或系统终端（macOS「终端」、Windows「PowerShell」、Linux「Terminal」）。
- 把上面的安装命令复制进去，回车运行，等待下载与注册完成。
- 重启或重新加载 AI 工具，让新安装的 Skill 被识别。
- 新建对话并触发：直接描述用途，或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版（macOS / Windows）
桌面版没有内置命令行，Skill 需通过 Claude Code CLI 安装。打开系统终端，先执行 npm install -g @anthropic-ai/claude-code，再运行上面的安装命令；完成后完全退出并重新打开 Claude。
Claude Code（终端 CLI）
直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面，再在对话中引用该 Skill（/ 斜杠菜单或直接描述用途）。
VS Code（含 GitHub Copilot）
打开终端面板：菜单「终端 → 新建终端」，或快捷键 Ctrl+`（macOS 为 ⌃+`）。在终端里运行上面的命令；装完后执行「重新加载窗口」（Ctrl+Shift+P → Reload Window），让 Copilot 等扩展识别新技能。
Cursor
底部「终端」面板（Ctrl+`）即是内置终端。粘贴运行上面的命令，完成后在命令面板执行「Reload Window」刷新，再开始对话。
Windsurf
底部「终端」面板运行命令；也可直接使用其内置 Agent 终端，在对话侧执行安装。
其他工具（ChatGPT、本地脚本等）
不支持本地终端的产品，可先在本机终端完成安装，再在对话中描述该 Skill 的能力让其调用；不同工具的命令格式请以其官方文档为准。
风险提示
✅ 低风险
自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。