Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）及基础UI组件（Box, Button等），确保界面一致性与标准化开发。
Install All Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
Skills in Collection (6)
提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）及基础UI组件（Box, Button等），确保界面一致性与标准化开发。
构建用户界面
使用设计令牌
处理组件库相关任务
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供基于 Formik 和 Yup 的表单构建与验证模式，涵盖基础设置、常见校验规则及条件验证，辅助前端高效实现表单逻辑。
需要创建包含复杂验证逻辑的表单
使用 Formik 处理表单提交和数据状态
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
定义GraphQL操作开发规范，强制使用.gql文件分离查询与突变逻辑，配合代码生成器创建类型安全Hooks。强调突变必须包含错误处理、加载状态及UI反馈，确保前端数据交互的健壮性与一致性。
需要编写或修改GraphQL查询和突变
使用Apollo Client进行数据获取
npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -g -y
提供现代React 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测试模式、工厂函数创建及Mock策略，指导TDD工作流与行为驱动测试。适用于编写单元测试、构建测试工具及遵循红绿重构循环。
编写单元测试
创建测试工厂函数
遵循TDD流程
设置Mock策略
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
