Agent skill
mock-data
Creates typed mock data files in src/data/ following project conventions. Use when needing test data for new features or components.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/unknown-majiayu000-claude-skill-registr-6
SKILL.md
Mock Data Generator Skill
Creates typed mock data files following project patterns.
File Pattern
text
src/data/mock-{feature}.ts
Template Structure
typescript
// src/data/mock-{feature}.ts
export interface {Feature}Data {
id: string;
name: string;
// Add fields based on requirements
}
export const mock{Feature}Data: {Feature}Data = {
id: "1",
name: "Example",
};
// For arrays:
export const mock{Feature}List: {Feature}Data[] = [
{ id: "1", name: "Item 1" },
{ id: "2", name: "Item 2" },
];
Conventions
- Filename: kebab-case with
mock-prefix - Named exports: Both interface and data
- Type-first: Define interface before data
- Realistic data: Use meaningful values, not "test123"
Examples
See these files for reference patterns:
src/data/mock-order.tssrc/data/mock-project.tssrc/data/mock-unmatched-items.ts
Usage with TanStack Query
typescript
// hooks/use{Feature}.ts
import { useQuery } from "@tanstack/react-query";
import { mock{Feature}Data, {Feature}Data } from "../data/mock-{feature}";
async function fetch{Feature}Data(): Promise<{Feature}Data> {
await new Promise((r) => setTimeout(r, 500)); // Simulate API
return mock{Feature}Data;
}
export function use{Feature}() {
return useQuery({
queryKey: ["{feature}"],
queryFn: fetch{Feature}Data,
});
}
Didn't find tool you were looking for?