amvcp-tokens-scales
CommunityGenerate φ spacing, elevation, motion, and z-index tokens
Design & Creative#design tokens#phi spacing#elevation scale#motion library#z-index scale#css @layer#token vocabulary
AuthorEmasoft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves the problem of inconsistent UI spacing, depth, motion timing, and stacking order by generating a coherent, token-driven vocabulary that can be themed and reused across pages.
Core Features & Use Cases
- Phi spacing scale generator: produces a golden-ratio spacing progression suitable for consistent rhythm across layouts.
- MD3 + cinematic elevation scales: generates production-ready shadow steps (including an optional tinted ink mode).
- 8×8 motion library: outputs named durations and easings for consistent animation behavior.
- 9-level semantic z-index scale: prevents z-index wars by mapping stacking intent (dropdown, modal, tooltip, etc.) to safe numeric levels.
- Token vocabulary architecture: establishes a layered, centralized token scheme with
@layercascade andvar()delegation so all downstream components read tokens without hardcoded literals.
Quick Start
Ask an agent to generate spacing, elevation, motion, and z-index tokens using the amvcp-tokens-scales Skill when you need consistent visual scales for a new page design.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: amvcp-tokens-scales Download link: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/archive/main.zip#amvcp-tokens-scales Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.