figura-cli 0.18.0 → 0.18.1
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/package.json +1 -1
- package/skills/fig/SKILL.md +36 -0
package/package.json
CHANGED
package/skills/fig/SKILL.md
CHANGED
|
@@ -337,6 +337,42 @@ So when you **hand-build** a fig (the default path), do your part of the contrac
|
|
|
337
337
|
`<meta name="figura:feature" content="<flag-or-slug>">` so it links back to the
|
|
338
338
|
feature it depicts.
|
|
339
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.
|
|
375
|
+
|
|
340
376
|
## Notes
|
|
341
377
|
|
|
342
378
|
- **MCP unavailable** (headless / cron, or no interactive auth): fall back to the
|