skills.rest
vellum-ai
vellum-aiOFFICIAL
Explore all skills by this author →
Website𝕏@vellum_aiGitHub

vellum-workspace-theme

Author and validate design-token overrides in a workspace theme.json applied live to connected clients.

1.2k|166|Updated Feb 7, 2026
Search Tags:#UI#theme#Customization#Json#contrast validation#Color palette#Design tokens
One-click install
npx skills add https://github.com/vellum-ai/vellum-assistant --skill vellum-workspace-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vellum-workspace-theme
Source: https://github.com/vellum-ai/vellum-assistant/tree/main/skills/vellum-workspace-theme
Command: npx skills add https://github.com/vellum-ai/vellum-assistant --skill vellum-workspace-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Customizing an app's visual theme normally requires editing code, rebuilding, and restarting. This Skill lets you change the shared app's colors by writing a single JSON file of design tokens that the assistant runtime validates and applies live to every connected client within seconds.

Core Features & Use Cases

  • Design-token overrides: Set accent, background, surfaces, text, and chat-bubble colors in ui/theme.json, layered over the built-in light/dark/velvet base themes.
  • Atomic validation with readable errors: The runtime enforces hex-only colors, all-or-none override groups, a 3:1 contrast floor, and reports exact rejection reasons via GET /v1/workspace/theme.
  • Visual verification loop: Render staged UI snapshots (sampler and chat views) with the current theme applied, so you can iterate edit → snapshot → review without asking the user for screenshots.
  • Use Case: Your user asks for a warm, dark "coffee shop" palette. You write the five core tokens plus an accent, verify the contrast passes, snapshot the sampler view to confirm the palette reads well, and the change appears on their screen immediately.

Quick Start

Ask the assistant to change the app's accent color to a warm orange and show you a preview snapshot of the new theme.

Frequently Asked Questions about vellum-workspace-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I change the app's color theme without restarting?▼

Edit the theme.json file in the workspace ui directory with your design tokens and save it. The assistant runtime validates the file and applies valid changes live to all connected clients within seconds, with no restart or build step.

What color tokens can I customize in theme.json?▼

Eleven token slots are available: accent, background, surface, surfaceRaised, border, text, textMuted, and background/text pairs for user and assistant chat bubbles. Only hex colors are accepted, and unknown keys cause the file to be rejected.

Why was my theme.json file rejected by the runtime?▼

Rejections happen for non-hex colors, unknown keys, incomplete override groups, or contrast below 3:1. Fetch GET /v1/workspace/theme to see the issues list with human-readable reasons, fix the file, and re-check.

Do I have to set all theme tokens at once?▼

No. Accent and border can be set alone, but the core group (background, surface, surfaceRaised, text, textMuted) is all-or-none, and each bubble's background and text must be set together. Setting any core token means authoring the full five-color palette.

How can I preview a theme before the user sees it?▼

Run the assistant ui snapshot command with the sampler or chat view to render a staged UI capture with the current theme applied, then view the PNG. The sampler shows the full style sheet; the chat view shows a staged conversation.

How do I revert to the default built-in theme?▼

Delete the theme.json file from the workspace ui directory, or write {"version":1} with no tokens. Connected clients immediately revert to the built-in light, dark, or velvet base theme.

Related Skills

Explore More Design & Creative Skills→
Devin-AXISDevin-AXIS
3.2k

daytona-cloud-server

Set up a Daytona server with web, API, worker proxy, and database services for iPolloWork.

Community
Advanced
perimetreperimetre

brand-guidelines

Enforce Périmètre’s colour palette, typography, logo usage, and tone rules across branded deliverables.

Official
Intermediate
tsuji-tomonoritsuji-tomonori

a11y-color-contrast

Validate UI elements for WCAG 2.2 AA color contrast requirements.

Community
Intermediate
abrahamgreysonabrahamgreyson

ios-fix

Fix iOS app bugs by patching source, rebuilding, redeploying, and verifying on a real device.

Community
Advanced