Use this skill when debugging frontend test failures (React/TypeScript, Vitest, etc.), fixing bugs in React/TypeScript code, or following TDD methodology for frontend bug fixes. This skill provides the complete bugfix workflow knowledge including error classification, confidence scoring, and TDD best practices.
Provides TDD workflow guidance for frontend bugs, using confidence scoring to diagnose React/TypeScript test failures (mock conflicts, async timing, types) and recommend fixes.
/plugin marketplace add penkzhou/swiss-army-knife-plugin/plugin install swiss-army-knife@swiss-army-knife-pluginThis skill inherits all available tools. When active, it can use any tool Claude has access to.
本 skill 提供前端测试 bugfix 的完整工作流知识，包括错误分类体系、置信度评分系统和 TDD 最佳实践。
前端测试失败主要分为以下类型（按频率排序）：
症状：Mock 不生效，组件行为异常
识别特征：
vi.mock 和 server.use解决策略：选择单一 Mock 层
// 选项 A：HTTP Mock（推荐用于集成测试）
server.use(
http.get('/api/data', () => HttpResponse.json({ data: 'test' }))
);
// 选项 B：Hook Mock（用于单元测试）
vi.mock('@/hooks/useData', () => ({
useData: () => ({ data: 'test', isLoading: false })
}));
症状：类型错误、Mock 数据不完整
识别特征：
as any 或类型断言解决策略：使用工厂函数
const createMockData = (overrides?: Partial<DataType>): DataType => ({
id: 1,
name: 'default',
...overrides
});
症状：测试间歇性失败
识别特征：
awaitgetBy 而非 findBy解决策略：正确等待
// Before
render(<Component />);
expect(screen.getByText('Loaded')).toBeInTheDocument();
// After
render(<Component />);
expect(await screen.findByText('Loaded')).toBeInTheDocument();
症状：组件未按预期渲染
识别特征：
解决策略：验证渲染条件和状态
症状：Hook 返回过时数据
识别特征：
useEffect 依赖数组不完整useMemo/useCallback 缓存问题解决策略：检查并修复依赖数组
| 分数 | 级别 | 行为 |
|---|---|---|
| 80+ | 高 | 自动执行 |
| 60-79 | 中 | 标记验证后继续 |
| 40-59 | 低 | 暂停询问用户 |
| <40 | 不确定 | 停止收集信息 |
置信度 = 证据质量(40%) + 模式匹配(30%) + 上下文完整性(20%) + 可复现性(10%)
证据质量：
模式匹配：
上下文完整性：
可复现性：
// 1. 明确期望行为
it('should display error when API fails', async () => {
// 2. 设置失败场景
server.use(
http.get('/api/data', () => HttpResponse.error())
);
// 3. 渲染组件
render(<DataComponent />);
// 4. 断言期望结果
expect(await screen.findByText('Error loading data')).toBeInTheDocument();
});
// 只写让测试通过的最小代码
// 不要优化，不要添加额外功能
// 改善代码结构
// 保持测试通过
// 消除重复
| 检查项 | 标准 |
|---|---|
| 测试通过率 | 100% |
| 代码覆盖率 | >= 90% |
| 新代码覆盖率 | 100% |
| Lint | 无错误 |
| TypeCheck | 无错误 |
# 运行前端测试
make test TARGET=frontend
# 运行特定测试
make test TARGET=frontend FILTER=ComponentName
# 覆盖率检查
make test TARGET=frontend MODE=coverage
# 完整 QA
make qa
文档路径由配置指定（best_practices_dir），使用以下关键词搜索：
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.