Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌和基础UI组件构建界面。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
提供核心组件库与设计系统规范，指导使用设计令牌和基础UI组件构建界面。
构建UI界面
使用设计令牌
开发组件
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供 Formik 表单处理与验证模式，涵盖基础设置、Yup 常见及条件验证规则、字段辅助函数等。用于快速构建带校验的表单组件。
需要实现表单输入和提交逻辑
配置或复用 Yup 数据验证规则
处理表单字段的错误显示与状态管理
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范 GraphQL Schema 开发流程，强制使用 .gql 文件分离查询与变异定义，配合代码生成器自动生成类型和 Hooks。强调 Mutation 必须包含错误处理、加载状态及 UI 反馈，禁止内联 gql 字面量，确保前端数据交互的规范性与健壮性。
创建或修改 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、测试失败及异常行为。
调查代码缺陷或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
