voxflow 1.15.5 → 1.16.0

package/skills/card/references/design-languages/data-poster.md

@@ -0,0 +1,57 @@
+# data-poster
+
+Data becomes the object: giant number, scale mark, comparison block, rank, or metric field. Use this when a number or measurement is the story.
+
+## Must Use
+
+- One dominant number, rank, percentage, amount, or metric phrase.
+- Visual comparison or scale cue: bar, field, axis, baseline, range, ranking, or magnitude block.
+- Short source/context note.
+- Strong scale contrast between number and all other text.
+
+## Must Not Use
+
+- Six equal metric boxes.
+- Dense charts at thumbnail size.
+- Overprecise axes or table-like visuals.
+- Many numbers competing equally.
+- Decorative numbers unrelated to the story.
+
+## Recommended Typography
+
+- Number: huge, heavy sans or strong display.
+- Unit: contrasting but attached to number.
+- Notes: mono or compact sans.
+- Headline: secondary to the data, unless the headline is the data.
+
+## Recommended Layout Recipes
+
+- `big-number`
+- `swiss-poster` style `quote-poster`
+- `before-after` for comparisons
+- `cover-object` when the object is the data mark
+
+## Text Density Limit
+
+- Low.
+- One primary number plus 1-3 supporting notes.
+- Avoid paragraphs.
+- When increasing set-level density, add source/scope/definition/implication notes around the dominant metric. Do not add many competing numbers or metric boxes.
+
+## Asset Requirement
+
+- Image not required.
+- Big data mark is mandatory.
+
+## Best Modifiers
+
+- `big-number`
+- `scale-contrast`
+- `split-field`
+- `edge-crop`
+
+## QA
+
+Pass only if the number is the first and strongest element.
+
+Fail if the number is just one metric among many boxes.

package/skills/card/references/design-languages/editorial-artifact.md

@@ -0,0 +1,58 @@
+# editorial-artifact
+
+Objects, labels, tickets, receipts, stamps, inspection sheets, dossiers, and physical-document metaphors. Use this when abstract information needs to feel tangible and inspectable.
+
+## Must Use
+
+- A dominant artifact: dossier, receipt, manifest, inspection sheet, ticket, tag, folder, package label, certificate, ledger, or form.
+- At least one meaningful device: stamp, label, tab, tape, fold, serial number, approval mark, rejection mark, or punched hole.
+- Layering or object depth: overlap, shadow, tilt, stacked paper, clipped edge, or folded corner.
+- Text attached to the artifact or its labels, not only floating beside it.
+
+## Must Not Use
+
+- Equal grids of bordered cards as the main structure.
+- Thin-line boxes pretending to be documents.
+- Generic dashboard panels.
+- Decorative stamps that do not encode status, action, or meaning.
+- Full-canvas coordinate grids.
+
+## Recommended Typography
+
+- Headline: serif or expressive display, often large and editorial.
+- Artifact text: mono or sturdy sans, like labels, manifests, or forms.
+- Body copy: compact sans, secondary to the artifact.
+- Metadata: mono, small, document-like.
+
+## Recommended Layout Recipes
+
+- `cover-object`
+- `artifact-board`
+- `checklist-sheet`
+- `split-diagram`
+- `before-after` when comparing two documents/states
+
+## Text Density Limit
+
+- Low to medium.
+- Keep body copy under 45 Chinese characters per card when the artifact is large.
+- Checklist/form rows can be denser, but should live inside one dominant artifact.
+
+## Asset Requirement
+
+- Must use an object. It can be CSS-built, image-based, or generated.
+- External image is optional, but a physical/document metaphor is mandatory.
+
+## Best Modifiers
+
+- `layered-depth`
+- `stamp-label`
+- `receipt-form`
+- `diagonal-tension`
+- `paper-cut`
+
+## QA
+
+Pass only if the artifact is identifiable within one second and dominates the card more than the headline/body text.
+
+Fail if removing the artifact leaves a normal text card.

package/skills/card/references/design-languages/field-notes.md

@@ -0,0 +1,58 @@
+# field-notes
+
+Notebook, field report, observation log, specimen label, map, margin notes, and human research texture. Use this for observational, reflective, cultural, community, or research-driven content.
+
+## Must Use
+
+- A specimen, observation, map, clipped photo, label, margin note, or field-record object.
+- Human-scale detail: source note, date, place, observation line, sample ID, or hand-collected-feeling label.
+- Calm, tactile composition with paper-like space.
+- At least one annotation or note that feels observed, not marketed.
+
+## Must Not Use
+
+- Corporate report grids.
+- Hyper-polished product mockups.
+- Neon, dark dashboards, glass panels.
+- Fake handwriting unless a real handwriting asset is supplied.
+- Overdecorated scrapbook collage.
+
+## Recommended Typography
+
+- Headline: serif or humanist sans.
+- Notes: mono or compact sans, like labels.
+- Body: readable sans, calm and not too bold.
+- Metadata: small mono.
+
+## Recommended Layout Recipes
+
+- `artifact-board`
+- `cover-crop`
+- `split-diagram`
+- `proof-grid` when using photo/specimen sets
+- `quote-poster` for reflective observations
+
+## Text Density Limit
+
+- Medium.
+- Observational notes can be concise, but do not turn the card into a report.
+- Prefer 2-4 notes over long paragraphs.
+
+## Asset Requirement
+
+- Should use a specimen-like visual: photo, map, clipped object, note card, label, or CSS-built specimen.
+- Real or generated images are encouraged but not mandatory.
+
+## Best Modifiers
+
+- `annotation`
+- `paper-cut`
+- `layered-depth`
+- `map-route`
+- `asymmetric-space`
+
+## QA
+
+Pass only if the card feels like an observation or field record rather than a corporate slide.
+
+Fail if it becomes a generic paper card with green accents.

package/skills/card/references/design-languages/image-led-magazine.md

@@ -0,0 +1,57 @@
+# image-led-magazine
+
+The image carries the card: photo, screenshot, product object, editorial illustration, generated visual, or intentional crop. Use this when visual evidence or atmosphere should lead.
+
+## Must Use
+
+- A dominant image or image-like visual field occupying at least 40% of the canvas.
+- Intentional crop, bleed, edge placement, or image-led negative space.
+- Caption, annotation, or short text that responds to the image.
+- Subject-revealing imagery: the image must show the product, person, place, object, UI, or state.
+
+## Must Not Use
+
+- Blurred dark stock backgrounds.
+- Purely atmospheric images that do not reveal the topic.
+- Small framed image inside a text-first layout.
+- Generated images containing their own page title, footer, watermark, or card chrome.
+- Equal grids unless the language is explicitly `proof-grid`.
+
+## Recommended Typography
+
+- Headline: editorial serif or clean sans, sized to fit around image crop.
+- Body: short sans.
+- Captions: mono or compact sans.
+- Avoid heavy body copy over complex image areas.
+
+## Recommended Layout Recipes
+
+- `cover-crop`
+- `lead image + sidebar` via `split-diagram`
+- `proof-grid` for evidence sets
+- `cover-object` if the object/image is dominant
+- `closer-question` for cinematic image closers
+
+## Text Density Limit
+
+- Low to medium.
+- Text should not exceed 30% of the visual area.
+- Keep overlays short.
+
+## Asset Requirement
+
+- Must use an image, screenshot, generated image, or image-like illustration.
+- CSS-only abstract shape is not enough unless it clearly behaves like an image field and the topic is abstract.
+
+## Best Modifiers
+
+- `edge-crop`
+- `annotation`
+- `asymmetric-space`
+- `layered-depth`
+
+## QA
+
+Pass only if the image is the first thing seen and the card would lose its meaning without it.
+
+Fail if the image is a decorative background behind a normal text card.

package/skills/card/references/design-languages/newsroom-poster.md

@@ -0,0 +1,58 @@
+# newsroom-poster
+
+Urgent editorial poster language: hard headline, source-first information, controlled red/accent, and judgment-first hierarchy. Use this for incidents, releases, public statements, timelines, comparisons, or factual updates.
+
+## Must Use
+
+- Hard headline that states the news or judgment.
+- A strong field, banner, severity label, timestamp, or source/status device.
+- Clear source or context metadata.
+- One controlled urgency color, usually red or black.
+- Fast hierarchy: reader should know what happened before reading details.
+
+## Must Not Use
+
+- Sensational fake breaking-news decoration.
+- Too many red boxes.
+- Decorative alerts with no factual role.
+- Soft lifestyle colors.
+- Long explanatory paragraphs before the headline.
+
+## Recommended Typography
+
+- Headline: heavy sans, direct and compact.
+- Urgency/status: bold sans or mono.
+- Body: short, factual sans.
+- Metadata: mono, source-like.
+
+## Recommended Layout Recipes
+
+- `cover-object` with status/severity object
+- `big-number`
+- `before-after`
+- `split-field`
+- `quote-poster` only for official statements
+
+## Text Density Limit
+
+- Low to medium.
+- 1 headline, 1-2 fact lines, source/status metadata.
+- Timelines can be denser but should use clear time blocks.
+
+## Asset Requirement
+
+- Image not required.
+- Must use a strong status/urgency device: field, stamp, alert label, ticker, date strip, or source card.
+
+## Best Modifiers
+
+- `split-field`
+- `stamp-label`
+- `big-number`
+- `scale-contrast`
+
+## QA
+
+Pass only if the headline and status are legible at thumbnail size.
+
+Fail if it reads like a generic red-accent business card.

package/skills/card/references/design-languages/product-catalog.md

@@ -0,0 +1,57 @@
+# product-catalog
+
+Product/manual/catalog language: object presentation, callouts, specs, labels, and clean product framing. Use this when the topic can be treated as a product, tool, feature, module, UI object, or specimen.
+
+## Must Use
+
+- One central object/specimen/product/module as the focal point.
+- At least one callout or spec label attached to the object.
+- Clean object presentation with controlled whitespace.
+- Labels explain visible object features or states.
+
+## Must Not Use
+
+- Generic device mockups with fake UI.
+- SaaS dashboard cliches.
+- Callouts floating without connecting to the object.
+- Feature lists unrelated to visible parts.
+- Excessive shadows/gloss.
+
+## Recommended Typography
+
+- Headline: clean bold sans.
+- Specs/callouts: mono or compact sans.
+- Body: short sans.
+- Product label: mono.
+
+## Recommended Layout Recipes
+
+- `cover-object`
+- `split-diagram`
+- `artifact-board`
+- `proof-grid` for feature states
+- `before-after` for version comparisons
+
+## Text Density Limit
+
+- Low to medium.
+- Max 3-5 callouts/specs.
+- Body copy should be shorter than the labels/specs.
+
+## Asset Requirement
+
+- Must use an object. Can be a real product image, screenshot crop, generated object, or CSS-built product/specimen.
+- If using screenshot, crop or redesign so the object is inspectable.
+
+## Best Modifiers
+
+- `annotation`
+- `edge-crop`
+- `cutaway`
+- `stamp-label`
+
+## QA
+
+Pass only if the object remains the focal point and the callouts explain it.
+
+Fail if the card is just a feature list with a decorative shape.

package/skills/card/references/design-languages/swiss-poster.md

@@ -0,0 +1,60 @@
+# swiss-poster
+
+Bold typographic hierarchy, strict alignment, large numbers, limited palette, and strong negative space. Use this when the idea should feel distilled and poster-like.
+
+## Must Use
+
+- One dominant typographic element: large number, word, phrase, or typographic block.
+- Strong alignment axis or modular placement.
+- Large negative space or a single large filled field.
+- Limited palette: usually paper/ink plus one accent.
+- Clear scale contrast between dominant type and metadata.
+
+## Must Not Use
+
+- Decorative artifacts, stamps, tapes, scrapbook layers, or faux paper clutter.
+- Many small components.
+- Soft gradients, glows, or atmospheric images.
+- Dense paragraphs.
+- More than 2 type families.
+
+## Recommended Typography
+
+- Headline: bold sans or strong grotesk-like display.
+- Numbers: very large, heavy sans.
+- Body: minimal, short, aligned.
+- Metadata: mono or small sans, but restrained.
+
+## Recommended Layout Recipes
+
+- `big-number`
+- `quote-poster`
+- `before-after`
+- `cover-object` only when the "object" is typographic
+- `closer-question`
+
+## Text Density Limit
+
+- Low.
+- Max 1 headline, 1 short support line, and metadata.
+- Avoid bullet lists.
+- If the overall card set needs more detail, distribute the explanation across multiple poster cards or pair this language with a separate medium-density explainer card. Do not turn one Swiss poster into a dense mini-article.
+
+## Asset Requirement
+
+- Image not required.
+- Big type or number is mandatory.
+
+## Best Modifiers
+
+- `scale-contrast`
+- `big-number`
+- `split-field`
+- `asymmetric-space`
+- `edge-crop`
+
+## QA
+
+Pass only if the card still reads as a poster when viewed as a thumbnail.
+
+Fail if the layout becomes a normal editorial card with a large title.

package/skills/card/references/design-languages.md

@@ -0,0 +1,166 @@
+# Design Language System
+
+Use this index to choose a visible design language before building cards. A design language is not the same as a theme preset. Theme presets define palette and type tone; design language defines the visual grammar: composition, focal devices, texture, objects, and pacing.
+
+## How To Use
+
+1. Choose 1 primary design language.
+2. Load that language's individual spec file from `references/design-languages/<name>.md`.
+3. Optionally add 1-2 modifiers.
+4. Combine with a theme preset and layout recipes.
+
+Recommended structure:
+
+```text
+Theme preset + Primary language + Modifier + Modifier
+```
+
+Examples:
+
+- `product-manual + editorial-artifact + diagonal-tension + stamp-label`
+- `magazine-eink + image-led-magazine + edge-crop + annotation`
+- `bold-editorial + swiss-poster + scale-contrast + big-number`
+
+Do not combine more than 3 languages/modifiers in one card set unless the user explicitly wants maximal eclecticism.
+
+## Primary Language Specs
+
+Load only the spec files relevant to the selected language(s):
+
+- `editorial-artifact`: `references/design-languages/editorial-artifact.md`
+- `swiss-poster`: `references/design-languages/swiss-poster.md`
+- `image-led-magazine`: `references/design-languages/image-led-magazine.md`
+- `field-notes`: `references/design-languages/field-notes.md`
+- `newsroom-poster`: `references/design-languages/newsroom-poster.md`
+- `product-catalog`: `references/design-languages/product-catalog.md`
+- `cinematic-still`: `references/design-languages/cinematic-still.md`
+- `data-poster`: `references/design-languages/data-poster.md`
+
+Each spec defines:
+
+- required visual anchors
+- prohibited elements
+- typography strategy
+- recommended layout recipes
+- text density limits
+- image/object/data requirements
+- QA criteria
+
+## Modifier Catalog
+
+### Composition Modifiers
+
+- `scale-contrast`: extreme size differences for hierarchy.
+- `edge-crop`: crop objects or images at the canvas edge.
+- `diagonal-tension`: angled bands, tilted labels, or slanted object stacks.
+- `layered-depth`: overlap, stacked sheets, shadows, tape, labels, and depth ordering.
+- `split-field`: large filled fields instead of many boxes.
+- `asymmetric-space`: unbalanced whitespace that points attention toward the focal point.
+- `cutaway`: show an object/system as sliced open or partially revealed.
+
+### Device Modifiers
+
+- `stamp-label`: stamps, tags, seals, labels, tabs, warnings, approvals, or status marks.
+- `receipt-form`: receipts, forms, logs, ledgers, manifests, inspection sheets, and checklists.
+- `annotation`: callouts, arrows, labels, circled details, figure captions, and margin notes.
+- `big-number`: one large number or short metric phrase as the visual anchor.
+- `paper-cut`: torn edges, cut paper, scraps, tabs, clipped fragments, or collage layers.
+- `map-route`: route lines, paths, milestones, coordinates, or directional systems.
+
+## User-Facing Preset Combinations
+
+Use these as concise choices for the user. Internally map them to language specs and modifiers.
+
+### Technical But Designed
+
+- Primary: `editorial-artifact`
+- Load: `references/design-languages/editorial-artifact.md`
+- Modifiers: `cutaway`, `annotation`, `stamp-label`
+- Theme fit: `product-manual`, `engineering-paper`, `porcelain-research`
+- Good for: API, release, security, architecture, tooling
+
+### Magazine Explainer
+
+- Primary: `image-led-magazine`
+- Load: `references/design-languages/image-led-magazine.md`
+- Modifiers: `edge-crop`, `asymmetric-space`, `annotation`
+- Theme fit: `magazine-eink`, `dune-gallery`, `field-notes`
+- Good for: product stories, essays, profiles, visual topics
+
+### Bold Thesis
+
+- Primary: `swiss-poster`
+- Load: `references/design-languages/swiss-poster.md`
+- Modifiers: `scale-contrast`, `split-field`, `big-number`
+- Theme fit: `bold-editorial`, `newsroom-paper`, `magazine-eink`
+- Good for: opinions, launches, strong hooks, short carousels
+
+### News Incident
+
+- Primary: `newsroom-poster`
+- Load: `references/design-languages/newsroom-poster.md`
+- Modifiers: `stamp-label`, `split-field`, `big-number`
+- Theme fit: `newsroom-paper`, `quiet-report`, `engineering-paper`
+- Good for: incidents, releases, factual updates, comparisons
+
+### Archive Dossier
+
+- Primary: `field-notes`
+- Load: `references/design-languages/field-notes.md`
+- Modifiers: `layered-depth`, `receipt-form`, `paper-cut`
+- Theme fit: `kraft-editorial`, `field-notes`, `magazine-eink`
+- Good for: history, research, culture, analysis, case studies
+
+### Product Specimen
+
+- Primary: `product-catalog`
+- Load: `references/design-languages/product-catalog.md`
+- Modifiers: `edge-crop`, `annotation`, `stamp-label`
+- Theme fit: `product-manual`, `quiet-report`, `dune-gallery`
+- Good for: product features, UI states, tools, how-to explainers
+
+### Cinematic Hook
+
+- Primary: `cinematic-still`
+- Load: `references/design-languages/cinematic-still.md`
+- Modifiers: `edge-crop`, `asymmetric-space`, `layered-depth`
+- Theme fit: `dune-gallery`, `magazine-eink`, dark custom variants
+- Good for: narrative openers, launch teasers, cultural hooks, closers
+
+### Data Poster
+
+- Primary: `data-poster`
+- Load: `references/design-languages/data-poster.md`
+- Modifiers: `scale-contrast`, `big-number`, `split-field`
+- Theme fit: `quiet-report`, `newsroom-paper`, `porcelain-research`
+- Good for: metrics, benchmarks, reports, survey findings
+
+## Selection Rules
+
+- User can choose a preset combination directly.
+- User can choose one primary design language plus modifiers.
+- If user asks for "more design", default to `editorial-artifact + scale-contrast + stamp-label` for technical/process content.
+- If the user gives no preference, pick the smallest combination that solves the content: one primary language and one composition modifier.
+- Keep the combination stable across a card set, but vary the layout recipe and visual anchor per card.
+- When mixing two primary languages, designate one as primary and the other as an accent. Example: `image-led-magazine` primary with `data-poster` accent for one metrics card.
+
+## Density Compatibility
+
+Apply `references/taste.md` set-level density rules without violating the selected primary language.
+
+- Raising information density means the set must contain useful detail; it does not mean every card becomes dense.
+- If the primary language is low-density, such as `swiss-poster`, `cinematic-still`, or `data-poster`, keep each card within that language's density limit and distribute detail across the set.
+- If the user needs a real explainer and the primary language cannot carry enough detail, add a medium-density card using a compatible recipe or secondary accent language.
+- Never resolve density by shrinking all text. Add structure: labels, callouts, captions, checklists, observations, or source/context notes.
+
+## QA
+
+During visual review, state:
+
+- Primary design language used.
+- Spec file loaded.
+- Modifiers used.
+- Visual anchor per card.
+- Whether the card still relies too much on boxes, grids, or hairlines.
+
+Fail and revise if the selected language cannot be recognized from the screenshot or if a spec's `Must Use` / `Must Not Use` rules are violated.