Add new clothing items or closet owners to the mock data layer. Use when the user asks to add items, closets, listings, inventory, sample data, or expand the browse catalog. Covers data schema, Unsplash image conventions, static path regeneration, and post-add verification.
All mock data lives in src/data/mock.ts. This is the single source of truth
for items, closets, categories, occasions, communities, conversations, and
messages.
Append new entries to the closets array. Every closet must have a unique
id (lowercase, hyphenated slug).
interface Closet {
id: string; // unique slug, used in routes: /closet/:id
name: string; // display name, e.g. "Sophia's Styles"
handle: string; // social handle without @
avatar: string; // 2-letter uppercase initials (fallback)
profileImage?: string; // Unsplash face-cropped URL via profileImg() helper
location: string; // city, state
bio: string; // short description
venmo?: string; // optional Venmo handle
followers: number;
itemCount: number;
rules: string[]; // rental rules shown on closet page
}
For profile images, use the profileImg() helper defined in :
mock.tsprofileImage: profileImg("photo-XXXXXXXXXXXX-XXXXXXXXXXXX")
See the add-avatar skill for portrait photo selection guidelines and avatar component details.
Append new entries to the items array. Each id must be a unique string
(use incrementing numbers as strings: "25", "26", etc.). The closetId
must reference an existing closet's id.
interface Item {
id: string;
title: string;
description: string; // casual, first-person voice matching existing tone
size: string; // "XS" | "S" | "M" | "L" | "XL" | "OS" | shoe size
fitNote?: string; // optional, e.g. "runs small", "fits XS-S"
category: Category;
occasion: Occasion[]; // at least one
color: string;
condition: "like new" | "good" | "fair";
rentPrice: number; // whole dollars
buyPrice?: number; // optional, higher than rentPrice
closetId: string; // FK → Closet.id
images: string[]; // use img() helper (see below)
available: boolean;
}
Categories: "dresses" · "tops" · "bottoms" · "sets" · "outerwear" ·
"shoes" · "accessories"
Occasions: "formal" · "gameday" · "date party" · "21st" · "rush" ·
"going out" · "casual" · "wedding guest"
The file defines a helper at the top of mock.ts:
const img = (id: string, w = 400, h = 500) =>
`https://images.unsplash.com/${id}?w=${w}&h=${h}&fit=crop&q=80`;
Use it for every item image: