Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）及基础UI组件（Box、Button等），确保界面风格统一与开发标准化。
安装全部 Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
集合内 Skills (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 Schema 开发模式，要求使用 .gql 文件分离查询与突变定义，强制运行代码生成类型，并在突变中实现错误处理、加载状态及缓存更新，确保前端交互一致性。
创建或修改 GraphQL 查询和突变
需要生成 TypeScript 类型以配合 Apollo Client 使用
前端组件涉及数据获取或状态变更
npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -g -y
提供现代React 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单元测试模式、工厂函数生成及TDD工作流指南，涵盖行为驱动测试、自定义渲染工具、Mock策略及GraphQL Hook模拟，旨在提升前端组件测试的可维护性与覆盖率。
编写React组件单元测试
创建测试数据工厂函数
配置Jest Mock策略
遵循TDD开发流程
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
