Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计Token及UI组件构建界面。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
提供核心组件库与设计系统规范，指导使用设计Token及UI组件构建界面。
构建UI界面
使用设计Token
工作于组件库
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 Schema 开发模式，强制使用 .gql 文件分离定义、执行代码生成并调用生成的 Hooks。强调 Mutation 必须包含错误处理及 UI 状态反馈，确保前端数据交互的健壮性与一致性。
创建或修改 GraphQL 查询/变更操作
配置 Apollo Client 数据获取逻辑
需要生成 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排查和故障恢复。
调查代码Bug
修复测试失败
排查意外行为
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest单元测试模式，包括TDD工作流、行为驱动测试理念及工厂函数生成策略。涵盖自定义渲染工具、组件Props与数据Mock工厂，以及模块和GraphQL Hook的模拟方法，旨在提升前端测试的可维护性与覆盖率。
编写单元测试
创建测试工厂函数
使用TDD红绿重构循环
模拟外部依赖或Hook
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
