# Frontend Audit Fix

> Audits frontend for 'No Mock' rule, fixes API consistency (camel/snake case), and resolves Jest/Antd test issues. Invoke for frontend QA tasks or build validation. Use when this capability is needed.

- Skill: `tomevault-io/frontend-audit-fix` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/frontend-audit-fix`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-audit-fix/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/frontend-audit-fix

---


# Frontend Audit & Fix Workflow

Use this workflow to validate and fix frontend projects, specifically Next.js + Ant Design.

## 1. Enforce "No Mock Data" Rule
- **Check**: Verify `http-client.ts` uses real API endpoints.
- **Action**: Remove any `mockData` objects in components. Ensure 404s are handled by implementing backend routes, not falling back to mocks.

## 2. API Consistency Check
- **Check**: Ensure frontend interfaces (camelCase) match backend API responses (often snake_case) via the HTTP client interceptors.
- **Action**:
    - If `http-client` converts snake_case -> camelCase, ensure TypeScript interfaces use **camelCase**.
    - If data loading fails, check if the component expects camelCase but receives snakeCase (or vice versa) and if the conversion logic is active.

## 3. Test Health (Jest + Antd)
- **Common Issues**:
    - `TypeError: window.matchMedia is not a function`: Mock in `jest.setup.js`.
    - `TypeError: Form.useForm is not a function`: Mock `antd` in test files or globally.
    - `Element type is invalid`: Check if `antd` mock returns all used components (Row, Col, Card, etc.).
- **Fixing Strategies**:
    - Use `screen.getAllByTestId` if multiple elements exist (e.g., desktop/mobile layouts).
    - Wrap state updates in `waitFor(() => expect(...))`.
    - Mock icons (`lucide-react` or `@ant-design/icons`) if they cause rendering issues.

## 4. Verification
- Run `npm run test:ci` (or `npm test`) to verify logic.
- Run `npm run build` to verify types and production build.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/heidsoft) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->