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 的表单处理与验证模式。涵盖基础表单搭建、常用字段校验（邮箱、密码等）、条件性验证逻辑及表单字段辅助函数，旨在简化复杂表单的开发与维护。
构建 React 表单
配置表单数据验证规则
实现条件性字段校验
处理表单提交逻辑
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范 GraphQL 开发模式，要求使用 .gql 文件分离查询/突变定义并执行代码生成。严禁内联 gql 字面量，必须使用生成的 Hook，且突变操作强制包含 onError 处理及完整的 UI 状态反馈（加载、禁用、成功提示）。
创建 GraphQL 查询或突变
使用 Apollo Client 进行数据请求
生成 TypeScript 类型或 Hooks
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
一种强调先查根因再修复的四阶段调试方法论，涵盖根因调查、模式分析、假设测试及实施验证。适用于排查Bug、修复测试失败及解决异常行为，严禁无根因的盲目修补。
调查软件缺陷或Bug
修复失败的测试用例
排查意外行为或系统故障
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest测试最佳实践，涵盖TDD工作流、行为驱动测试及工厂模式。包含自定义Render函数、组件与数据Mock生成器，以及模块和GraphQL Hook的模拟策略，旨在提升单元测试的可维护性与覆盖率。
编写单元测试
创建测试工厂函数
模拟第三方模块或API
遵循TDD流程
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
