Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub核心组件库与设计系统指南，规范UI构建、设计令牌使用及布局模式，确保样式一致性。
安装全部 Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
集合内 Skills (6)
核心组件库与设计系统指南，规范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 Schema 开发流程，包括使用 .gql 文件、运行代码生成及 Apollo Client 调用。强调必须添加错误处理、加载状态和 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
修复测试失败
排查意外行为或异常
npx skills add ChrisWiles/claude-code-showcase --skill systematic-debugging -g -y
提供Jest单元测试最佳实践，涵盖TDD工作流、行为驱动测试理念及工厂函数与Mocking策略，旨在提升前端组件与数据测试的覆盖率与维护性。
编写单元测试
创建测试工厂函数
使用Mock模拟模块或钩子
遵循TDD流程
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
