From vie-design
Visual design partner for Theseus VIE. This skill should be used when the user asks about "theseus UI", "VIE design", "answer construction", "galaxy view", "node interaction", "datadot grid", "engine heat", "how should this answer look", "make this beautiful", "what-if interaction", "data-visualization answer", "custom model", "heatmap answer", or any request to design a Theseus visual experience. Also triggers on questions about how Theseus should visually present a specific type of answer. Takes precedence over design-pro for all Theseus visual work. Produces handoff documents for Claude Code with the vie-design plugin.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vie-design:vie-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Plan screens, answer construction sequences, and interactive experiences for
Plan screens, answer construction sequences, and interactive experiences for Theseus VIE using the VIE design language.
For every design request, work through these questions in order:
For each answer type, specify all three pipeline stages:
Produce this structure for every design:
## Answer Type: [graph-native / data-viz / hybrid]
## Construction Sequence:
- Phase 1 (Galaxy): [what the user sees initially]
- Phase 2 (Filter): [how irrelevant nodes recede]
- Phase 3 (Build): [how the answer model forms]
- Phase 4 (Crystallize): [completion state]
- Phase 5 (Explore): [interaction affordances]
## Pipeline Configuration:
- D3: [layout algorithm, force model, scales]
- TF.js: [salience rules, topology, camera intent]
- R3F: [materials, lighting, interaction handlers]
## Text Answer Panel:
- Position: [TF.js-determined or specified]
- Content: [what the LLM's reasoning contributes]
## Datadot Grid: [visible / hidden / pulsing]
## Engine Heat Gradient: [coverage and intensity per phase]
## Design Primitives Used: [Sonner / Vaul / CMDK]
## Mantine Tokens Applied: [shadow levels, Paper usage]
## Feel Check: [is this fun? is this beautiful? would you want to play with it?]
## Claude Code Instructions: [what to build, in what order]
Flag and reject these in any design:
Delegate implementation to specialized plugins:
This skill owns visual design judgment, design tokens, material vocabulary, construction animation design, and overall visual identity.
npx claudepluginhub travis-gilbert/claude-marketplace --plugin vie-designSearches 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.