# Temporary UI mock fixtures

> How to add short-lived static fixtures for hard-to-reproduce UI states while tuning layout

- Skill: `igorwarzocha/temporary-ui-mock-fixtures` (Agent Skill)
- Install (CLI): `npx skillmds@latest add igorwarzocha/temporary-ui-mock-fixtures`
- Raw SKILL.md: https://api.skillmd.com/api/skills/igorwarzocha/temporary-ui-mock-fixtures/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: igorwarzocha (https://skillmd.com/u/igorwarzocha)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/igorwarzocha/temporary-ui-mock-fixtures

---


# Temporary UI mock fixtures

Use this when a UI state is hard to trigger repeatedly, such as queued prompts, ask-questions overlays, running extension status, or rare error strips.

## Rules

- Keep fixtures dev-only: gate with `import.meta.env.DEV` and an explicit URL flag such as `?mockQueuedPrompts=1`.
- Keep fixture data inside the component being tuned or a nearby `*.mock.ts` file.
- Never let mock data override real data. Prefer `real.length > 0 ? real : mock`.
- Use realistic strings that stress wrapping, truncation, and narrow composer widths.
- Do not commit fixture code unless the user explicitly asks for a reusable dev fixture. Usually remove it before commit.
- Commit the actual UI fix separately from any temporary fixture if the fixture is kept.

## Pattern

```ts
function getDevFixtures() {
  if (!import.meta.env.DEV) return []
  const params = new URLSearchParams(window.location.search)
  if (params.get('mockThing') !== '1') return []
  return [{ id: 'mock-1', text: 'Long realistic content...' }]
}

const visibleItems = realItems.length > 0 ? realItems : getDevFixtures()
```

Then open:

```txt
http://127.0.0.1:5173/?mockThing=1
```

## Cleanup checklist

Before committing production UI work:

1. Remove the mock helper and URL flag path.
2. Keep only the layout/style changes proven by the mock.
3. Run `bun run ai:check`.
4. Mention in the final note which mock flag was used and removed.