Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub核心组件库与设计系统指南，规定使用设计令牌（间距、颜色、排版）而非硬编码值，提供Box、Button等基础UI组件及布局模式的最佳实践，确保界面风格统一。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
核心组件库与设计系统指南，规定使用设计令牌（间距、颜色、排版）而非硬编码值，提供Box、Button等基础UI组件及布局模式的最佳实践，确保界面风格统一。
构建用户界面
使用设计令牌
开发UI组件
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供 Formik 表单构建、Yup 验证模式及字段辅助函数的开发指南，涵盖基础设置、常见校验规则、条件验证等场景。
需要实现前端表单逻辑
配置 Yup 数据验证规则
处理表单提交与状态管理
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范GraphQL Schema开发流程，强制使用.gql文件与代码生成，要求Mutation必须包含错误处理及UI状态反馈。
创建或修改 GraphQL 查询和变更操作
需要生成 TypeScript 类型以配合 Apollo Client 使用
npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -g -y
提供现代React UI组件的最佳实践，涵盖加载、错误处理及数据获取模式。指导开发者构建高可用、响应式界面，避免陈旧UI和静默错误，提升用户体验与开发效率。
构建React UI组件
处理异步数据请求
管理用户界面状态
设计加载与错误反馈机制
npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -g -y
提供基于根因分析的四种阶段调试方法论，强调在修复前必须查明原因。涵盖故障排查、测试失败修复及行为异常调查，指导用户通过系统化的假设验证与模式分析定位并解决深层问题。
调查代码缺陷
修复测试失败
排查意外行为
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest测试模式、工厂函数、Mock策略及TDD工作流指南。涵盖自定义渲染、组件与数据工厂创建，以及模块和GraphQL Hook的Mock方法，旨在辅助编写高质量单元测试并遵循行为驱动测试原则。
编写单元测试
创建测试工厂函数
使用TDD流程
设置Mock对象
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
