figura-cli 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figura-cli",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Command-line client for the Figura visualization SaaS",
   "license": "MIT",
   "type": "module",

package/skills/figura-brand/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: figura-brand
+description: "Introduce a repo to Figura — scan the codebase for its design system (design tokens, brand docs, app name) and set the team's Figura brand profile so generated figs are on-brand. Use when asked to import or sync a brand, set up Figura for a project, or 'introduce my repo to Figura'."
+argument-hint: '[path to the repo or design-system directory]'
+allowed-tools: 'Read, Grep, Glob, Bash(figura *), Bash(bunx figura-cli *)'
+---
+
+# Figura Brand — introduce a repo to Figura
+
+Scan THIS repository for its design system and set the user's Figura **brand
+profile** from it, so every fig the `/fig` skill / generator produces is on-brand.
+You (Claude) do the synthesis — read the code and docs, then push the result. No
+figura.so UI.
+
+`$ARGUMENTS` is an optional path to focus on (a repo root or a design-system
+directory). Default to the current repo.
+
+## Prerequisites
+
+The user needs the `figura` CLI authenticated once (`figura login`) — the brand is
+written to the team that token belongs to. If a `figura` **MCP server** is
+connected, prefer its `figura_set_brand` tool over the CLI. If neither the CLI nor
+`bunx figura-cli` is available, tell the user to install it
+(`curl -fsSL https://figura.so/install.sh | bash`) and stop.
+
+Confirm the target team first: `figura whoami` (or the `figura_whoami` tool). The
+brand is **team-wide and overwrites** the current one — never push without showing
+the user what you're about to set and getting an explicit OK.
+
+## Workflow
+
+### 1. Scan the repo for design signals
+
+Hunt across whatever stack this repo uses — do not assume one framework:
+
+- **Design tokens** — colors, type, spacing, radii, gradients. Look for:
+  - iOS/Swift: `Color(hex: 0x…)`, `UIColor`, `Font.custom(…)`, asset catalogs (`*.xcassets/*.colorset`), files like `Colors.swift` / `DesignTokens.swift` / a `design-system/` dir.
+  - Web: CSS custom properties (`--color-…`, `:root{}`), Tailwind theme (`tailwind.config.*`), `tokens.ts|json`, styled/emotion themes, SCSS `$vars`.
+  - Android: `colors.xml`, `themes.xml`.
+  - A generated/single-source tokens file (e.g. a `tokens.generated.*`) — prefer it; it's the source of truth.
+- **Brand voice + positioning** — `BRAND.md`, `STRATEGY.md`, design-system READMEs, marketing copy, the landing page hero. Capture the tone and any explicit voice lines / taglines.
+- **Identity** — app/brand name + one-line description: `package.json` (name/description), `Info.plist` (`CFBundleName`), app-store copy, the README's first paragraph.
+- **Role/usage notes** — inline comments next to tokens often state the role
+  (e.g. `// primary brand accent; record button`). Carry those into the tokens block.
+
+Use `Glob`/`Grep` to locate, `Read` to extract real values. Use the REAL hexes,
+fonts, and sizes from the repo — never invent them.
+
+### 2. Synthesize the brand profile
+
+Produce three fields (see `reference/brand-format.md` for the exact tokensBlock shape):
+
+- **name** — the product/brand name.
+- **appDescription** — one clause: what it is + who it's for.
+- **tokensBlock** — freeform plain text the fig generator reads verbatim:
+  - **Colors** — the real palette, each `#HEX — name — role` (role from the repo's comments/usage).
+  - **Brand gradient** — if the repo defines one, state it exactly (`linear-gradient(…)`).
+  - **Type** — display / body / mono faces (real font names + fallbacks) and the size scale.
+  - **Spacing / radius** — the base unit + scale.
+  - **Icon language** — SF Symbols / inline SVG / icon set the product uses; ban emoji if the brand does.
+  - **Voice** — 3–5 short brand voice lines + a one-line tone rule, inferred from the docs/copy.
+  - **Conventions** — any hard rules you found ("never use X", aspect ratios, chrome shape).
+
+This synthesis IS the value — enrich the raw tokens with the roles, voice, and
+conventions you read from the repo. Keep it grounded in what's actually there.
+
+### 3. Confirm, then push
+
+Show the user the synthesized `name`, `appDescription`, and the full `tokensBlock`,
+and confirm the target team (`figura whoami`). On approval:
+
+- **MCP (preferred):** call `figura_set_brand` with `{ name, appDescription, tokensBlock }`.
+- **CLI fallback:** pipe the block over stdin —
+  ```bash
+  cat <<'TOKENS' | figura brand set --name "<name>" --description "<one clause>" --tokens -
+  … the tokensBlock …
+  TOKENS
+  ```
+  (Use `bunx figura-cli` in place of `figura` if it isn't on PATH.)
+
+### 4. Verify
+
+`figura brand --json` (or the `figura_whoami` → `figura brand` read) → confirm
+`isCustom: true` and that the saved tokens match. Then tell the user the brand is
+set and suggest trying `/fig <a screen>` to see it render on-brand.
+
+## Output
+
+Report the brand you set (name + a one-line summary of the palette/type/voice you
+captured) and confirm it's live for the team. Don't paste the entire tokensBlock
+again unless asked.

package/skills/figura-brand/reference/brand-format.md

@@ -0,0 +1,81 @@
+# tokensBlock format
+
+The brand profile's `tokensBlock` is **freeform plain text** injected verbatim
+into the fig-generation prompt. It is NOT JSON, NOT markdown — just clear,
+sectioned plain text with concrete values. Lead with hard rules; be terse.
+
+Aim for these sections (skip any the repo genuinely doesn't have; never invent
+values):
+
+```
+<NAME> BRAND GROUND-TRUTH (locked — these are NOT suggestions):
+
+WHAT <NAME> IS
+- One or two lines: what the product is, the platform, the core metaphor.
+- The pitch / tagline if there is one.
+
+COLORS (use ONLY these — never invent hues)
+- <#HEX> <Name> — <role/usage, from the repo's comments or how it's used>.
+- … one line per color. Note any opacity variants used over media.
+
+THE BRAND GRADIENT (only if the repo defines one)
+- EXACTLY one: linear-gradient(<deg>, <#HEX>, <#HEX>). Where it's allowed.
+
+TYPE
+- Display: <Font> — stack '<Font>', <fallbacks>. Where it's used + weight rule.
+- Body: <Font> — stack <fallbacks>. UI text.
+- Mono: <Font> — stack <fallbacks>. Numerics / code.
+- Scale: <the real size ramp, e.g. 12 / 14 / 16 / 20 / 24 / 36 / 48>.
+
+SPACING / RADIUS
+- Base unit + scale (e.g. 4-based: 4 8 12 16 24 32 …). Radius tokens (sm/md/lg/full).
+
+ICON LANGUAGE
+- The icon set the product uses (SF Symbols names / inline stroke SVG / a named set).
+- Ban emoji if the brand bans it.
+
+VOICE (3–5 lines, the brand's register)
+- Short example lines in the brand's actual tone (pull/adapt from brand docs/copy).
+- One tone rule (e.g. "terse, confident, never salesy").
+
+CONVENTIONS (hard rules found in the repo)
+- e.g. aspect ratios, chrome shape (pill/capsule), "never use <X>", dark-first, etc.
+```
+
+## Worked example (Pano — abridged)
+
+```
+PANO BRAND GROUND-TRUTH (locked):
+
+WHAT PANO IS
+- A landscape creator-cinema iOS app. Films are always landscape, 2:1, never portrait.
+- Voice, not text. Tagline: "Go wide."
+
+COLORS (use ONLY these)
+- #DD5325 Vermillion — primary brand accent; record/active state; gradient start.
+- #2A6F84 Teal — secondary accent; pro/expert affordances; gradient end.
+- #E2E2DC Paper — foreground text + light surfaces (a cool gray; never warm cream).
+- #0A0A0A Ground — near-black base background.
+
+THE BRAND GRADIENT
+- EXACTLY one: linear-gradient(90deg, #DD5325, #2A6F84). Wordmark/hero accents only.
+
+TYPE
+- Display: Clash Display — stack 'Clash Display', system-ui, sans-serif. Medium at display size.
+- Body: Inter — stack Inter, -apple-system, 'SF Pro Text', system-ui, sans-serif.
+- Mono: JetBrains Mono — hex values, timecode, numerics.
+- Scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48.
+
+SPACING / RADIUS
+- 4-based scale: 4 8 12 16 20 24 32 40 48 64. Radius: sm 4, md 8, lg 12, full 999.
+
+ICON LANGUAGE
+- SF Symbols by name (mic.fill, waveform, play.fill, chevron.right). Inline stroke SVG. NEVER emoji.
+
+VOICE
+- "Vertical was a phase." "Stories went sideways." "Turn your phone." "Go sideways."
+- Terse, sideways, confident — never salesy.
+
+CONVENTIONS
+- Films always 2:1 landscape. Chrome is pill/capsule (border-radius 999). Dark-first. Never iOS "Liquid Glass".
+```