Diff generated Vue components, stories, and Figma mappings against written specs.
npx skills add https://github.com/aziontech/webkit --skill echo-report
Please help me install this Agent Skill. Skill: echo-report Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/echo-report Command: npx skills add https://github.com/aziontech/webkit --skill echo-report
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.
defineProps, defineEmits, and defineSlots from every relevant .vue file to extract the operational contract..figma.ts connection keys against the spec values.animate-*/transition-* class appears and that each animation class usage complies with motion-reduce requirements.validate-spec-compliance.mjs output to decide parity vs degraded vs blocked outcomes.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.
High-intent search queries and answers about installing and using this skill.
You validate Vue components by re-reading generated files from disk and independently parsing defineProps, defineEmits, and defineSlots to detect contract mismatches against your written specification. This skill performs that exact diffing and outputs a structured compliance report.
Checking Figma mappings and Storybook exports involves cross-referencing exported story definitions and `.figma.ts` connection keys against the spec values. This skill re-reads these artifacts from disk to ensure exact parity after code generation.
Yes, spec validation verifies motion and animation classes by ensuring every expected `animate-*` or `transition-*` class appears in the component. It also checks that each animation class usage complies with `motion-reduce` requirements defined in the spec.
The best way to detect wiring mismatches in scaffolded Vue components is to independently parse the generated files and diff them against the original spec. This skill compares props, events, slots, story exports, and `.figma.ts` enum keys to find exact discrepancies.
You compare compliance reports by running this skill after your component creation step and checking its diff results against the `validate-spec-compliance.mjs` output. This comparison decides whether your component state is at parity, degraded, or blocked.
Yes, you can use this validation tool without external dependencies. It operates by independently re-reading generated Vue components, stories, and Figma mappings directly from disk to validate them against the specification.
aziontechGenerate Figma-to-Vue Code Connect mapping files from variants and slots.
darelabs-techExecute security validation gates on files, staged changes, or repositories.
vobbilisExtract producer outputs and consumer expectations and validate them against formal contracts.
uni-helperBuild Vue 3 interfaces using Composition API components with optional TypeScript support.