skills.rest
wagnerra23
wagnerra23COMMUNITY
Explore all skills by this author →
GitHub

mwart-comparative

Generate a 15-dimension visual comparison artifact for MWART page migrations.

Updated May 14, 2024
Search Tags:#accessibility#anthropic#design critique#visual comparison#mw art#inertia migration#UI supervision
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill mwart-comparative
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mwart-comparative
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/mwart-comparative
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill mwart-comparative

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents MWART page migrations from shipping with “technically correct but visually generic” UI by enforcing a supervised visual comparison checkpoint before any implementation starts.

Core Features & Use Cases

  • Visual-comparison draft with 15 numeric dimensions: produces the required artifact memory/requisitos/<Mod>/<tela>-visual-comparison.md including Blade legacy vs approved canon reference vs MWART decision.
  • Anthropic design plugin orchestration (design supervisions loop): runs design:research-synthesis, design:design-system, design:design-handoff, design:ux-copy, design:accessibility-review, and design:design-critique to cover structure, UX copy, system consistency, and accessibility.
  • Synchronous approval gate: stops after proposing screenshots/drafts and waits for Wagner approval before any edits/write in the target Inertia page.
  • Post-implementation critique & merge criteria: performs a second critique on real prod screenshots and guides whether to merge, refactor, or hold based on critique score thresholds.

Quick Start

Run the command /mwart-comparative <tela> to generate the visual-comparison artifact and stop for Wagner’s approved screenshot before you implement the MWART page.

Frequently Asked Questions about mwart-comparative

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

FAQPage Schema
How do I enforce a visual comparison checkpoint when migrating Blade pages to Inertia?▼

A visual comparison checkpoint for Blade to Inertia migration requires a supervised workflow that generates a visual-comparison artifact and blocks implementation until approved. This process produces a 15-dimension comparison draft and halts edits pending screenshot approval.

What is a visual comparison artifact in UI migration and when do I need one?▼

A visual comparison artifact in UI migration is a markdown file documenting legacy UI versus approved reference versus new decisions across 15 dimensions. You need one when migrating Blade pages to Inertia to prevent shipping visually generic interfaces.

How do I run a design critique and accessibility review during an Inertia page migration?▼

To run a design critique and accessibility review during Inertia page migration, orchestrate design plugin steps covering research synthesis, design systems, UX copy, and accessibility. This automated loop performs a post-implementation critique on real production screenshots.

Can I use a supervised design workflow to block UI implementation until screenshot approval?▼

Yes, a supervised design workflow can block UI implementation until screenshot approval. This process stops after proposing visual comparison drafts and waits for explicit approval before allowing any edits or writes to the target Inertia page.

What are the limitations of migrating Inertia pages without a visual quality gate?▼

Migrating Inertia pages without a visual quality gate risks shipping technically correct but visually generic UI. Without a 15-dimension comparison and design critique loop, you lose structural consistency, UX copy alignment, and accessibility verification against the approved canon.

Related Skills

Explore More Design & Creative Skills→
jikimejikime
5

jikime-migration-smart-rebuild

Rebuild legacy websites into Next.js and backend code from screenshots and source analysis.

Community
Advanced
StudentCristianStudentCristian

nw-sc-review-dimensions

Critique code and test quality using structured review dimensions.

Community
Advanced
viktorbezdekviktorbezdek
10

design-review-sprint

Audits UX across five dimensions: visual, navigation, copy, journeys, and consistency using dedicated plugins.

Community
Advanced
alanzoppaalanzoppa
1

impeccable

Critique and polish frontend UI design for visual appeal, accessibility, and responsiveness.

Community
Advanced