Does this skill use 'Lorem Ipsum' or placeholder text?

No. The 'Iron Law' of this skill is to generate realistic names, dates, and numbers to ensure designs feel real and functional.

What files are generated by this skill?

It typically creates a data.json file containing the sample records and a types.ts file containing the corresponding TypeScript interfaces.

Does it work with existing data models?

Yes, it checks for a global data-model.md file and matches entity structures to maintain consistency across your entire project.

Is this skill suitable for quantitative or finance tools?

For quantitative tools, the skill is designed to skip sample data generation as those tools typically rely on real data sources or direct Python scripts.

Can it handle edge cases?

Yes, it specifically includes edge cases such as empty arrays, varied statuses, and long text descriptions to test the robustness of your UI.

Realistic Data Implementation

Name: Realistic Data Implementation
Author: CinderZhang

byCinderZhang

•

Design Tools

Generates realistic sample data and TypeScript interfaces to populate application designs with believable, context-aware content.

The implement-data skill is a specialized utility for the DRIVER methodology that automates the creation of high-quality sample data for UI development. Moving beyond generic 'Lorem Ipsum' placeholders, it analyzes your product specifications to generate structured JSON data featuring realistic names, dates, and statuses. It simultaneously produces TypeScript interfaces for both the data models and component props, ensuring your frontend prototypes are robust, handle edge cases like long text or empty arrays, and are ready for immediate implementation.

Key Features

01Contextual data generation using realistic names, dates, and amounts

02Global data model synchronization to ensure consistency across sections

032 GitHub stars

04Edge case inclusion including empty states and varied content lengths

05Proactive workflow transitions from data design to UI building

06Automatic TypeScript interface generation for models and component props

Use Cases

01Testing UI layouts against edge cases like overflowing text and empty lists

02Populating frontend prototypes with believable data for stakeholder reviews

03Generating TypeScript types and mock data for React or Streamlit components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cinderzhang/driver-plugin implement-data

For use in Claude.ai and ChatGPT

Download Skill