Agent Skills
› ChrisWiles/claude-code-showcase
ChrisWiles/claude-code-showcase
GitHub提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）而非硬编码值。包含Box、Button、Input等组件用法及屏幕/表单布局模式，确保UI风格一致。
安装全部 Skills
npx skills add ChrisWiles/claude-code-showcase --all -g -y
集合内 Skills (6)
提供核心组件库与设计系统规范，指导使用设计令牌（间距、颜色、排版）而非硬编码值。包含Box、Button、Input等组件用法及屏幕/表单布局模式，确保UI风格一致。
构建用户界面
应用设计令牌
使用核心组件库
npx skills add ChrisWiles/claude-code-showcase --skill core-components -g -y
提供Formik表单处理与Yup验证模式的开发指南。涵盖基础表单搭建、常见字段（邮箱、密码等）验证规则、条件性验证逻辑及输入框辅助函数，旨在简化React Native/React中的表单实现。
构建Formik表单
配置Yup验证规则
实现条件性表单验证
npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -y
规范 GraphQL 开发流程，强制使用 .gql 文件与代码生成，禁止内联 gql。强调 Mutation 必须包含 onError 处理、加载状态及禁用逻辑，确保类型安全与健壮的用户交互体验。
创建或修改 GraphQL 查询和变更操作
配置 Apollo Client 数据获取逻辑
生成 TypeScript 类型定义
实现需要错误处理和加载状态的表单提交
npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -g -y
提供现代React UI组件的开发规范，涵盖加载状态、错误处理及数据获取。强调避免陈旧UI、始终暴露错误及使用乐观更新，通过决策树和代码示例指导Skeleton与Spinner的选择及错误层级展示。
构建React 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流程、行为驱动测试理念。包含自定义Render封装、组件与数据工厂函数生成及Mock策略（模块与GraphQL Hook），旨在提升测试覆盖率与可维护性。
编写单元测试
创建测试工厂函数
实现TDD红绿重构循环
设置Jest Mock
npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -g -y
