Does it handle edge cases?

Yes, the skill is programmed to include edge cases like empty arrays, extremely long descriptions, and diverse status mixes to ensure UI robustness.

What kind of data does this skill generate?

It generates realistic, domain-specific data such as believable names, dates, financial amounts, and statuses instead of generic placeholder text.

Does it create TypeScript types automatically?

Yes, it creates a types.ts file containing interfaces for both the data models and the component props needed to display that data.

Can I use this for real estate or finance tools?

Absolutely. It is specifically designed to handle complex data structures found in underwriting and quantitative analysis tools.

How does it understand my project's data needs?

The skill reads your project's roadmap.md and section-specific markdown files to identify entities, fields, and user flows.

Realistic UI Data Generator

Name: Realistic UI Data Generator
Author: peterjohn1298

bypeterjohn1298

0•

デザインツール

Generates high-fidelity, realistic sample data and TypeScript interfaces to populate UI components and screen designs.

The implement-data skill for Claude Code bridges the gap between static design and production-ready code by generating believable, domain-specific sample data. Instead of using 'Lorem Ipsum' placeholders, it creates structured JSON files and corresponding TypeScript types based on your project's unique specifications. By including edge cases like long text strings, varied statuses, and empty states, it ensures that your UI components are tested against realistic scenarios from the start, making it an essential tool for frontend developers and UI/UX engineers.

主な機能

01Analyzes project roadmaps and specifications for entity relationships

02Automatically produces TypeScript interfaces based on data structures

03Seamlessly integrates with frontend component building workflows

04Generates realistic, context-aware sample data (names, dates, amounts)

05Includes edge cases like empty arrays, long text, and varied statuses

060 GitHub stars

ユースケース

01Creating high-fidelity prototypes that require realistic financial or business data

02Generating mock APIs and type-safe data models for frontend development

03Testing UI components against edge cases like overflowing text or empty states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peterjohn1298/re-underwriting-tool implement-data

For use in Claude.ai and ChatGPT

Download Skill