skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-tokens-presets

Generate and apply named dual-theme design token presets with optional personality deltas.

Updated May 8, 2026
Search Tags:#design tokens#theme presets#dual-theme contract#hot-swap theming#personality deltas#brand mixing#scoped theming
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tokens-presets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-tokens-presets
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-tokens-presets
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tokens-presets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of choosing a coherent visual design system by providing ready-to-apply dual-theme token presets and brand/personality variations that stay lint-safe and consistent across light and dark.

Core Features & Use Cases

  • Named dual-theme token presets: apply complete DESIGN.md fixtures (including typography, radii, elevation, motion, and code tokens) with a guaranteed light/dark contract.
  • Personality deltas: shift warmth/coolness, accent hue, and motion/radius character without breaking the token structure.
  • Hot-swap theming for live iteration: re-theme an already-loaded page using hotSwap so the full UI updates immediately.
  • Theme blending and scoping: blend two brands by role (multi-brand mixer) and apply tokens to a subtree (scoped theming) for co-branded or sectional designs.
  • Syntax token alignment: ensure code blocks use the preset’s syntax highlight vocabulary in a theme-consistent way.

Quick Start

Use the presets layer to apply a named dual-theme palette, optionally nudge it with a personality delta, and hot-swap the resulting DESIGN.md into your page.

Frequently Asked Questions about amvcp-tokens-presets

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

FAQPage Schema
How do I apply dual-theme design tokens to ensure light and dark mode consistency?▼

To apply dual-theme design tokens, you select a named preset that enforces a light/dark contract, immediately applying a coherent palette, typography, and interaction feel across both modes.

What is the best way to hot-swap themes during live UI iteration?▼

Hot-swap theming works by using a runtime hook to re-theme an already-loaded page, updating the full UI instantly with new design tokens without requiring a page reload.

Can I blend two brand palettes and scope tokens to a specific subtree?▼

You can blend two brands by role using a multi-brand mixer and apply scoped theming to a subtree, enabling co-branded or sectional designs while maintaining structural token safety.

How do design token personality deltas adjust the visual feel of a palette?▼

Personality deltas adjust visual feel by shifting warmth, coolness, accent hue, and motion or radius character, allowing you to tune brand personality without breaking the token structure.

Does this dual-theme contract approach enforce linting expectations for design tokens?▼

The dual-theme contract enforces anti-slop safety through linting expectations, requiring both light and dark tokens to be present and correctly structured to prevent errors.

When do I need syntax token alignment for code blocks in a themed design system?▼

Syntax token alignment is needed when rendering code blocks, ensuring the syntax highlight vocabulary remains consistent with the applied dual-theme palette and overall design system.

Related Skills

Explore More Design & Creative Skills→
keboolakeboola
14

dataapp-dev

Validate, build, and verify Streamlit-based Keboola data apps.

Official
Advanced
YeaChan05YeaChan05

visual-ralph

Automate frontend UI restyling with pixel-diff verification against approved references.

Community
Advanced
Impertio-StudioImpertio-Studio
17

thatopen-impl-highlighting

Coordinate Highlighter, Hoverer, Outliner, and Mesher in a ThatOpen BIM viewer.

Official
Advanced
yaresimeonthomasyaresimeonthomas

shadcn-customization

Centralize shadcn/ui theme changes via semantic CSS variables.

Community
Intermediate