figura-cli 0.18.1 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +113 -101
- package/dist/mcp.js +7 -7
- package/package.json +1 -1
- package/skills/fig/SKILL.md +18 -57
package/package.json
CHANGED
package/skills/fig/SKILL.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
name: fig
|
|
3
3
|
description: "Mock up a screen as an on-brand, shareable HTML fig via your Figura team — render a UI state in seconds before writing the real code. Use when asked to visualize a screen, mock a UI, or 'make a fig'. iPhone-framed by default; browser frame for web/desktop."
|
|
4
4
|
argument-hint: '<what to visualize>'
|
|
5
|
-
allowed-tools: 'mcp__figura__figura_whoami, mcp__figura__figura_fig_scaffold, mcp__figura__figura_generate_fig, mcp__figura__figura_create_fig, mcp__figura__figura_revise_fig, mcp__figura__figura_publish_fig, mcp__figura__figura_commit_fig, Bash(figura *), Bash(bunx figura-cli *)'
|
|
5
|
+
allowed-tools: 'mcp__figura__figura_whoami, mcp__figura__figura_fig_scaffold, mcp__figura__figura_fig_devices, mcp__figura__figura_generate_fig, mcp__figura__figura_create_fig, mcp__figura__figura_revise_fig, mcp__figura__figura_publish_fig, mcp__figura__figura_commit_fig, Bash(figura *), Bash(bunx figura-cli *)'
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# /fig — figure it out before you build it
|
|
@@ -316,62 +316,23 @@ with two things you do **not** hand-write:
|
|
|
316
316
|
search and the self-improving loop. Artifact-descriptive only — no team/brand
|
|
317
317
|
ids (the block is served on the public link).
|
|
318
318
|
|
|
319
|
-
So when you **hand-build** a fig (the default path), do your part of the
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
- **Optional but valued:** if the fig grounds a specific feature or flag, emit
|
|
337
|
-
`<meta name="figura:feature" content="<flag-or-slug>">` so it links back to the
|
|
338
|
-
feature it depicts.
|
|
339
|
-
|
|
340
|
-
### The two mobile presentations — pick ONE, never both (#717)
|
|
341
|
-
|
|
342
|
-
A mobile fig is EITHER a frameless single OR a canvas composition. Emitting both
|
|
343
|
-
signals — a whole-fig `figura:artboard` meta AND an in-fig `.fig-device` frame —
|
|
344
|
-
makes the viewer wrap the *whole* composition in one phone (the key, masthead,
|
|
345
|
-
and second screen all crammed inside the bezel). That contradiction is flagged
|
|
346
|
-
(`double-framed`), so choose deliberately:
|
|
347
|
-
|
|
348
|
-
- **Frameless single** — the whole fig IS one screen. Whole-fig `figura:artboard`
|
|
349
|
-
meta, `<body>` sized to exactly W×H, body == the screen, no surrounding HTML.
|
|
350
|
-
The viewer draws the phone around the entire fig. Best fidelity for "just the
|
|
351
|
-
screen".
|
|
352
|
-
- **Canvas composition** — a document that frames one or more devices **in-fig**,
|
|
353
|
-
with author HTML around them (a design-language key, annotations, multiple
|
|
354
|
-
screens, states with controls). **No whole-fig `figura:artboard` meta.** Frame
|
|
355
|
-
each target device as a bounded `.fig-device` element and Figura stamps the
|
|
356
|
-
bezel + Dynamic Island + safe-area insets for that device (do NOT author CSS
|
|
357
|
-
for `.fig-device` / `.fig-screen` / `.fig-di` / `.fig-homebar`):
|
|
358
|
-
|
|
359
|
-
```html
|
|
360
|
-
<div class="fig-device portrait" data-device="iphone-16">
|
|
361
|
-
<div class="fig-screen fig-safe"> …screen content… </div>
|
|
362
|
-
<div class="fig-di"></div> <!-- Dynamic Island / notch, drawn for you -->
|
|
363
|
-
<div class="fig-homebar"></div> <!-- home indicator, drawn for you -->
|
|
364
|
-
</div>
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
Use `class="fig-device landscape"` for a landscape device (the island moves to
|
|
368
|
-
the leading edge automatically). `data-device` is any catalog id
|
|
369
|
-
(`figura fig scaffold` / `brand --json` list them); **different `data-device`
|
|
370
|
-
values on one canvas frame different phones** — an `iphone-16` beside an
|
|
371
|
-
`iphone-se-3`, each with its own bezel radius and cutout. Put your key,
|
|
372
|
-
annotations, and any other screens as ordinary HTML AROUND the framed
|
|
373
|
-
device(s). A composition renders full-page (no whole-fig meta) so nothing is
|
|
374
|
-
phone-wrapped as a whole.
|
|
319
|
+
So when you **hand-build** a fig (the default path), you do your part of the
|
|
320
|
+
contract — but the exact rules are **fetched, not restated here**: the
|
|
321
|
+
presentation model (frameless single vs canvas composition), when to emit or
|
|
322
|
+
omit the whole-fig `<meta name="figura:artboard">`, the `.fig-device` /
|
|
323
|
+
`data-device` frame markup (and NOT authoring its CSS — Figura stamps the bezel,
|
|
324
|
+
Dynamic Island, and safe-area insets), the `figura:context` / `figura:feature`
|
|
325
|
+
metas, and the valid devices all live in the canonical scaffold.
|
|
326
|
+
|
|
327
|
+
- **`figura_fig_scaffold`** (CLI: `figura fig scaffold`) is authoritative for the
|
|
328
|
+
presentation model, the frame markup, and the output contract. Fetch it and
|
|
329
|
+
follow it verbatim (step 2 above) — do NOT restate design/format rules from
|
|
330
|
+
memory. A bundled skill can pin stale; the scaffold is always current.
|
|
331
|
+
- **`figura_fig_devices`** (CLI: `figura fig devices`) is the full valid-
|
|
332
|
+
`data-device` catalog — every framed-device id + its geometry (logical dims,
|
|
333
|
+
safe-area insets, cutout, corner radius). Pick a real id from it for a canvas
|
|
334
|
+
composition's `<div class="fig-device" data-device="…">`; an unknown id
|
|
335
|
+
silently gets no frame.
|
|
375
336
|
|
|
376
337
|
## Notes
|
|
377
338
|
|