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

amvcp-wf-fidelity

Convert DESIGN.md color tokens to grayscale wireframes with fidelity stages.

Updated May 8, 2026
Search Tags:#design system tokens#wireframe fidelity#desaturation engine#ramp comparison#fidelity slider#theme correctness#radius-zero contract
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-wf-fidelity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-wf-fidelity
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-wf-fidelity
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-wf-fidelity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves inconsistent wireframe quality by providing a fidelity-locked grayscale-to-hi-fi desaturation engine that keeps lightness correct across light and dark themes.

Core Features & Use Cases

  • Fidelity stages: Switch between wireframe, low, mid, and hi to match audience and review phase.
  • Theme-correct desaturation: Preserves lightness so wireframes stay properly light-grey in light mode and dark-grey in dark mode.
  • Fidelity RAMP & SLIDER: Render the same screen side-by-side across all four stages or let reviewers drag a slider to choose fidelity.
  • Radius-zero contract at wireframe: Forces border-radius: 0 at wireframe (with an explicit .wf-avatar exception) to keep the wireframe-to-build mapping consistent.
  • Validation & fail-fast: Rejects invalid data-wf-fidelity values to prevent silent visual mismatches.
  • Selection-ready wireframe blocks: Ensures every kit block is addressable as a data-ve-id atom for review and decision flows.

Quick Start

Set data-wf-fidelity on your .wf-root to one of wireframe/low/mid/hi, ensure your kit uses var(--vc-color-*) tokens, and verify in both light and dark themes with screenshots.

Frequently Asked Questions about amvcp-wf-fidelity

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

FAQPage Schema
How do I keep wireframe greyscale lightness correct when switching between light and dark themes?▼

Theme-correct wireframe desaturation preserves lightness so greys stay properly light-grey in light mode and dark-grey in dark mode. Apply fidelity-locked desaturation to design tokens to prevent color drift across theme switches.

What is a wireframe fidelity ramp and when do I need different review stages?▼

A wireframe fidelity ramp renders the same screen across wireframe, low, mid, and hi stages to match audience and review phase. You need it when selecting the right review stage for audience versus phase to progressively show design detail.

How do I set up fidelity stages on a wireframe root element?▼

Set the data-wf-fidelity attribute on your .wf-root element to wireframe, low, mid, or hi. Ensure your kit consumes var(--vc-color-*) tokens with no hardcoded hex values, then verify rendering in both light and dark themes.

Why does my wireframe fidelity validation fail on invalid attribute values?▼

Wireframe fidelity validation uses a fail-fast approach that rejects invalid data-wf-fidelity values to prevent silent visual mismatches. Only use the accepted values: wireframe, low, mid, or hi to pass validation checks.

Can I use border radius on wireframe stage elements?▼

The radius-zero wireframe contract forces border-radius: 0 at the wireframe stage to keep wireframe-to-build mapping consistent, with an explicit .wf-avatar exception. You cannot apply border radius to other elements during the wireframe stage.

Related Skills

Explore More Design & Creative Skills→
EmasoftEmasoft

amvcp-wireframe

Route wireframing requests to matching wireframe-family sibling skills.

Community
Basic
markus41markus41
18

wireframes-mockups

Generate UI/UX wireframes and mockups in draw.io across fidelity levels.

Community
Intermediate
EmasoftEmasoft

amvcp-diag-architecture

Render interactive architecture and dependency diagrams from JSON scene-graphs.

Community
Intermediate
yogvidwankhedeyogvidwankhede
1

surface-and-depth

Standardize UI elevation and surface styling with token-based shadow systems.

Community
Advanced