data-scaffold

Generates realistic mock data layers and field-to-source mapping documents for screens without live APIs.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/scoots31/engineering-playbook --skill data-scaffold-scoots31
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: data-scaffold
Source: https://github.com/scoots31/engineering-playbook/tree/main/skills/data-scaffold
Command: npx skills add https://github.com/scoots31/engineering-playbook --skill data-scaffold-scoots31

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design reviews and frontend builds stall when screens contain placeholder text instead of realistic data, and hardcoded fake values scattered through the UI become painful to replace when real APIs arrive. ## Core Features & Use Cases - Mock Data Layer Generation: Creates a single data/mock/ directory with realistic, domain-accurate JSON files per entity, including edge cases like bye weeks, zero scores, and missing fields. - Data Mapping Document: Produces docs/data-mapping.md, a proto-API contract mapping every mock field to its eventual real source, field name, and connection status. - Backlog Integration: Updates slice records in docs/backlog.md so slices blocked on pending data anchors get unblocked with concrete file paths and field names. - Use Case: A solo builder finishes design screens for a fantasy football app but has no API yet. Run this Skill to generate realistic player and performance data, wire it into the screens behind a swappable data layer, and produce the first draft of the API contract. ## Quick Start Generate realistic mock data for all screens in docs/design and create the data mapping document before design review.

Frequently Asked Questions about data-scaffold

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create realistic mock data for frontend development?

Generate domain-accurate values in a single mock data layer rather than hardcoding placeholders in the UI. Use plausible API field names, realistic ranges with variance and outliers, and include edge cases like empty states and missing fields.

How do I swap mock data for a real API without rewriting the UI?

Keep all fake data in one mock layer that the UI accesses through a function seam. When the real API is ready, replace only the data layer function so the UI code calling it stays unchanged.

What is a data mapping document in API development?

A data mapping document maps every mock field to its eventual real source, real field name, and connection status. It acts as the first draft of the API contract so developers know the exact response shape required.

When should mock data be created in the design process?

Create mock data before or during design review, not after. Design review against realistic data produces better decisions than review against placeholder text or empty states.

Why avoid Lorem Ipsum and placeholder values in prototypes?

Placeholder text hides layout problems and makes screens feel fake, undermining design review. Realistic data with variance, outliers, and edge cases reveals real layout and empty-state issues early.