figura-cli 0.12.0 → 0.12.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/README.md +2 -1
- package/dist/index.js +123 -119
- package/package.json +1 -1
- package/skills/fig/SKILL.md +33 -0
package/package.json
CHANGED
package/skills/fig/SKILL.md
CHANGED
|
@@ -114,12 +114,45 @@ CSS-only radio tabs, since figs carry no `<script>`:
|
|
|
114
114
|
width into scrollable overflow; scale minis with `transform` in
|
|
115
115
|
fixed-aspect wrappers instead), and screenshot each state to check no
|
|
116
116
|
annotation chip covers the content it annotates.
|
|
117
|
+
When you write the fig's HTML out to render/screenshot it, save it to a
|
|
118
|
+
**deterministic**, project-scoped path — the repo's `.figura/figs/` (already
|
|
119
|
+
gitignored), or `~/.figura/figs/` outside a bound repo — never `/tmp` or
|
|
120
|
+
`mktemp`. A stable path means a rerun overwrites the same file instead of
|
|
121
|
+
littering volatile temp locations, and matches where `figura fig open` writes
|
|
122
|
+
(`<repo>/.figura/figs/figura-fig-<id>.html`).
|
|
117
123
|
|
|
118
124
|
A **wipe-slider** stays the narrow tool for exactly two states of the same
|
|
119
125
|
layout with pixel-level tweaks. Never ship a squeezed side-by-side as the
|
|
120
126
|
*only* view of desktop frames, and never a full-frame toggle as the only
|
|
121
127
|
view of many variations — each is one half of the pair above.
|
|
122
128
|
|
|
129
|
+
## Metadata & geometry — stamped for you
|
|
130
|
+
|
|
131
|
+
Every landed fig is **auto-stamped server-side** (on `create` and `generate`)
|
|
132
|
+
with two things you do **not** hand-write:
|
|
133
|
+
|
|
134
|
+
- A **device kit** `<style>` — the target's hard geometry as CSS custom
|
|
135
|
+
properties from the one source of truth: `--fig-artboard-w/h` and
|
|
136
|
+
`--fig-safe-top/right/bottom/left`, plus `.fig-safe` / `.fig-safe-top` /
|
|
137
|
+
`.fig-safe-bottom` helpers. Only mobile figs with a fixed artboard get it.
|
|
138
|
+
- A **machine-readable manifest** — `<script type="application/fig+json"
|
|
139
|
+
id="fig-manifest">` describing the artifact (target, geometry, generator,
|
|
140
|
+
intent, feature, external deps, and objective fidelity `checks`). It powers fig
|
|
141
|
+
search and the self-improving loop. Artifact-descriptive only — no team/brand
|
|
142
|
+
ids (the block is served on the public link).
|
|
143
|
+
|
|
144
|
+
So when you **hand-build** a fig (the default path), do your part of the contract:
|
|
145
|
+
|
|
146
|
+
- **Mobile:** size the body to the exact logical screen and emit
|
|
147
|
+
`<meta name="figura:artboard" content="WxH">` matching it (iPhone portrait
|
|
148
|
+
`393x852` / landscape `852x393`). For OS-chrome insets prefer
|
|
149
|
+
`var(--fig-safe-top, 59px)` / `.fig-safe-top` over hardcoded pixels — the stamp
|
|
150
|
+
fills the value, the fallback keeps you correct if the kit is absent.
|
|
151
|
+
- **Always:** emit `<meta name="figura:context" content="...">` (design intent).
|
|
152
|
+
- **Optional but valued:** if the fig grounds a specific feature or flag, emit
|
|
153
|
+
`<meta name="figura:feature" content="<flag-or-slug>">` so it links back to the
|
|
154
|
+
feature it depicts.
|
|
155
|
+
|
|
123
156
|
## Notes
|
|
124
157
|
|
|
125
158
|
- **MCP unavailable** (headless / cron, or no interactive auth): fall back to the
|