Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）及基础UI组件（Box、Button等），确保前端界面风格一致性与可维护性。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）及基础UI组件（Box、Button等），确保前端界面风格一致性与可维护性。
构建UI界面
使用设计令牌
开发核心组件
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供Formik表单处理与Yup验证的通用模式，涵盖基础设置、常见字段校验及条件验证逻辑。
构建表单界面
实现数据验证规则
处理表单提交逻辑
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范 GraphQL 开发流程，强制使用 .gql 文件分离查询与变异定义，配合代码生成器产出类型安全 Hook。强调 Mutation 必须包含错误处理、加载状态及 UI 反馈，确保前端数据交互的健壮性与一致性。
创建 GraphQL 查询或变异操作
配置 Apollo Client 数据获取逻辑
生成 GraphQL TypeScript 类型
npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -g -y
提供现代React UI组件的最佳实践，涵盖加载状态、错误处理及数据获取模式。指导开发者优化用户体验，确保界面响应及时且错误可见，避免陈旧UI显示。
构建React UI组件
处理异步数据请求
管理前端UI状态
npx skills add ChrisWiles/claude-code-showcase --skill react-ui-patterns -g -y
提供四阶段系统化调试方法论，强调先定位根因再修复。涵盖错误分析、模式对比、假设验证及实施规范，防止盲目打补丁，适用于排查Bug和测试失败。
调查代码缺陷
修复测试失败
排查意外行为
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest单元测试模式，涵盖TDD工作流、行为驱动测试理念及工厂函数与Mock策略。用于编写高质量单元测试、创建测试数据工厂及遵循红绿重构循环。
编写单元测试
创建测试工厂函数
使用TDD流程
配置Jest Mock
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
