Agent Skills
› Amery2010/open-builder
Amery2010/open-builder
GitHub提供Web无障碍开发指南，涵盖语义化HTML、键盘导航、ARIA属性及表单设计。确保组件符合WCAG 2.1 AA标准，提升可访问性体验。
安装全部 Skills
npx skills add Amery2010/open-builder --all -g -y
集合内 Skills (9)
提供Web无障碍开发指南，涵盖语义化HTML、键盘导航、ARIA属性及表单设计。确保组件符合WCAG 2.1 AA标准，提升可访问性体验。
构建交互式组件
检查代码无障碍合规性
npx skills add Amery2010/open-builder --skill accessibility -g -y
对代码变更进行多维度审查，涵盖正确性、安全、性能及可维护性。基于证据发现潜在缺陷与风险，仅报告问题而不直接修改文件，除非用户明确要求修复。
请求审查代码差异或项目变更
检查特定文件或分支的正确性与安全性
npx skills add Amery2010/open-builder --skill code-review -g -y
专注于简化用户指定或当前请求中修改的代码，提升可读性、一致性和可维护性。严格保持行为不变，遵循项目规范，仅进行精准重构，避免无关变更。
用户要求简化代码
代码修改后需要清理
提升代码可读性
npx skills add Amery2010/open-builder --skill code-simplifier -g -y
提供针对 Web 应用运行时错误、白屏及异常行为的系统化调试工作流。涵盖复现、定位、假设验证、修复及防回归步骤，强调基于日志和最小变更的严谨排查方法。
前端页面出现白屏或布局错乱
控制台报错或数据展示异常
应用行为不符合预期
npx skills add Amery2010/open-builder --skill debugging -g -y
针对落地页、作品集及设计导向重构的前端技能，强调阅读需求简报后推断视觉风格，保留现有约束并执行预检审计，避免通用UI模板。
需要为着陆页或作品集生成前端代码
进行面向营销或品牌的设计型页面重构
用户指定了特定的视觉风格或参考案例
npx skills add Amery2010/open-builder --skill design-taste-frontend -g -y
用于创建生产级产品界面和Web组件，强调层级、可访问性和视觉一致性。适用于仪表板、表单等常规UI开发，要求基于现有项目证据进行设计，复用既有技术栈，避免盲目引入新库。
需要开发或重构产品内部UI（如仪表盘、设置页、表单）
涉及前端组件的样式优化、布局调整或可访问性改进
npx skills add Amery2010/open-builder --skill frontend-design -g -y
提供 React 19 组件开发的最佳实践指南，涵盖结构、状态管理、副作用处理、性能优化及表单模式，用于指导代码编写与重构。
编写或重构 React 组件
选择 Hooks 设计模式
设计组件 API
配置状态管理
npx skills add Amery2010/open-builder --skill react-patterns -g -y
提供 Tailwind CSS 响应式布局、深色模式、间距及 shadcn/ui 集成的生产级最佳实践，指导开发者编写可访问且一致的 UI 样式代码。
编写前端组件样式
调整页面响应式布局
配置深色模式主题
npx skills add Amery2010/open-builder --skill tailwind-helpers -g -y
提供 TypeScript 类型安全与可维护性的最佳实践，涵盖类型收窄、判别联合、unknown vs any、satisfies 及类型守卫等模式，旨在减少运行时错误并提升代码质量。
编写 TypeScript 代码时寻求类型安全建议
重构现有 TS 代码以消除 any 或不当断言
设计复杂数据类型结构
优化类型定义以提升 IDE 体验
npx skills add Amery2010/open-builder --skill typescript-patterns -g -y
