Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌和基础UI组件（如Box、Button、Input等）构建一致的前端界面。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
提供核心组件库与设计系统规范，指导使用设计令牌和基础UI组件（如Box、Button、Input等）构建一致的前端界面。
构建用户界面
应用设计令牌
使用组件库
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供 Formik 表单处理与 Yup 验证的标准化模式，涵盖基础表单搭建、常见字段校验规则及条件验证逻辑，辅助开发者高效构建具备完整校验能力的用户界面。
构建用户注册或登录表单
实现复杂的表单数据校验
配置 Yup 验证 Schema
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范 GraphQL Schema 开发流程，要求使用 .gql 文件、代码生成及 Apollo Hooks。强调 Mutation 的错误处理与 UI 状态管理，确保类型安全与健壮性。
创建或修改 GraphQL 查询和突变
配置 Apollo Client 相关逻辑
进行 GraphQL 类型生成
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单元测试模式、工厂函数生成、Mock策略及TDD工作流指南，辅助编写高质量单元测试。
编写单元测试
创建测试工厂函数
遵循TDD流程
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
