Skills
.Work. You
Rest

echo-report

Official

Verify generated UI artifacts match the spec.

Software Engineering#storybook#spec validation#vue components#figma mappings#props emits slots#motion classes#diff reporting
Authoraziontech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents subtle mismatches between generated Vue component code, stories, and Figma mappings and the intended specification by re-parsing artifacts from disk and validating them independently.

Core Features & Use Cases

  • Independent parsing of component API: Re-read defineProps, defineEmits, and defineSlots from every relevant .vue file to extract the operational contract.
  • Story and Figma mapping cross-check: Compare exported story definitions and .figma.ts connection keys against the spec values.
  • Animation and motion consistency validation: Ensure every expected animate-*/transition-* class appears and that each animation class usage complies with motion-reduce requirements.
  • Agreement with the compliance hook: Compare its diff results with validate-spec-compliance.mjs output to decide parity vs degraded vs blocked outcomes.

Quick Start

Run this skill after the component creation step writes files so it can re-read the outputs, diff them against the corresponding .specs/<name>.md, and produce the canonical compliance report.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: echo-report
Download link: https://github.com/aziontech/webkit/archive/main.zip#echo-report

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.