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等），确保界面一致性与开发效率。
构建用户界面
使用设计令牌
集成组件库
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 必须包含错误处理、加载状态及缓存更新，确保前端交互健壮性。
创建 GraphQL 查询或变更
需要生成 GraphQL 类型定义
实现 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
提供四阶段系统化调试方法论，强调先查根因再修复。涵盖根因调查、模式分析、假设测试及实施验证，旨在避免盲目打补丁，确保彻底解决Bug和测试失败问题。
调查代码缺陷
修复测试失败
排查意外行为
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest测试模式、工厂函数、Mock策略及TDD工作流指南，用于编写单元测试、创建测试工厂或遵循TDD循环。
编写单元测试
创建测试工厂函数
遵循TDD开发流程
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
