Wiremark

wiremark

wiremark is a plain-text wireframe format: an indented outline of component names that renders to a hand-drawn SVG sketch. Source lives in a fenced code block tagged wireframe (or a standalone .wiremark file).

Wireframe #login mobile
  Stack column gap=2
    Typography h4 "Sign in"
    TextField "Email" type=email
    TextField "Password" type=password
    Button "Sign in" contained to=#dashboard

Before using a component not shown above, check reference.md in this skill folder -- it lists every component with its props, enum values, and defaults. Do not invent components.

Rules

• Every line is Component [keyless-value | key=value]*. Components are PascalCase names (Stack, Card, TextField, AppBar, ...). Many feel familiar from UI libraries, but the vocabulary is wiremark's own -- never guess a name; check reference.md.
• Indentation is containment: a line indented under another is its child. Two spaces per level, never tabs. Only components marked [c] in reference.md take children -- children under a leaf are dropped silently.
• Quoted = drawn text, and quoting it is mandatory (TextField "Email", never TextField Email). Bare = setting: enum value (outlined), boolean flag (checked), sizing token, number, or icon name. Never quote a setting: variant="outlined" and gap="2" are hard errors. No bare text lines -- wrap text in its owner (Typography "...").
• Keyless values resolve by type/value alone, in any order: TextField "Email" outlined == TextField label="Email" variant=outlined.
• Sizing is width height, in that order, bare tokens only (no width= key), on components marked [w h]: 240px (pixels), 30%, * (fill), bare number (flex weight). Box 240px * is a fixed-width, full-height rail. Omit for natural content size.
• Defaults do the work: bare Img draws a placeholder image, bare Button reads "Button". For placeholder text give a filler amount token on a component marked [~]: ~3 (sentences/lines), ~5w (words), ~2l (lines), or _/__/___. Filler style: filler=squiggle|lorem|blocks on the Wireframe root.
• Comments are // to end of line.
• Frames: Wireframe #id mobile|landscape|portrait (or both w= and h=), one or more per document. visible=false hides a shared-shell frame; background=#shell composes it underneath another frame; Anchor #region
  • anchor=#region places foreground content inside the shell (drop the preset when using anchor=); direction=TD|LR orients multi-frame flow.
• Every element accepts to=#frame-id, making it a link; the navigation graph is inferred from those links (frames only, no deep links). Multiple visible frames render as a flow chart automatically.
• Icon props take Material icon names, forgivingly spelled (Icon Search, Button "Save" startIcon=Check); unknown names degrade to a placeholder.
• Hard errors (must fix): tabs, unquoted text, quoted enum/number, unknown component/prop, bad enum value. Soft warnings (still renders): missing background/anchor target, unknown icon. Silent (check yourself): a to= link to a nonexistent frame, children nested under a leaf component.
• Out of scope: styling (style=/sx=/colors), breakpoints, x/y coordinates.

Gotchas

Button variants are text|outlined|contained (use contained for a primary action, never primary); Typography body variants are body1/body2 (not body); checkboxes/switches are Control checkbox / Control switch (+ checked); companion components you may know from UI libraries do not exist (no DialogTitle/DialogContent, IconButton, Menu, Container, Paper, ListItemText -- nest content directly, use a bare Icon, quote the ListItem label).

Checking your work

After writing or editing a wireframe, validate it: save the source as x.wiremark and run npx @wiremark/cli x.wiremark -o x.svg (Node 18+). Hard errors exit non-zero with a line number; warnings print to stderr while the SVG is still written. Dead to= links and children under leaf components are silent -- re-read those yourself.

Further reading: https://docs.wiremark.dev (human docs), https://docs.wiremark.dev/reference/icons (icon gallery).