From vie-design
This skill should be used when working on any Theseus VIE UI code, including "theseus components", "VIE styles", "datadot grid", "engine heat gradient", "answer construction", "glass-morphism panels", "Mantine tokens", "VIE color tokens", "Theseus typography", "VIE pipeline", "D3 to R3F", "renderer pipeline", "R3F rendering", "force simulation", or any design system question about the Theseus visual answer engine. Provides the complete VIE design language specification, renderer pipeline contract, material token mappings, and component specs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vie-design:vie-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Theseus VIE is a visual answer engine. Users ask questions and watch answers
Theseus VIE is a visual answer engine. Users ask questions and watch answers construct themselves as interactive models in real time. The visual answer and the text answer are co-equal modalities, both grounded in the same GNN-fused knowledge graph. The experience must be beautiful, visually striking, and fun to navigate.
D3 computes layout (force simulations, hierarchical positioning, geographic projections, data scales). TF.js directs scene intelligence (salience scoring, emphasis, hypothesis styling, construction sequencing, camera placement). R3F renders the 3D interactive experience. This is a pipeline, not alternatives.
Pipeline flow: Backend reasoning -> D3 layout computation -> TF.js scene intelligence -> R3F rendering
Fallbacks:
Port from DotGrid.tsx (not TealDotGrid.tsx). Must include binary data (0s and 1s), mulberry32 PRNG, spring physics with mouse repulsion, ink trail. Background #0f1012, dormant dots rgba(156, 149, 141, 0.04), active dots rgba(74, 138, 150, 0.10-0.15). Hidden when R3F is active renderer. See references/datadot-grid.md.
Warm gradient from bottom of viewport. Terracotta rgba(196, 80, 60, 0.06) and amber rgba(196, 154, 74, 0.04). 30-40% coverage at idle, 60-70% during active reasoning. CSS gradient overlay, 2-3s transitions.
Spinner (braille sequence, teal-blue monospace), progress bar (block characters with percentage), typing effect (search/prompt input). These are polish elements for specific moments.
Mantine theming for tokens (shadows, elevation, z-index, spacing, radii). Radix primitives for behavioral accessibility. Glass-morphism panels: background: rgba(15,16,18,0.66-0.76), backdrop-filter: blur(18px), border-radius: 18-22px. See references/material-tokens.md.
Sonner (toasts, bottom-right), Vaul (bottom-up drawers for detail exploration), CMDK (command palette via Cmd+K). See references/design-primitives.md.
See references/answer-construction.md for detailed phase specs.
| Role | Font | Size | Weight | Tracking |
|---|---|---|---|---|
| Title/heading | Vollkorn (serif) | 1.25-1.55rem | 400-600 | normal |
| Body/text answer | IBM Plex Sans | 14px | 400 | normal |
| Labels/status | JetBrains Mono | 11px | 400 | 0.08em |
| Data/code | JetBrains Mono | 13px | 400 | normal |
Monospace labels: uppercase, letter-spaced. Distinguishes system-voice from content-voice. See references/typography.md.
Apply VIE CSS custom properties exclusively. Never hardcode colors. Key tokens:
--vie-state-idle, --vie-state-thinking, --vie-state-constructing, --vie-state-exploring, --vie-state-error--vie-type-source (#2D5F6B), --vie-type-concept (#7B5EA7), --vie-type-person (#C4503C), --vie-type-hunch (#C49A4A), --vie-type-note (#e8e5e0)--vie-shadow-xs through --vie-shadow-xl (mapped from Mantine)Full token reference: references/color-tokens.md.
Consult these for detailed specifications:
references/design-language.md — Complete VIE design language (Part 1 of spec)references/renderer-pipeline.md — D3 -> TF.js -> R3F pipeline contractreferences/answer-construction.md — The five-phase construction sequencereferences/datadot-grid.md — Porting DotGrid.tsx to Theseus dark themereferences/material-tokens.md — Mantine token mapping to VIE CSS varsreferences/design-primitives.md — Sonner, Vaul, CMDK specsreferences/data-viz-answers.md — Custom data-visualization answer models (DuckDB, D3, R3F)references/color-tokens.md — Full VIE token referencereferences/typography.md — Type scale, font stack, usage rulesvie-design/)For Mantine shadow/elevation source: grep -r "shadow" refs/mantine/packages/mantine-core/src/
For Sonner API patterns: grep -r "toast" refs/sonner/src/
For Vaul drawer patterns: grep -r "Drawer" refs/vaul/src/
For CMDK API: grep -r "Command" refs/cmdk/src/
For Ink UI spinner/progress: grep -r "Spinner\|ProgressBar" refs/ink-ui/
For Vega-Lite specs: grep -r "mark\|encoding" refs/vega-lite/
For Observable patterns: grep -r "Plot\|Framework" refs/observable-framework/
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub travis-gilbert/claude-marketplace --plugin vie-design