Skills
.Work. You
Rest

amvcp-tokens-contact-sheet

Community

Render a living token style guide you can use

Design & Creative#style guide#design tokens#wcag contrast#living design page#click-to-copy#ui diagnostics
AuthorEmasoft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It turns your DESIGN.md design tokens into an immediately inspectable, click-to-copy “living design page” so designers and engineers can verify spacing, color, typography, motion, and stacking at a glance.

Core Features & Use Cases

  • Self-contained contact-sheet renderer: Generates a schema-driven HTML page themed by DESIGN.md with one section per token group.
  • Visual + diagnostic panels: Color panels include WCAG contrast annotations, spacing uses true-pixel rulers, and radius/elevation/z-index are rendered as direct comparisons.
  • Click-to-copy affordances: Every swatch/specimen/bar/chip is a keyboard-accessible button that copies values (with deliberate fail-soft clipboard fallback).
  • Living design page workflow: Use it as a style guide artifact that stays in sync with the underlying token schema as it evolves.

Quick Start

Use the token contact sheet to render a click-to-copy DESIGN.md living page by prompting: “token contact sheet for the heritage preset”.

Dependency Matrix

Required Modules

None required

Components

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-contact-sheet
Download link: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/archive/main.zip#amvcp-tokens-contact-sheet

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.