---
name: wireframe-schema
description: Author valid WireframeStudio wireframe JSON (screens + components) that renders to a UI mockup. Use when generating or editing a wireframe spec for WireframeStudio, or when you must produce the JSON the /api/validate endpoint accepts.
version: 1.0.0
license: MIT
homepage: https://wireframe-studio.pages.dev
---

# wireframe-schema

How to author a WireframeStudio wireframe as JSON. The wireframe is the structural source of
truth (screens, components, hierarchy, navigation) that the app renders and that a coding
agent later implements.

## When to use

- You need to generate or edit a wireframe for WireframeStudio.
- You must produce JSON that passes `POST /api/validate`.
- You are turning a UI description into a structured spec instead of raw HTML/CSS.

Do NOT use for:
- Visual design tokens (colors/typography) — use the `design-tokens` skill instead.
- Production component code — that is the implementation step, downstream of the wireframe.

## Root structure

```json
{
  "project": "My App",
  "theme": "blueprint",          // blueprint | slate | minimalist
  "screens": [ /* one or more screens */ ]
}
```

A screen:

```json
{
  "id": "overview",              // unique, used for navigation targets
  "title": "Overview",
  "layout": "sidebar",           // sidebar | navbar | blank
  "components": [ /* ... */ ]
}
```

## Component types

Every entry in `components` (or in a container's `children`) has a `type`:

- `sidebar`: `brand` + `items[]` ({label, icon, active, target}).
- `navbar`: `title` + `actions[]` (buttons/avatars).
- `container`: `layout` `grid` (`columns`) | `split` (`ratio`) | `flex`, with `children[]`.
- `card`: metric (`title`, `value`, `change`, `trend`, `icon`) or nested `children[]`.
- `chart`: `chartType` `line` | `bar`, with `labels[]` and `datasets[]` ({label, data}).
- `table`: `headers[]` + `rows[][]`.
- `form`: `fields[]` ({label, type: text/email/select/checkbox/textarea, placeholder, options}) + `buttons[]`.
- `list`: `items[]` ({title, subtitle, meta}).
- `hero`: `title`, `subtitle`, `buttons[]`.
- `footer`: `text` + `links[]`.
- `button` / `avatar` / `badge` / `text`: primitives.
- `icon` fields take a Lucide icon name.

## Rules

- `screens` must be a non-empty array; every screen needs a unique string `id`.
- Every component needs a `type`. Unknown types are allowed but produce a warning.
- `components` and `children` must be arrays.

Validate with the `validate-wireframe` skill before rendering or implementing.